編集

ブログテンプレートの大改修工事の裏話

2026 /01 /12

ご覧の通り、ブログのテンプレートの大改修工事を実施しました。

めっちゃ見やすくなったと思わん？(๑╹ω╹๑ )

数年後に見返して懐かしくなれるように、改修前のテンプレのスクショ貼っておこう。

改修の経緯

このブログには2026/1現在、約2400記事あります。

私はだいたいどんな記事を書いたのか覚えていますが、まぁ...初見殺しにも程があるよね。
そして、どんなサービスがあるのかもちょっとわかりにくいかも。

ということで動線を見直したいな〜、もっといい具合にブログ内を回遊して楽しめるようにしたいな〜と思っていたのです。

旧テンプレを騙し騙し拡張しながら少しずつ動線を作っていこうかなと思ったのですが、
・SNSボタンがTwitterのままで直ってなかったり（旧テンプレでは"Twitter"って入れるだけで、自動でアイコンと色がセットされる仕様だったのです）
・コンソールを見ると謎のエラーを吐き続けてたり
・過去記事を総覧しようとすると、なぜか一部データが欠落して全体表示されなかったり（これは結局テンプレの問題ではなかった。後述します）

このあたりが薄々気になっていました。

...ってこれもう、抜本的に変えちゃえばよくない？
だって新年始まったし！今年で10周年だし！！

ということで、えいやと改修へ。

思えば旧テンプレは2021年くらい？からお世話になっていました。長かったなぁ。

テンプレ選定

Bloggerのテンプレートはいくつかのサイトで配布されているのですが、日本語テンプレはとにかく少ないです。

これまでは海外のテンプレを使っていたのですが、英語記事だとめっちゃおしゃれに見えるのに、日本語にすると途端にダサくなる、みたいな悲しき現象が割とよくあります。

たとえばドロップキャップ（段落の先頭の1文字目を大きく装飾して表示する表示）とか。アルファベットなら写本風でかっこいいのに、日本語だと違和感しかないのだよな...

ということで、今回は初めて日本のテンプレートを使いました。

使用させていただいたのは、ふじやんさんの制作されているF-lightです。

Blogger テーマ F-light (エフライト) について | F-light

この方は、Google Bloggerを使ったブログ更新をされている「ブロガラー」仲間のお一人。Bloggerのカスタマイズ方法などもたくさん投稿されていて、大変勉強になります。

F-light テーマは徹底的に最適化処理が施されているので、どんなツールで計測してもほぼ満点です。

この部分に惹かれて導入を決めました。

で、導入した現在のテンプレのPageSpeed Insightsの成績はこう！

mobile: 94点

desktop: 99点！

元のをスクショ撮り損ねてしまったのですが、60点代だった記憶があるので、大幅アップです。すごない？？？？

テンプレを改良しよう

ロゴのSVG化

切り絵のトップページのロゴ。

これ、もともとは画像ファイルを使っていたのですが、ページ読み込みスピードを落としたくないがためにSVG化しました。

まずロゴ画像をAIでフルカラーSVGに変換し、それをさらにsvgoというコマンドで圧縮して容量を小さくしました（このコマンドラインツール、めっちゃおすすめです！）。

リンク集の追加

サイドバーにリンク集を追加し、トップページ上部に特集記事のリンク集を追加しました。

これで回遊しやすくなるかな。今後もちょっと面白い仕掛けを増やす予定です。

そしてトップページに「影織文庫の楽しみ方」の記事を追加しました。

ちなみにこの記事内の「現在の総記事数」と「最終更新日」は、アクセスするたび自動で取得され、最新情報が出ます。

いいねボタン・リンクボタンの改良

もともとはLikeとLinkと書いてあるシンプルなボタンだったのですが、これまたSVGボタンにしてみました。

押すと可愛くなります。

記事下にあるから、みんないっぱい押してね。

このボタンに変えたら、体感いいねの通知が来るのが増えた気がする。

押したくなるUIをセットするのって大事ですね。

Google Analyticsの再設定

テンプレを入れ替えたらGoogle Analyticsが死んでいたので、大慌てで追加。

が、タグを入れると謎に二重カウントを始めてしまう、という問題が発生していました。

最終的に、Blogger側でのタグ設定を抜いて、手動で</body>の前にGA4のタグを入れることで解決。

また、これを入れるとPageSpeed Insightsの成績が下がるので、700msほど遅延させて読み込みをスタートしています。

過去記事が全件表示されない問題

これは今回の改修の最大の沼でした。

結論から言えば、以下の記事で書いたのと同じ問題で、「ページの読み込みがめちゃくちゃ重いと、Bloggerでは、自動で読み込みを止めてしまう」というところがネックだったのです。

【Blogger】記事一覧表示で、投稿が一部出てこない時の原因と対処法 | 影織文庫

画像の多い記事には全てmoreタグを貼って対処してきたのですが、それでも、一記事の文字数が多い + 記事数が多い + 画像が多いのトリプルコンボで、記事が表示されなくなっていたのです。キレそう。

具体的な格闘の記録は、次回の記事にまとめます。

テーマカラー・行間などのカスタマイズ

テンプレを影織カラーにセット。

なお、影織カラーの赤色は#a10115です。

どこで使えるかわからないお昼の無駄知識でした。

また、行間について、旧テンプレではpタグや見出しタグの隙間がかなり小さく設定してありました。

（というのは、さらにその前の、CSSをあまりわからないままにいじっていた頃のテンプレの設定から見た目を引っ張ってきていたことに由来します）

新テンプレはすごくきれいに隙間のサイズが設定してあったのですが、そのまま使うとかなり行間が空いてしまう部分があったので、ちょっとだけ設定をいじっています。

それでも、古い記事の一部はかなりスカスカになっているところがあるかもしれません。

遡って修正するのはきついからそのまま行くね！ごめん！

まとめ

改修後早速、読者さんから「見やすくなった」とのお声をいただいており、大変嬉しいです。

新生影織文庫で、これからも楽しく記事を投稿していきますね。