Tumblr のカスタムテーマの更新
HTML と CSS がぐちゃぐちゃになってきてメンテナンスが無理になってきたので、Tailwind 風のデザインシステムを作ったりしてメンテナンス性を上げたい。
Tumblrのブログのトップから個別ページに遷移したときにブラウザの履歴に同じURLが2個残ってしまって、マウスの戻るやiOSの戻るジェスチャで一発で戻れなくなってしまう問題、右上のコントロールメニューが出てくるときに履歴を追加してしまってるせいだった
おそらくバグっぽいのだけれども、Backbone.js とかに依存しているっぽいし、直るとは思えない。
一旦 js で iframe をすべて非表示(無効)にしてコントロールメニューが履歴を書き換える前に止めることに成功。
Subject と Date が並んでるところの適切なマークアップがわからない。
dd dl dt はちょっと違う気がする。
MDN のページの似たような構造を見ると、リストで括られてはいるが Subject は p で、Date は span とかで、そんなに構造化されていないので、まあ無理なのかもしれない。
Tailwind は CDN が js なのかー
CSS で実現できるところだけほしいけどなさそうなので自前で書く
:visited に opacity 使えないのつらい
div 使ったら負けだと思ってたけど普通に負けた
font-size って 18px くらいの方が見やすいよな~って思ってデカ目にしてたけど、それは視力の問題だったりするのでブラウザなり OS なりの拡大を使ってもらうほうが良い気がしてきた。
あと index view では header が大きめでも、 page view では header が小さいほうが記事の内容がファーストビューに多く入るし記事に集中できるよな、って思ってたけど、header がチカチカ切り替わるほうがデメリットな気もしてきた。
ブログとホムペは人の遷移の仕方が違う
Windows の Edge で font-family: Roboto が反映される謎…
DevTools を見るとローカルファイルから持ってきてるっぽいけどローカルに Roboto 入れてないし、Chrome だと Roboto 反映されない
js 使わないで遷移させて like の挙動にするのに超時間かかった
そして Tumblr の文法で表現しきれないところは仕方なく js で…
だいたいできたので明日は運用中のブログに適用してみる
なんか :visited とかの反映が PC だとうまくいくけど、iOS とか Android だとダメだな…
クラス名が悪いのか
なるほど iOS Safari と Android Chrome だと、もともと class 名を当ててたスタイルを prefers-color-scheme: dark の中で上書きしようとしても、class 名がないと詳細度が負けるからスタイルが当たらない
iOS Safari, macOS Safari だと :visited に filter とか無効なスタイルを書いても無視されるわけじゃなくて a のデフォルトが強制的に当たるっぽい
はじめまして、コメント失礼させていただきます。
現在タンブラーにてhtmlを初めて触っている初心者なのですが、squareというテーマを使っているサイトに限り、iosのsafariやchromeでの読み込みがうまく行きません。
loadingの画面のままで、まっしろです。画面をタップすると、ボタンの判定などはあり、真っ白な画面の後ろで事が進行しています。その後ブラウザの戻るボタンをおすと、webページに復帰する事ができ、この挙動には再現性があるようです。
ソースコードを見てみるのですが、内容を追うのが精一杯でiosだけでうまく動かない理由を見つけられていません。検索したところ15さんが関連した内容にお詳しそうでしたので、どうかお力をお貸しいただけないかとおもいご連絡いたしました。突然のお願いではございますがどうかよろしくお願いします。
こんにちは!
Square というテーマはこちらのものでしょうか?
ご返信いただきありがとうございます、、!
はい、そうです。
こちらのテーマがとても気に入っているのですが、カスタムHTMLを一度編集すると二度目には必ずエラーが出たり
気難しいテーマのような気がします、、(笑)
明日試しにインストールして見てみます!
ありがとうございます、、!
お返事お待ちしております。m(_ _)m
インストールしてみました
ブログの設定から Use default mobile theme をオフにしています。手元にある iPhone XR (iOS 18 Public Beta), iPhone 6S (iOS12) の Safari で問題なく表示できています。
こちらのページは正しく表示できているのであれば、テーマをカスタム HTML で修正した内容が原因の可能性が高いので、ブログかコードを見せていただかないと調査は難しいですね…
DONE
text-box-trim (leading-trim) が早く来てほしい