はてなブログカスタマイズ:更新日の表示 - 元Webデザイナー兼コーダーの備忘録

記事に更新日を表示する方法です。読者の方にいつ更新したのか分かるようにするため、更新日を表示するようにしました。今までは、記事を更新しても分からない状態でした。

参考サイトで紹介しているコードを使わせて頂きました。CSSは当ブログに合うように変更しました。コードと表示のbefore、after画像を掲載します。

方針
JavaScriptの追加
CSSの追加
before、after画像
参考サイト

方針

更新日を表示する記事は沢山あります。jQuery、sitemap.xml、FontAwesomeを使っている記事を見かけます。当ブログでは、外部ファイルを使わずに実現したかったので、参考サイトの方法を取り入れました。

jQueryを使わない
sitemap.xmlを使わない
FontAwesomeを使わない

上記の3つを使わない代わりに、以下で対応します。

JavaScriptで記述
JSON-LD*1の利用

アイコンは必要ないと判断したので、使いません。

JavaScriptの追加

JavaScriptの追加場所は、以下です。

~~管理画面 > デザイン > 工具マーク > ヘッダ~~

管理画面 > デザイン > 工具マーク > 記事

トップページとアバウトページで以下のようなエラーが出ていたので、コードをヘッダから記事に移動しました。

Uncaught TypeError: Cannot read properties of undefined (reading 'innerText')
    at HTMLDocument.<anonymous>

追加したコードは以下です。

<script>
/* 記事ヘッダーの作成日・更新日 */
document.addEventListener('DOMContentLoaded', function () {
  // 各要素を取得
  const jsonld = JSON.parse(document.querySelectorAll('head script[type="application/ld+json"]')[0].innerText); // JSON-LD
  const datePublished = jsonld.datePublished; // 作成日文字列
  const dateModified = jsonld.dateModified; // 更新日文字列
  const entryDate = document.querySelector('header.entry-header .entry-date'); // 日付表示領域

  // 取得できなかったら処理終了
  if (!jsonld) return;
  if (!datePublished) return;
  if (!dateModified) return;
  if (!entryDate) return;

  // 「更新日要素」を作成
  const modifiedElm = document.createElement('span');
  modifiedElm.innerText = dateModified.substr(0, 10);
  modifiedElm.className = 'modified-date';

  // 日付が違った場合は「更新日要素」を追加
  if (datePublished.substr(0, 10) !== dateModified.substr(0, 10)) {
    entryDate.appendChild(modifiedElm);
  }
});
</script>

CSSの追加

CSSの追加場所は、以下です。

管理画面 > デザイン > 工具マーク > {}デザインCSS

ここでは、投稿日と更新日のテキストを追加して、微調整しています。

/* 記事ヘッダーの作成日・更新日 */
.entry-header .entry-date a time {
  font-size: 0; /* スペースもろとも配下の文字を消してしまう */
}
.entry-header .entry-date a time > span {
  font-size: .9rem; /* 表示したいのでサイズを上書き */
}
.entry-header .entry-date a time::before {
  content: "投稿日";
  font-size: .9rem;
  margin-right: 3px;
}
.entry-header .entry-date .modified-date {
  font-size: .9rem;
  margin-left: 16px;
}
.entry-header .entry-date .modified-date::before {
  content: "更新日";
  font-size: .9rem;
  margin-right: 3px;
}
.entry-header .modified-date{
  color: #6f8383;
}