BloggerテーマをF-lightに変更しました【二重枠の調整とフォントの速度設定】

F-lightにテーマを変更したかったのですが、写真の枠に枠がついてしまうこと、変更してもNoto sans jpを使うと遅くなってしまうことで躊躇していました。でも、知識がなくてもAIの力を借りて解決できました。画像の二重枠はテーブルCSS修正で解決、Noto Sans JPはmedia hackでスコアを維持です。

Bloggerのテーマとは

Bloggerテーマとは、ブログの見た目を決めるテンプレートです。テーマを変更するだけで、色使い、フォント、背景、記事の並び方などの外観を纏めて変えることができます。

その反面、テーマを変更することで、今までのブログ記事のレイアウトが崩れたり、カスタマイズが反映されないなどの不具合が起こります。

F-lightとは

「F-light」は、ふじやんさん(ふじろじっく)が制作した、軽量・高速設計のBloggerテーマです。ダークモードにも対応していてイマドキって感じです。

F-lightに変えたい

１年前にブログを始めた時に、選んだテーマは「SMART」でした。今もデザインは気に入ってるのですが、Gemini曰く、コードの書き方が少し古いらしく、変更しようと格闘したこともあります。

SMART
リリースから時間が経過しており、最新のブラウザ仕様やBloggerのシステム更新への追従が以前ほど頻繁ではありません。

F-light
比較的新しく、現在のWeb標準に合わせた設計になっているため、現代のスマホ閲覧環境により適しています。

最大の問題は画像の枠でした

「SMART」から「F-light」へ変更する場合、レイアウトの再設定が必要です。「SMART」でHTML/CSSに直接書き込んでいたカスタマイズは引き継がれません。試しに当ててみたら、行間などは仕方ないとして、画像が困った事になってしまいました。

そのままだと枠だらけに

「F-light」の画像はキャプションと一体となった枠と影がついて格好いいです。

キャプションと写真が一体で影がついて格好いい

でも、写真が２枚並んでいると枠に枠が付いてしまいます。安易にTableで並べているのが悪いのだろうけど、今さら直せない😓

２枚並んでると枠に枠がついて枠だらけに･･･

今までの記事を全て直すのは大変すぎるので、これが解決しないと「F-light」に乗り換えできません。

ChatGPTにお願いする

ChatGPTに聞くと、自信たっぷりに（いつものことだけど）できるとのこと。コードを考えてもらいました。最初は頑なに追加CSSで対応しようとしてたけど、結局テーブルのCSSを書き換えることになりました。何度ダメ出ししたことか。

１枚の枠と影は消えたけど

ChatGPTが最初に出してきた答えは、追加CSSに影と枠を消すコードの追加です。

/* 記事本文内の画像・キャプションの枠と影を消す */
.post-body .separator,
.post-body img,
.post-body .tr-caption-container {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

これでは１枚の時の枠は消えたけど、２枚並びの時の枠は消えませんでした。その後に出してきたコードだと、枠は消えるけど２枚の隙間が凄く開いてしまったり、隙間をなくすと枠が復活したりと試行錯誤です。

最終的なカスタマイズコード

３～４時間はやり取りをしていたでしょうか。F-lightはfigure前提の設計のため、tableレイアウトだと追加CSSでは対応出来ないということになり、テーブルのCSSを書き換えました。

カスタマイズ後の写真１枚

カスタマイズ後の写真２枚

画像とキャプションは一体に出来なかったけど、納得できる状態になりました。

⚠️ バックアップを取ってからお試し下さい

/*======== テーブル ========*/

/* データテーブル（thあり） */
table:not(#bp_toc table):not([class]) th {
  border: solid 1px #ccc;
  text-align: center;
  color: var(--brand-font);
  background: var(--brand);
  padding: 0.3em;
  font-weight: normal;
}

/* データテーブル本体（thを含むtableだけ）*/
table:not(#bp_toc table):not([class]):has(th) {
  max-width: 100%;
  border: solid 1px #888;
  border-collapse: collapse;
  margin-top: 0.5em;
  line-height: 1.5;
}

table:not(#bp_toc table):not([class]):has(th) tbody tr td {
  border: solid 1px #888;
  padding: .3em;
}

/* imgとtd,trの隙間 */
.post-body table:has(.separator) td {
  font-size: 0 !important;  
}

/* 画像そのものに影 */

.post-body img,
.post-body table img {
  box-shadow: 4px 4px 8px rgba(0,0,0,.15) !important;
  border-radius: 5px !important;
}

/* ダークモード時の画像影を強化 */
[data-theme-mode="dark"] .post-body img,
[data-theme-mode="dark"] .post-body table img {
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5) !important;
}

正直、何をどう直しているのか細かくは分かりませんが、「データテーブルと画像用テーブルを分離」、「画像にのみ影を付与」、「tr-caption-containerの余白を解消」ということをやっているらしいです。

フォントはやっぱりNoto sans jpにしたい

爆速F-lightを遅くするような変更だけど、Noto sans jp好きなんです。

Google Fontsを読み込ませると遅くなる

ChatGPTに聞いてみる

これもChatGPTに相談したところ、こんな答えが･･･

点数気にしない → 今のままでOK
スコア90台狙う → media hack使う
超高速派 → Google Fontsやめる

最終的なカスタマイズコード

media hackとは、CSSを一度『print用』として読み込み、読み込み後に適用することで描画をブロックしない仕組み。『media='print'』で、記事の読み込みを止めずにバックグラウンドでフォントを読み込むことでスコアが上がるらしい。

⚠️ バックアップを取ってからお試し下さい

<!-- Google Fonts 最適化 -->
<link href='https://fonts.googleapis.com' rel='preconnect'/>
<link crossorigin='anonymous' href='https://fonts.gstatic.com' rel='preconnect'/>

<link href='https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&amp;display=swap' media='print' onload='this.media=&apos;all&apos;' rel='stylesheet'/>
<noscript>
  <link href='https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&amp;display=swap' rel='stylesheet'/>
</noscript>

※:has()は新しめのブラウザで使える機能です。古い環境では動作しない可能性があります。

スコアが97に上がった！！すごいな😲

一瞬FOUT出るけど、こっちのがいいよ！

この後は、CSS移植やダークモード対応など、トータルで30時間以上このテーマと向き合っていました。 GeminiやChatGPTとのやり取りでは、かなり遠回りすることも。それでも、その試行錯誤こそが一番面白い時間だった気がします。

テーマの引越しは大変でしたが、達成感はひとしおです。この記録が、同じようにF-lightへの乗り換えで悩んでいる人の参考になれば嬉しいです。

次回は、これまたAIの力を借りて設置した「いいねボタン」についてお話しします。

💖 読んでいただき有難うございました。