BloggerにJetThemeを導入する話

Bloggerにテンプレート（JetTheme）を導入する話。個人用の備忘録。

久しぶりにブログを触っていて、まず思ったこと。

スマホで見てもレイアウトがPCブラウザで見るのと変わらない。つまり、レスポンシブデザインではないということ。

令和の時代になってスマホやタブレットに対応していないというのは時代遅れも甚だしい。一応曲がりなりにもITに関わっている身としてはせめてそれくらいは対応しておきたい。

ということで、古いテンプレートはさっさと消して、新しいテンプレートへ入れ替えることにした。

テンプレートの選定

まずはテンプレートをどれにするか選ぶ必要がある。

Bloggerで提供されている公式のテンプレートはいくつかあるが、どれがレスポンシブ対応なのか分からない。少なくとも今まで導入していた『Awesome Inc.』は非対応である。

調べてみると、以下が公式から提供されているレスポンシブ対応テンプレートらしい。

• Comtenpo
• Soho
• Emporio
• Notable
• Essential

しかし、どれもいまいち好みのデザインではなさそうだ。

公式以外のテンプレートはないものかと調べると『Blogger Templates』に有志が作成したテンプレートがあった。現時点で4413件のテンプレートが登録されている。

その中からいくつか適当にダウンロードして導入してみる。

良いなと思ったテンプレートはあった。しかし、デザインをカスタマイズするにはソースを編集する必要があり、1からコードを読み解いて修正していくのはとてもめんどくさい。あくまで趣味の個人ブログなのでそこまで手間をかけたくない。

そこで、先人達（なるべく日本語が堪能な方）が既に導入していて、ネット上に情報がある程度蓄積されているテンプレートを選ぶことにした。

• QooQ
• JetTheme

この方針で挙がってきたテンプレートがこの二つ。カスタマイズ性や表示の軽快さなど様々な理由により選ばれている様子である。

そんな技術的な評価は一旦置いて、とりあえず試しにそれぞれ導入してみた。そして、なんとなくデザインが好みに近かった『JetTheme』を選ぶことにした。

JetThemeの導入

『JetTheme』以下のGitHubからダウンロードした。2023年4月現在、バージョン2.9。

GitHub：jettheme

「core-main.zip」をダウンロードして展開すると「jettheme-v2.xml」がある。

これをBloggerの管理メニューから「テーマ」を選択し「カスタマイズ」をクリックするとリストが表示される。その中から（事前に「バックアップ」を選んでおくとよい）「元に戻す」→「アップロード」で前述のXMLファイルをアップロードする。

これでJetThemeテンプレートが反映された。

JetThemeのカスタマイズ

先人達の情報を参考にして、カスタマイズを進めていく。

• https://www.plz-reference.com/2022/09/blogger-jettheme.html
• https://www.limosuki.com/2021/11/jettheme-top-customize.html
• https://www.heavy-peat.com/2021/09/add-update-date.html

管理メニューの「レイアウト」から編集できる内容や先人達の情報で事足りた内容は割愛。ちょっと面倒だった部分だけ記載する。

更新日の表示

（参考）https://www.heavy-peat.com/2021/09/add-update-date.html

v2.8.2からv2.9で、投稿日を表示するコードが若干変わっているようだ。

HTMLを調べるとこのような記述がある。

<b:if cond='data:jwidget.allBylineItems.timestamp'>
<small class='me-2'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-clock'/></svg><span class='date-format' expr:data-date='data:post.date.iso8601'><b:eval expr='data:jwidget.allBylineItems.timestamp.label ? data:post.date format data:jwidget.allBylineItems.timestamp.label : data:post.date'/></span></small>
</b:if>

これが投稿日を表示するコードなので、その直後に以下のコードを追記する。

<!-- add -->
<b:if cond='data:post.date != data:post.lastUpdated'>
  <small class='me-2'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-rotate-left'/></svg><b:eval expr='data:post.lastUpdated format &quot;yyyy-MM-dd&quot;'/>
  </small>
</b:if>
<!-- add -->

これで投稿日より後に更新があった場合に限り、更新日が表示されるようになる。

smallタグのclassが「me-2」となっている箇所と「me-3」となっている箇所があるので、適宜追加するタグのclassが一致するように書き換えてから修正すること。

また何か更新があれば適宜更新する。

追記