Spoon & Fork

Bloggerで記事の公開日/最終更新日を表示してみた

Category:

調べものをしているとき、記事が書かれた日付（時期）を気にしていますか。

料理のレシピや掃除のコツなど、古くても変わらず有益な情報もあります。しかし日々新しいモノが登場し、ウェブ上のコンテンツは少しずつその鮮度を失っていきます。

何年も前に公開された記事でも最終更新日が直近の日付なら、公開後も内容を更新してメンテナンスしていることが伝わります。

Bloggerにも記事の最終更新日を表示するタグがあります。良いドキュメントに出会ったので、それを参考にこのブログでも導入してみました。以下簡単にまとめておきます。

（追記: テンプレートのレイアウトバージョンとウィジェットのバージョンを混同していたため、訂正しました。 2018/08/19）

仕様

  • とりあえず表示するだけ
  • Blogウィジェットテンプレートのレイアウトバージョンが3
  • Blogウィジェットのウィジェットバージョンが2
  • JavaScript使わない
  • なんとなくテーマを編集できる方向け

公開日と最終更新日を表示するコード

公開後一度も再編集していない記事は、公開日と更新日が同じ日付になります。比較してどちらも同じ日付だったときは、公開日のみ表示します。


<span>公開日: </span>
<time expr:datetime='data:post.date.iso8601'>
  <b:eval expr='data:post.date format &quot;yyyy-MM-dd&quot;'/>
</time>
<b:if cond='data:post.date != data:post.lastUpdated'>
  <br/>
  <span>最終更新日: </span>
  <time expr:datetime='data:post.lastUpdated.iso8601'>
    <b:eval expr='data:post.lastUpdated format &quot;yyyy-MM-dd&quot;'/>
  </time>
</b:if>

formatの後ろを変更すると、年月日を好きな形で表示できます。たとえばyyyy年M月d日では「2018年6月12日」となります。

そして出力されたソースを確認するとこんな感じになります。日付と時間は一例です。

<span>公開日: </span>
<time datetime='2017-12-14T18:21:00+09:00'>2017-12-14</time>
<br/>
<span>最終更新日: </span>
<time datetime='2018-06-02T00:57:51+09:00'>2018-06-02</time>

テンプレートのLayoutsバージョンについて

バージョン3にする理由

最終更新日を取得する機能を使うにはウィジェットバージョン2が必要になります。ウィジェットバージョン2は、テンプレートのレイアウトバージョンを3を指定しないと動作しません。ContempoやNotableなど新しい公式テンプレートでは、最初からレイアウト3/ウィジェット2に設定されています。

もしレイアウトバージョンが2に設定されているなら、ウィジェットはバージョン1になっているはずです。

Layoutsバージョンの確認方法

Blogger管理画面の「テーマ」->「HTMLの編集」で、ソースコードの大体2行目にある<html>タグを見ます。

<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3'...
このb:layoutsVersionが見当たらない場合、レイアウトバージョンは1または2になっている可能性があります。

Blog Widgetのバージョンについて

なぜv3ウィジェットバージョン2 を指定するのか

バージョン1 と2では更新日を表示する<data:post.lastUpdated/>が使えないからです。

この場合は<data:post.lastUpdatedISO8601/>（これは使える）を元に、JavaScriptでフォーマットを変更します。この記事では扱いません。

もしウィジェットバージョンを変更したらどうなるか

このブログでは自作テーマを使用しています。最近v3の存在を知って、ウィジェットのバージョンを1から3 1から2へ変更したとき、以下2点が動かなくなりました。

  • 記事をリスト表示にしたときのスニペット(data:post.snippet)
  • 記事のラベルリストをループ表示したときの判定(data:label.isLast)

それぞれ表示方法が変更されています。ほかにも修正箇所が出てくる可能性があります。触る前にバックアップをとっておきたいですね。

Widgetのバージョン確認方法

ウィジェットのバージョンはソースコードから確認できます。
Blogger管理画面の「テーマ」->「HTMLの編集」では、こんな感じで書かれていることが多いです。

<b:widget id='Blog1' locked='false' title='ブログの投稿' type='Blog' version='2'>

もしくは、ブログ上でページを右クリック「ページのソースを表示」で、「id=‘Blog1’」をページ内検索すると見つかるかもしれません。

<div class='widget Blog' data-version='2' id='Blog1'>

参考リンク

data:posts[i].lastUpdated [widget Blog] - Blogger Code

Bloggerのドキュメントがとても丁寧にまとめられています。特に、どのバージョンで何が利用できるかすぐ分かる表が便利です。