最近、Bloggerテンプレートをカスタマイズした話（2021年12月）
本ページはプロモーションが含まれています
こんにちは！もなか（@monaka496）です。最近、年末年始で久しぶりにまとまった時間ができたのでBloggerテンプレートのカスタマイズをしていました。しばらく仕事で忙しくブログに時間が割けていなかったので、こんなにしっかりカスタマイズしたのは自作テンプレートを作ったとき以来、1年ぶり近くになります。今回の記事では私がカスタマイズした内容や参考にした記事などを紹介したいと思います。
BFBに月別アーカイブを実装
以下に詳細をまとめています。
自作テンプレートを作るにあたってアーカイブページを作っていなかったというしょうもない話なのですが、作ってみたという話になります。BFBテンプレートで実装しているので月別アーカイブはBootstrapで再現しています。
使っているのはBootstrapのDropdownsになります。そのためPopperを読み込むようにしています。細かいデザインの調整はBootstrapのものを利用しています。当初横幅がうまいこと決まらずに苦戦しましたが、うまいこと調整できました。
webp実装（-rwタグ）【軽量化第1弾】
スマホの「PageSpeed Insights」の結果が恐ろしく悪かったので、軽量化したいと思い目をつけたカスタマイズです。参考にしたのは以下の記事です。
画像のURLの末尾に「-rw」をつけるだけでBloggerにアップした画像をWebP形式に変換してくれるとのことで、こんな便利機能使わないともったいないと思って実装してみました。
IB-Noteさんのカスタマイズを参考にしようと思ったのですが、ふと末尾に「-rw」つけるだけで良いのでは、と思って以下のようにやってみたところうまいこといきました。
<img alt='イメージ' expr:src='data:post.firstImageUrl + "-rw"' style='width: 100%; max-height: 200px; object-fit: cover;'/>
やっていることとしては「data:post.firstImageUrl」のうしろに「-rw」をつけるだけという力技です。これでTOPページとサイドバーに表示される画像をWebP形式に変換することができました。
アドセンス読み込み遅延【軽量化第2弾】
こちらも軽量化のためにやりました。アドセンスがサイトを重くしている最大の要因でした・・・。参考にしたのは以下の記事です。
すたすた式さんのカスタマイズが非常に参考になりました。アドセンスの読み込みを遅延させているということなのですが、これだけで驚くほどスコアが改善しました。アドセンスで重くなっていて悩んでいるという方はこちらの記事がおすすめです。
リッチリザルト対応（記事、サイト内検索）
参考にしたのは以下の公式ドキュメント。
もともと投稿記事ページは「パンくずリスト」と「記事」には対応させていたのですが、今回TOPページについてもリッチリザルト化してみました。サイト内検索とTOPに表示している「記事」を対応させています。
こんな感じでリッチリザルトの対象になっていることが確認できました。色々試行錯誤しながらやったので結構時間がかかってしまいましたが、結果うまくいきました。
これでGoogle検索の表示がいい感じになって検索からの流入が増えてくれると嬉しいのですが、リッチリザルト化したからと言って100%いい感じに表示されるわけではないようです。とにかく質の高い記事を書かないとですね・・・ちなみに個別記事を最初microdataで実装してしまったので、authorの項目を設定できていないので気が向いたら実装しようかな。
記事の更新日付の表示
参考にしたのは以下の記事
こちらもすたすた式さんの記事を参考にさせてもらいました。こちらは紹介頂いているコードをそのまま埋め込んだところいい感じに表示されたので、あとは余白を微調整していい感じにすることができました。
iPhone5sやSE初代でも1行で表示されるようにできたのでいい感じになりました。アイコンはBootstrap iconsの「Arrow clockwise」を利用しています。
まとめ
今回でずっと気になっていたカスタマイズをすることができて少しスッキリしました。本当は、PageSpeed Insightsの成績をもっと上げたいんですが難しいですね。なかなか良化しないのでもう少し工夫が必要かもしれないなと思って一旦一区切りとしました。引き続き良さそうなカスタマイズにアンテナを貼りつつブログ更新頑張りたいと思います。
