元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

はてなブログカスタマイズ:更新日の表示

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

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

方針

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

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

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

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

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;
}

CSSは、ご自身のブログに合うように変更してください。

before、after画像

beforeでは、投稿日のみが表示されます。afterでは、投稿日と更新日が表示されます。

参考サイト