mizusame

【Blogger】投稿に最終更新日を表示させる（ウィジェットバージョン1用）

バージョン1のブログの投稿ウィジェットにおいて、投稿ページに最終更新日を表示させるカスタマイズを行いました。

すでに同じテーマで多くの記事が書かれていますが、筆者のカスタマイズの場合それらとは方法が若干異なるため、備忘録として記しておきます。

アイキャッチ

更新日表示スクリプトの設置

まず、更新日表示スクリプトの設置を行います。

Blogger のテーマ編集画面に飛び、data:post.dateHeader もしくは data:post.date でテーマ編集内を検索して公開日表示に関するコードを探してください。例えば QooQ なら以下が該当します。

<p id='single-header-date'><data:post.dateHeader/></p>

該当するコードが見つかったら、その部分を以下のコードに差し替え、テーマを保存します。

<span class='post-date'>
  <time class='post-published' expr:aria-label='&quot;投稿日：&quot; + data:post.date' expr:datetime='data:post.timestampISO8601' itemprop='datePublished'><data:post.date/></time>
</span>

<b:if cond='data:view.isPost'>
<script>
const published = '<data:post.timestampISO8601/>';
const updated = '<data:post.lastUpdatedISO8601/>';
//<![CDATA[
const options = {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
};
const p_pub = new Date(published).toLocaleDateString('ja-JP', options);
const p_upd = new Date(updated).toLocaleDateString('ja-JP', options);
if(p_pub != p_upd){
  document.querySelector('.post-date').insertAdjacentHTML('afterbegin', `<time class='post-updated' aria-label='更新日：${p_upd}' datetime='${updated}' itemprop='dateModified'>${p_upd}</time>`);
}
//]]></script>
</b:if>

上記のコードでは、投稿日と更新日が違う場合のみ yyyy/MM/dd 形式で更新日が表示されます。他の形式で更新日を表示させたい場合は、以下のページを参考に options の内容を適宜変更してください。

また、このコードでは、更新日が投稿日の前に表示されます。更新日を投稿日の後ろに表示させたい場合は、以下の行の afterbegin を beforeend に変更します。

document.querySelector('.post-date').insertAdjacentHTML('afterbegin', `<time class='post-updated' aria-label='更新日：${p_upd}' datetime='${updated}' itemprop='dateModified'>${p_upd}</time>`);

日付の前に文字や SVG アイコンを表示させたいときは、この記事で最初に紹介したコードの HTML 内（投稿日）と JavaScript 内（更新日）の time 要素の直前にそれぞれコードを追加してください。次項で CSS でアイコンを追加する方法について書いているので、そちらも参考にしていただけたら幸いです。

以下、コードの簡単な解説です。

Blogger には、それぞれ投稿日と更新日に対して以下のような ISO 8601 形式の独自タグが存在します。

  • 投稿日：data:post.timestampISO8601（例：2024-01-01T00:00:00+09:00）
  • 更新日：data:post.lastUpdatedISO8601（例：2024-01-11T00:00:00Z）

投稿日が日本標準時（JST）、更新日が協定世界時（UTC）で表されているため、これらのタグをそのまま比較はできません。

そこで toLocaleDateString() を用いて形式や時刻を日本仕様に揃えることにより、2つの日付の比較をしやすくしています。

他の Bloggerユーザー さんの更新日表示の記事では、例えば以下の記事のように、投稿日と更新日それぞれにおいて getFullYear()、getMonth()、getDate() で年月日を求める方法が紹介されていることが多いと思います。

もちろんこれはこれですごく理にかなっていますし、更新日の表示形式で言えば筆者が書いた方法よりもこちらのほうが断然自由度が高いです。

ただ、いかんせん比較のために年月日を投稿日と更新日で別々に求めなければいけないぶん行数が多くなる。なるべくコードを簡潔にしたい自分にはそこがどうしても見過ごせず、toLocaleDateString() を用いる方法に至ったわけです。

CSS でアイコン付与、スタイルの調整

前項で紹介したコードをそのまま用いると、更新日と投稿日の日付だけが並んで表示されるので、ぱっと見どっちがどっちの日付なのかわかりませんよね？　ちゃんと2つの区別がつくように、CSS で日付の前にアイコンを付けていきます。

アイコンフォントサービスの Font Awesome や Material Symbols を利用するのもありですが、今回は正真正銘 CSS のみでアイコンを作ってみました。アイコンに加え、各日付のスタイル調整も行ったのが以下の CSS です。

/* 投稿日,更新日 */
.post-date{
  display: flex;
  margin-right: .25em;
}
.post-date time{
  position: relative;
  margin-right: .75em;
  padding-left: 1.25em;
}
.post-date time::before, .post-date time::after{
  content: '';
  position: absolute;
  line-height: 1;
  box-sizing: border-box;
}
/* 投稿日アイコン */
.post-published::before{
  top: .05em;
  left: 0;
  width: 1em;
  height: 1em;
  border: .1em solid currentColor;
  border-radius: 50%;
}
.post-published::after{
  top: .25em;
  left: .45em;
  width: .3em;
  height: .35em;
  border: .1em solid currentColor;
  border-right: none;
  border-top: none;
}
/* 更新日アイコン */
.post-updated::before{
  top: .15em;
  left: 0;
  width: .9em;
  height: .9em;
  border: .1em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}
.post-updated::after{
  top: .225em;
  left: .6em;
  width: 0;
  height: 0;
  border: .35em solid transparent;
  border-left-color: currentColor;
  transform: rotate(45deg);
}

CSS の追加後このように表示されたら大成功です。

CSS追加後の更新日・投稿日表示。更新日には円矢印、投稿日には時計のマークが付与されている

ただ、十中八九初手でこんなにうまくはいきません。おそらく、擬似要素の ::before と ::after のみを使ってアイコンを作成している関係上、アイコンが日付に対して上下どちらかにずれていることと思います。場合によっては左右にずれることもあるかもしれません。

ずれてしまった場合、各アイコンの ::before と ::after の top（左右がずれている場合は left）の数値を増減させて位置を調節してください。単位は em のまま変えないでください。調節が面倒な方は SVG やアイコンフォントを使うのも手です（元も子もない）。

あとがき

Blogger ブログの投稿ページに更新日を表示させる方法について書きました。toLocaleDateString() 使ったり CSS でアイコン作ったり、他の方の記事と差別化を図れたんじゃないかと自分から言っておきます。

CSS でのアイコン作成、過去に何回かしたことあるんですが、とにかく他の箇所で設定したプロパティの影響をもろに受けて位置ずれしまくるため、いい感じにするのにかなり苦労します。あと、ブラウザによっては非対応のプロパティを使ってて、そもそも表示されないなんてことも。

そのぶん自分が思い描いていたアイコンが形にできるとめちゃくちゃ達成感があるので、この記事の CSS を参考にオリジナルのアイコンを作るのもおすすめです。

更新日を表示させたいとお考えのどなたかにこの記事がお役に立てたら幸いです。

    編集
    新しい投稿 前の投稿
    ホーム