iPad mini対応

BloggerをiPadのブラウザでアクセスするとPC用のテンプレートが使われる。文字がちっちゃくて読めたものじゃない。

タブレット向けメディアクエリでmax-widthをデフォに戻してサイドの空きを詰めたり、フォントサイズをvwで指定して読める大きさにしたりして、まぁまぁ実用的なところまでもっていけたかと。

@@ -681,7 +681,34 @@
 
 .jump-link {
   display: none;
+}
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+  body {
+    font-size: 1.8vw; /* 14px var(--body-font) */
+  }
[略]
     <b:template-skin>
@@ -754,6 +781,11 @@
       body#layout div.add_widget a {
         margin-left: 32px;
       }
+      @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+        .content-outer, .content-fauxcolumn-outer, .region-inner {
+          max-width: none;
+        }
+      }
       ]]>
     </b:template-skin>

追記

作業前画像と比較したくて、一度テンプレートを戻してキャプチャし直した。並べるとあんま差がない気がするが、作業前の状態だとiPadで読む気にはなれん字の大きさなんよ…

Blogger挙動不審

ウィジェットのブログアーカイブは階層に設定してあり、年月の横の三角マークで展開したり閉じたりできるのだが、これがページによって機能したりしなかったりすることに気づいた。なによりトップページで機能してない。

機能しないページはjavascriptが動いていないようで、画像のリンク先で画像切り替えが効かず右上の閉じるマークもでない。あれこれ試していてページを更新すると機能するようになることが判明。ただ、更新によって機能するようになるページも、更新後すぐに機能するわけじゃなくちょっと時間がかかったりする。

モバイルからのアクセスで読み込まれるコードがいつの間にかデフォからこちらが編集したものに入れ替わったりしたのもそのたぐいなのかも。レプリケーション待ち？なんか手を加えたらちょっと待つくらいがいいのかも。

追記

この記事を新規に投稿したからなのか単に時間が経ったからなのか、トップページだけじゃなく過去のページ(20件ほど)もスクリプトは動くようになった模様。

追記2

画像キャプチャ見て、ブログアーカイブの記事タイトルの2行目のインデント位置が気になってしまった。list-style-type: none;するなら最初っから手当しといてくれw

.BlogArchive #ArchiveList ul.posts li {
  text-indent: 0;
  padding-left: 0;
}

両方0にしたから、元よりちょっと前になってるな…

追記3

再発しとる！もしかして、記事の更新すると発生するのか？ちょっと放置しておいてみよう。ダメなら新規投稿すると治るか試そう。

追記4

放置してたら治ってた。そういうことか。で、たぶんこの更新でまた再発するに違いないw

追記5

再発してなかった。発生するかは時の運。発生しても時間をおけば解消する、と。

モバイル版のテーマに手がだせた

スマホでもダークモードになっていた。

正確には手がだせたわけでない。ふと気づくとモバイル版に切り替えたときに埋め込まれるstyleが、未編集のデフォルトっぽいものから、「HTMLの編集」でカスタマイズしているコードのものになっていたのだ。なぜに？どういうこと？

これまで手を入れてなかった.mobile*なクラスのセレクタに色指定するだけで、あっさりダークモード切り替え対応に。もう少し調整するけど、とりあえずできた。

だが、なんでこんなことに？変化点と言えばトップページ要約化の修正したことくらい。あれでモバイル版に反映されるようになった？そんなことがあっていいの？

トップページの記事を要約化

モバイル版のCSSには手が届かないことがわかった。モバイル版をデスクトップの設定にするくらいしかどうしようもない。てなことで、まずデスクトップのテーマをモバイル版に寄せることにした。

いろいろググって、このサイトを参考に、テンプレートのXLSTっぽいところにsnippetなコードを挿入し、既存テンプレートのEssentialみたいにしてみた。

あとは、@mediaでモバイル用のCSSでサイドのパーツ消したりなんなりすればなんとか…？

追記

その後モバイル版にもこちらが編集したテーマが適用され(次の「モバイル版のテーマに手がだせた」がその話)ダークモード切り替えが可能になった。が、トップページの要約化はやりたかったのことの一つなので、これはこれで。

モバイル版のテーマに手がだせない

モバイルテーマをカスタムに設定してるのに、元のSimple Simpleのままでは？

モバイル版に切り替えるとstyleとして埋め込まれるコードには、テーマ > カスタマイズ > HTML の編集を使って埋めたprefers-color-scheme使ったCSSはどこにも見当たらず、夜になってもダークモードに切り替わらないので煌々と明るく目が痛い。モバイル版styleのコードを編集できないもんかねぇ…

追記

次とその次の話でこの件は解決済み。

favicon

旧サイトから持ってきていたfaviconを作り直した。

48,32,16pxの画像を重畳して作るもんだと思っていたが、最近はもう適当でいいのね。なので512pxの原図をGIMPで40pxにしてicoにエクスポートしたのを設定した。旧サイト版は滲みまくってたけど今回のはちゃんと字が読めるくらいになった。