Bloggerに更新日を表示する

更新日がテーマ標準で表示しなかったため、修正した話です。

更新日の表示

更新日

最終的には、上記の表示になりました。（画像作成時からある程度変化しています）

更新日を表示する

<data:post.lastUpdatedISO8601/>タグを使用して、更新日を表示します。ただし、更新日フォーマットがISO8601のため、JavaScriptを使用してフォーマットを変更します。

以下が仕様です。

  • JavaScript無効の場合、更新日を非表示とする
  • 更新していても、日付が同じなら更新日を非表示とする
  • 日付のみを表示する。時間は表示しない
  • 書式は、「yyyy/MM/dd」
HTML<span class='published-info'>投稿日&amp;nbsp;<data:post.date/></span>
<span class='updated-info' style='display:none;'>&amp;nbsp;&amp;nbsp;更新日&amp;nbsp;<span class='date' expr:data-publishd='data:post.timestampISO8601' expr:data-updated='data:post.lastUpdatedISO8601'/></span>

※追加場所は、<b:includable id='post' var='post'>の直後辺りです

SCRIPT<script>
//<![CDATA[
(function() {
  // 更新日を表示する
  let updates = document.querySelectorAll('.updated-info .date');
  for (let i=0; i<updates.length; i++) {
    let u = updates[i];
    let tp = new Date(u.dataset.publishd);
    let tu = new Date(u.dataset.updated);
    if (Math.floor(tp.getTime()/86400000) != Math.floor(tu.getTime()/86400000)) {
      u.textContent = tu.getFullYear()+'/'+('0'+(tu.getMonth()+1)).slice(-2)+'/'+('0'+tu.getDate()).slice(-2);
      u.parentElement.style.display = 'inline';
    }
  }
})();
//]]>
</script>

※追加場所は、</body>の直前辺りです

補足

投稿とページ

Bloggerは、投稿とページがあります。投稿とページで投稿日と更新日の仕様が異なります。

種別投稿日更新日備考
投稿投稿した日最終更新日
ページ最終更新日（エディタ）最終更新日（API）2020年以前
ページ投稿した日 or 変更前の最終更新日最終更新日2020年以降

※2020年の仕様変更でページの更新日の仕様が変更されています

新テーマ

新テーマ（Contempo、Soho、Emporio、Notable）であれば、下記のテンプレートタグを使用することでJavaScript不要で実現できます。

<data:post.lastUpdated/>
<data:post.lastUpdated.year/>
<data:post.lastUpdated.month/>
<data:post.lastUpdated.day/>
<span>投稿日&amp;nbsp;</span><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'>
  &amp;nbsp;&amp;nbsp;
  <span>更新日&amp;nbsp;</span><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:eval expr='format (data:post.lastUpdated, "yyyy/MM/dd")'>では、タイムゾーンなしになるため、個別の要素にアクセスしつつ、ゼロパディングしています。

※ウィジェットバージョン変更方法は次の記事を参考にしてください
　BloggerのBlogウィジェットをバージョン2にする

参考