Zenn
Open33

Tumblr のカスタムテーマの更新

1515

Tumblrのブログのトップから個別ページに遷移したときにブラウザの履歴に同じURLが2個残ってしまって、マウスの戻るやiOSの戻るジェスチャで一発で戻れなくなってしまう問題、右上のコントロールメニューが出てくるときに履歴を追加してしまってるせいだった
おそらくバグっぽいのだけれども、Backbone.js とかに依存しているっぽいし、直るとは思えない。
一旦 js で iframe をすべて非表示（無効）にしてコントロールメニューが履歴を書き換える前に止めることに成功。

1515

Subject と Date が並んでるところの適切なマークアップがわからない。
dd dl dt はちょっと違う気がする。
MDN のページの似たような構造を見ると、リストで括られてはいるが Subject は p で、Date は span とかで、そんなに構造化されていないので、まあ無理なのかもしれない。
https://developer.mozilla.org/ja/

1515

Tailwind は CDN が js なのかー
CSS で実現できるところだけほしいけどなさそうなので自前で書く

1515

:visited に opacity 使えないのつらい

1515

div 使ったら負けだと思ってたけど普通に負けた

1515

font-size って 18px くらいの方が見やすいよな～って思ってデカ目にしてたけど、それは視力の問題だったりするのでブラウザなり OS なりの拡大を使ってもらうほうが良い気がしてきた。

1515

あと index view では header が大きめでも、 page view では header が小さいほうが記事の内容がファーストビューに多く入るし記事に集中できるよな、って思ってたけど、header がチカチカ切り替わるほうがデメリットな気もしてきた。

1515

ブログとホムペは人の遷移の仕方が違う

1515

Windows の Edge で font-family: Roboto が反映される謎…
DevTools を見るとローカルファイルから持ってきてるっぽいけどローカルに Roboto 入れてないし、Chrome だと Roboto 反映されない

1515

js 使わないで遷移させて like の挙動にするのに超時間かかった

1515

そして Tumblr の文法で表現しきれないところは仕方なく js で…

1515

だいたいできたので明日は運用中のブログに適用してみる

1515

なんか :visited とかの反映が PC だとうまくいくけど、iOS とか Android だとダメだな…
クラス名が悪いのか

1515

なるほど iOS Safari と Android Chrome だと、もともと class 名を当ててたスタイルを prefers-color-scheme: dark の中で上書きしようとしても、class 名がないと詳細度が負けるからスタイルが当たらない

1515

iOS Safari, macOS Safari だと :visited に filter とか無効なスタイルを書いても無視されるわけじゃなくて a のデフォルトが強制的に当たるっぽい

iwashiiwashi

はじめまして、コメント失礼させていただきます。
現在タンブラーにてhtmlを初めて触っている初心者なのですが、squareというテーマを使っているサイトに限り、iosのsafariやchromeでの読み込みがうまく行きません。

loadingの画面のままで、まっしろです。画面をタップすると、ボタンの判定などはあり、真っ白な画面の後ろで事が進行しています。その後ブラウザの戻るボタンをおすと、webページに復帰する事ができ、この挙動には再現性があるようです。

ソースコードを見てみるのですが、内容を追うのが精一杯でiosだけでうまく動かない理由を見つけられていません。検索したところ15さんが関連した内容にお詳しそうでしたので、どうかお力をお貸しいただけないかとおもいご連絡いたしました。突然のお願いではございますがどうかよろしくお願いします。

iwashiiwashi

ご返信いただきありがとうございます、、！

はい、そうです。
こちらのテーマがとても気に入っているのですが、カスタムHTMLを一度編集すると二度目には必ずエラーが出たり
気難しいテーマのような気がします、、(笑)

1515

明日試しにインストールして見てみます！

iwashiiwashi

ありがとうございます、、！
お返事お待ちしております。m(_ _)m

1515

インストールしてみました
https://sandbox15.tumblr.com/
ブログの設定から Use default mobile theme をオフにしています。

手元にある iPhone XR (iOS 18 Public Beta), iPhone 6S (iOS12) の Safari で問題なく表示できています。
こちらのページは正しく表示できているのであれば、テーマをカスタム HTML で修正した内容が原因の可能性が高いので、ブログかコードを見せていただかないと調査は難しいですね…

1515

その後、こちらの問題は解決しましたか？
もしブログのソースや URL をここで公開したくない事情があれば、こちらのリンク先から何かしらの手段で連絡をもらえれば、秘密厳守で動作確認します！
https://studio15.jp/

iwashiiwashi

わざわざすみません、、！
目的のページは先日公開しなければならない期限があり、一旦モバイルのデフォルトテーマで公開することにしました。

共有していただいた https://sandbox15.tumblr.com/ のページですが、携帯で開こうとするとロードで止まってしまい、やはりテーマのソースに問題があるのかなと思います。

挙動を画面録画したものを、いただいた連絡先にお送りさせていただきます、、お手数をおかけしてしまいすみません、、可能な範囲で、ご対応をお願いいたします。気にかけていただいて、ありがとうございます。

1515

動画確認しました
自分の持っている端末と挙動が違いますね…
端末名と OS のバージョンを教えていただけますか？

1515

あとは iCloud プライベートリレーやコンテンツブロッカーや VPN の影響の可能性もあるので、プライベートリレーとコンテンツブロッカーとVPN をもし使っていたらそれらをオフにした状態で確認してみてください
（iCloud プライベートリレーは確か iCloud に加入していると自動で有効になっていると思います）
https://support.apple.com/ja-jp/102602

iwashiiwashi

プライベートリレーはオフになっていました。
iphone 12mini,ios16.61です。
自動アップデートの設定にしていたのですが、去年のもので止まっていることに今気がつき、osのアップデートを始めました。

1515

プライベートリレー・コンテンツブロッカー・VPN のいずれでもないとすると、あとは単純なところでネットワーク速度の可能性でしょうか…
十分な速度が出ているようには見えますが、念のため https://fast.com/ja/ での測定結果を教えてもらえますか？

あと、テーマのコード上で挙動が怪しそうなところを修正して https://sandbox15.tumblr.com/ に反映させたので、この状態で読み込めるかどうかも見てみてください

iwashiiwashi

お返事が遅れてしまいすみません。

63Mbps と出ました！
修正されたHPですが、iphoneのブラウザから表示することができました！！

自分のページにも試してみたいのですが、修正の内容を伺ってもよいですか、、？

1515

カスタム HTML (Edit HTML) の画面でテーマのソースコードを開き「http:// と書かれている部分をすべて https:// に書き換える」と、表示が直るようです。
おそらくセキュリティ的な事情でブラウザが http:// の URL を読み込めず、セキュアな https:// の URL だと読み込める、という原因のようですが、手元で同じ現象が再現しないのではっきりとは言えないですね…

https://ja.wikipedia.org/wiki/HTTPS

この Square というテーマは全体的に作りが古く、もしかすると他の要因でも他の人がアクセスしたときにページを表示できないことがあるかもしれません。
Tumblr のテーマは古くに作られたことが多く、制作者の方の現在のテーマ更新のモチベーションは様々だとは思うのですが、もしこの修正で表示できるようになるのであれば、制作者の方にアップデートのお願いをしても良いかもしれません。
もし、アップデートがされないようであれば、その時は自分でなんとかするしかないので、がんばって HTML を編集していきましょう！

iwashiiwashi

具体的なお話をありがとうございます、、！試してみたいと思います。

htmlの編集ページで、あるワードを別のものに置き換える操作があったのでそれをつかってhttpsに置き換えてみます

なるほど、問い合わせができるようなので製作者の方にも聞いてみます。