【はてなブログ】記事ページの最終更新日を調整

数日前から適用しているのですが、記事ページの最終更新日を調整しました。

元々、JavaScriptとCSSを追加適用して表示させていました。

ブログカスタマイズ

【はてなブログ-カスタマイズ】更新日を追加表示する

ですが最近、はてなブログが「最終更新日の表示」に対応したみたいです。

はてなブログ開発ブログ

記事ページに最終更新日が表示されるようになりました

せっかくなので、はてなブログが対応した方に乗り換えることにしました。
ですが簡単にはいかず、自分のブログカスタマイズと干渉してデザインが崩れてしまいました。

今回の記事では、どんなデザイン調整をしたのか書いていこうと思います。

変更内容（画像）
参考サイト
コード
- 削除したコード
- 修正したコード
  - 修正前
  - 修正後
デザインの適用手順
注意事項
おわりに
関連記事

変更内容（画像）

まずは変更前後の画像を貼ります。

変更前

変更前はこんな感じです。

左に作成日、右に更新日が表示されています。
右の更新日は自分のブログカスタマイズによって追加表示しています。

変更後（設定変更）

とりあえず、はてなブログが対応した「最後に更新した日付も表示する」機能を有効にしてみました。

有効にした直後はこんな感じです。

作成日と更新日の間に、もう1つ更新日が表示されました。

今回の記事では、

はてなブログが対応した更新日にデザインを適用
自分のブログカスタマイズで対応した更新日を削除

の2つを対応します。

変更後（JS削除、CSS修正）

変更後（最終版）はこんな感じです。

先ほど書いた通り、

はてなブログが対応した更新日にデザインを適用
自分のブログカスタマイズで対応した更新日を削除

しました。

参考サイト

以下のサイトを参考にしました。
※といっても、はてなブログ公式と自分の記事です。
※記事の冒頭のリンクと同様です。
miya-moto-memo.hatenablog.com
staff.hatenablog.com

コード

削除したコード

以前のブログカスタマイズで適用したJavaScriptを削除しました。

<!-- 記事ヘッダーの作成日・更新日 -->
<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を修正しました。
「修正前」から「修正後」のコードに差し替えました。

修正前

/***記事ヘッダーの作成日・更新日***/
/*作成日のデザイン調整*/
.entry-header .date a {
    transform: none;
}
.entry-header .date a:before {
    vertical-align: middle;
}
/*更新日のデザイン*/
.entry-header .date span.modified-date {
    display: inline-block;
    background-color: #111;
    padding: 0 6px 1px;
    margin-left: 10px;
    color: #fff;
}
.entry-header .date span.modified-date:before {
    font-family: "blogicon";
    content: "\f02b  ";
    vertical-align: middle;
}
/***記事ヘッダーの作成日・更新日ここまで***/

修正後

/***記事ヘッダーの作成日・更新日***/
/*作成日のデザイン調整*/
.entry-header .date a {
    transform: none;
}
.entry-header .date a:before {
    vertical-align: middle;
}
/*更新日のデザイン*/
.entry-header .date span.date-last-updated {
    display: inline-block;
    background-color: #111;
    padding: 1px 6px;
    margin-left: 10px;
    color: #fff;
}
.entry-header .date span.date-last-updated .blogicon {
    margin-bottom: 3px;
}
/***記事ヘッダーの作成日・更新日ここまで***/