Bloggerの公開日と最終更新日を載せる方法〈海外テンプレート編〉

byNatchan - 2024/03/19

0

Bloggerの公開日と最終更新日をアイコン付きで載せる方法を説明します。海外テンプレートを利用している人向けの内容です。テーマを直接いじることになるので難易度はちょっと高めです。

{tocify} $title={Table of Contents}

当サイトの運営者Natchanが制作したフリー素材を『イラストAC』にて無料配布中！( ^o^)⊃―☆{codeBox}

Bloggerの日付システム

Bloggerの日付システムは複雑です。

そもそも記事内の日付を西暦・月・日の順に表示させられないし、デフォルトでは最終更新日が表示されません。

SEOの観点から「日付に矛盾があってはならない」とグーグル公式がツイートしているのを発見したので、公開日と最終更新日を日本人向けの日付形式で載せることにしました。

今回教えるやり方は、あくまで海外テンプレート向けです。日本語テンプレートを使っている場合は多分適用できないので注意。

私のテンプレートはStoryifyです ※2024年3月時点{alertInfo}

以前、私のテンプレートについてコメントもらったんですけど、私が使っているものは2021年に公開されたテンプレートなのでだいぶ古いです。

実際、現在のUIになるまでカスタマイズにとても時間がかかったので正直おすすめできません。以下の記事で比較的新しいテンプレートを紹介しています↓

Bloggerのおしゃれな有料テンプレートのおすすめを紹介

Bloggerで使えるおしゃれな有料テンプレートのおすすめを、海外デザインストアのEnvato Marketから選びました。Googleの無料ブログサービスであるBloggerでブログ運営を始めたい人、他サイトとかぶらないデザインのブログにしたい人におすすめの内容です。

www.live-to-design.com

公開日と最終更新日を載せる方法

それでは、手順を説明します。バックアップを取ってから始めてください。

STEP1：編集画面に入る

ダッシュボード→テーマ→カスタマイズ→Htmlを編集

STEP2：コードを検索

Ctrl＋Fキーで出現した入力欄に以下のコードをコピペして検索します。

{codeBox}

STEP3：2つ目のコードへ移動

STEP2のコードを検索すると、2か所該当する部分があると思います。2つ目の方に移動してください。

STEP4：コードを差し替える

以下のようなコードが見当たると思います。

<b:if cond='data:view.isMultipleItems'><b:if cond='data:post.labels and data:allBylineItems.labels'>-</b:if><b:else/><b:if cond='data:allBylineItems.author and data:allBylineItems.timestamp.label'><data:allBylineItems.timestamp.label/></b:if></b:if><time class='published' expr:datetime='data:post.date.iso8601'><data:post.date/></time>{codeBox}

上記のコードを消して、以下のコードに差し替えてください。

-&nbsp;<time expr:datetime='data:post.date.iso8601'><b:eval expr='data:post.date.year + (10 > data:post.date.month ? "/0" : "/") + data:post.date.month + (10 > data:post.date.day ? "/0" : "/") + data:post.date.day'/></time>
<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'>
&nbsp;&nbsp;
&nbsp;<time expr:datetime='data:post.lastUpdated.iso8601'><b:eval expr='data:post.lastUpdated.year + (10 > data:post.lastUpdated.month ? "/0" : "/") + data:post.lastUpdated.month + (10 > data:post.lastUpdated.day ? "/0" : "/") + data:post.lastUpdated.day'/></time>
</b:if>{codeBox}

もしも近くに以下のコードがある場合は、それは消さずに残してください。アイコンはFontAwesomeにしています。

</b:includable><b:includable id='postTitle' var='post'>{codeBox}

STEP5：最終的なコード

最終的に以下のような形になっていればOK。保存ボタンと言うかアイコンを押して完了です。

-&nbsp;<time expr:datetime='data:post.date.iso8601'><b:eval expr='data:post.date.year + (10 > data:post.date.month ? "/0" : "/") + data:post.date.month + (10 > data:post.date.day ? "/0" : "/") + data:post.date.day'/></time>
<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'>
&nbsp;&nbsp;
&nbsp;<time expr:datetime='data:post.lastUpdated.iso8601'><b:eval expr='data:post.lastUpdated.year + (10 > data:post.lastUpdated.month ? "/0" : "/") + data:post.lastUpdated.month + (10 > data:post.lastUpdated.day ? "/0" : "/") + data:post.lastUpdated.day'/></time>
</b:if>
</b:includable>
<b:includable id='postTitle' var='post'>{codeBox}

参考記事：
Bloggerに更新日を表示する｜バグ取りの日々

最後に

以上、Bloggerの公開日と最終更新日を載せる方法を説明しました。

色んな方の記事を読んだけど、私のテンプレートには全然適用されなくてちょっと大変でした。このやり方を検証するまでに夜通しで作業する羽目に。

これ以上カスタマイズに時間かけたくないから、思い切ってFC2ブログへ引っ越そうかと思ったけど、そっちも最終更新日はデフォルトで表示されないみたい。

結局、どのプラットフォームでもカスタマイズは大変なんです。

最後までお読みいただきありがとうございました。