【Blogger】テンプレートを JetTheme に変えました
約２年前に Blogger でこのブログを始めてから QooQ を利用してきましたが、今回 JetTheme というテンプレートに変えてみました。
Bootstrap という仕組みでつくられているようで、最初は CSS のカスタマイズに戸惑いましたがルールがわかれば難しくなく、とりあえず気になった部分を修正して導入してみました。
目次
JetTheme は海外製の高速テンプレート
JetTheme は、海外の作者さんが制作されている Google Blogger のテンプレートです。
その特徴は豊富な機能と、ページ表示の圧倒的な速さ！
私がこの JetTheme の導入を決めた理由はページ表示が非常に速かったから。ほとんどこの１点です。
デモサイトJettheme - Lightweight Template Blogger
以前利用していた QooQ も速いテンプレートなんですが、デフォルトは超シンプル仕様なのでいろんなカスタマイズを追加してたんですよね。そのせいか、記事数が増えるにつれて徐々に重くなるように感じていました。
高速化にも取り組んで、PageSpeed Insights のスコア的にはモバイル・PC ともに 95 前後は出るまでに至ったのですが、目に見える体感的なスピードがやっぱりなんかちょっと遅いというか、納得いかないと感じていました。
QooQ で高速なブログもあるので私のカスタマイズが原因だったとは思うんですが、原因の究明ができませんでした。
スコアが良ければ別にいいじゃんとも思いますが、JetTheme のデモサイトを見て試しにテストブログに反映させてみたら、ページ表示がすごく速かったのです。
※ 当ブログでの体感です
JetTheme と QooQ の大きな違いはこのあたりなのかなーと個人的には思っています。
- デフォルトで各種機能を装備した上で高速化・最適化されている
- 機能追加のカスタマイズがほとんど必要なく、重くならない
- ユーザーによる高速化対応は不要
- デフォルトでは軽いが、機能が最小限
- ユーザーが各機能を個別に追加するとき、追加方法がまずいと遅くなる
- カスタマイズした上でページ表示速度を上げるには、高速化対応が必要
Bootstrap という仕組みも速い要因なのかなぁ。そこはよくわかりません。もちろん QooQ も、下手にカスタマイズしなければ十分速いと思います。
JetTheme を使うにしてもデザインは変えたかったし、これまで QooQ を時間かけてカスタマイズしてきたからなーとも思いましたが、ページの表示速度を優先して切り替えることにしました。
テストブログで試してみて、自力でのカスタマイズもまぁまぁできそうかなと思ったのも切り替え理由の１つです。
テンプレートの基本的な設定方法は、こちらのブログにて紹介されています。
Blogger無料テンプレート「JetTheme」のテーマ設定について - after work lab
また、以下公式サイトにも各種説明があります。公式サイトはインドネシア語ですが、翻訳機能を使えば日本語でだいたい理解できます。
公式サイト（ドキュメント）Docs - JetTheme - Best Ultimate Blogger Template in 2021
導入後の PageSpeed スコアは 97〜100 くらい。スコア的には以前とそこまで大きな差はないですが、体感では以前よりだいぶ速く感じます。
ほかに気に入った機能：ハッシュタグ
ページスピードの他に気に入ったのは、ラベルを「カテゴリー」と「タグ」に分けて扱える機能です。
Blogger のラベルって階層的なカテゴリーじゃなくて、並列的なタグの扱いですよね。
だから、記事分類の際にどのようにラベルをつけるかが少し難しくて、多すぎてもわかりにくいし、少なくても記事の絞り込みに不便だなと思っていました。
パンくずリストに全ラベルを表示するか最後のラベルだけ表示するかとかそういう問題もあります。その最後のラベルというのも五十音順で決まるから、理想通りにコントロールできないんですよね。
JetTheme では、ラベル名に#をつけるかどうかでカテゴリーとタグを分けて扱うことができます。
- # なし → カテゴリー
- # あり → タグ
サイドバーにも表示されていますが、こんなふうに別々に表示されます。
記事一覧やパンくずリストには # なしのラベル（＝カテゴリー）だけが表示されるので、カテゴリーとタグの両方を提供できるイメージです。
これ、ほしかった機能！！
テンプレートを見てみるとわかりますが、ラベル名に # が含まれるラベルを抽出する、スキップする、みたいな書き方があるようです。
カテゴリーとして大分類を設定し、タグとして小分類を設定し直しました。
あとは、ハンバーガーメニューが実装されてるのも良かったです。
他にもダークモード、追従するサイドバー、自動目次、本文中に自動アドセンス挿入などの機能が含まれています。
カスタマイズの際は、Bootstrap のクラス名一覧を参考に
JetTheme のデザインをカスタマイズするには、Bootstrap のクラス名をなんとなく把握しておく必要があります。
クラス名は、mb-（margin-bottom）とか fs-（font-size）とか、テンプレートを眺めているとなんとなく雰囲気がわかってきますが、以下 Bootstrap 公式サイトで調べられます。
追記：よく使うクラスを一覧にしました。
Bootstrap 5 クラス一覧（早見表）
Bootstrap 5 に標準で用意されているクラスのうち、よく使うものを一覧にしてみました。 カスタマイズの参考用です。
ヘッダーの挙動や自動アドセンス、自動目次、関連記事の生成などは独自のスクリプトで制御しているようで、ここに関わる修正をしたい場合はちょっと大変かもです。
独自スクリプトは、テンプレートの最後のほうにある以下のスクリプトです。
<script src='https://cdn.jsdelivr.net/gh/jettheme/js@0.5.5/main.js'/>
※js@0.5.5の数字は、バージョンによって変化します。
また、目次がスムーススクロールで動いたので jQuery が入ってるのかなと思いましたが、入っていないようです。これまで jQuery で動いていた機能が動かなくなったのであれーと思って気づきました。この際だと思って jQuery は外しました。
あとは、一部の日付表示が英語（→ 修正されました）とか、ファーストビューに来る注目の投稿の画像の Lazyload を取り除けないとか、アーカイブ表示が微妙（→ 修正されました）とか、まだ気になるところはあるんですが、時間ができたら修正方法を調べてみようと思います。
とりあえず良い感じに導入できて、よかったです。
▼ JetTheme のカスタマイズ情報を更新中です
【Blogger】JetTheme カスタマイズ方法一覧
JetTheme を導入するにあたって、いくつかカスタマイズを行いました。 当ブログでのカスタマイズ内容・修正方法をこちらで紹介していきたいと思います。
▼ JetTheme を導入して２週間後、特徴と機能をまとめました。
JetTheme の特徴と機能。導入後の気づき
JetTheme を導入して２週間ほど経ちました。今回はカスタマイズを通してこのテンプレートについて感じたことを自分なりにまとめてみます。