【Bloggerをカスタマイズ】JetThemeに記事の更新日を表示させる

Bloggerのおすすめテーマ "WindSpot" このブログで使っているテーマ。表示速度◎ Bloggerのテーマで迷っている方にオススメです♪

こんばんは。

Twitterのように気軽に書けるような場所を作るためにBloggerを再開させて、はや2日。

「JetTheme」というブログのテンプレートを使うことに決め、少しずつカスタマイズをしています。

JetThemeで更新日を表示させたい

「「JetTheme」の日付の書式変更と更新日の追加方法 | after work lab」という記事を参考に更新日を表示させてみることにしました。

投稿日と同じでも更新日が表示されてしまう

何がおかしいのか、更新していないページでも更新日が表示されてしまいました😭💦

「Bloggerに更新日を表示する | バグ取りの日々 」を参考にして、分からないながらコードを継ぎ接ぎしてみました。

合っているのかは分からないですが、更新していない記事には更新日が出なくなったのでメモしておきます📝

投稿日と違う時だけ更新日が出るようにする

SVGのアイコンを登録したりするところは「「JetTheme」の日付の書式変更と更新日の追加方法 | after work lab」の記事を参考に、すんなりと出来ました。

変更前のコード

テーマをカスタマイズする前にバックアップを取って、下記のコードを探します。

<div class='me-3'><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></div>

テーマ編集画面で「Ctrl」+「F」を押して、探すことができます

変更後のコード

<div class='me-3'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-clock'/></svg><b:eval expr='data:post.date format &quot;yyyy年M月d日(EEE)&quot;'/>
  <b:if cond='data:post.date.year != data:post.lastUpdated.year or data:post.date.month != data:post.lastUpdated.month or data:post.date.day != data:post.lastUpdated.day'>&amp;nbsp;&amp;nbsp;<svg aria-hidden='true' class='me-0 jt-icon'><use xlink:href='#i-rotate-left'/></svg>
       <b:eval expr='data:post.lastUpdated format &quot;yyyy年M月d日(EEE)&quot;'/></b:if></div>

yyyy年M月d日(EEE)だと2022年3月9日(水)のように表示されます。

やっぱりBloggerが大好きみたい

「ロリポップ」というサーバーのライトプランだと、3年間の契約をしても1万円をきる低価格なので、WordPressを始めました。（3年は契約してませんけど😅）

記録を残すという意味ではWordPressだったらアカウントを消されたりとかないので1番安全な気がしてWordPressにしてみました。

でも、慣れてないから書きにくい😵

カスタマイズもしにくい😞💦

始めてブログに取り組んだBloggerが私には書きやすいみたい。

Bloggerのスマホアプリが使いやすかったら最高なのにな〜。