はてなブログで最終更新からn日経過した記事で警告を出してみる

このブログも最終更新から日数が経過して古い情報があると時々感じます。 ということで、はてなブログで最終更新からn日経過した記事で警告を出すようにしたメモです。

見た目

次のような表示になります。私は3年=1095日を基準にしています。

事前作業

1つだけ事前作業が必要です。これができない場合は、他記事のようにサイトマップあたりからとってくるといいでしょう。

はてなブログは標準機能で記事の最終更新日を表示できます。デフォルトは無効なので早速表示しておきましょう。今回の処理はこの最終更新日を使います。

管理画面 > デザイン > カスタマイズ > 記事 > 最後に更新した日付も表示する

警告を出す処理

記事の最終更新日からn日経過している場合に警告を出すようにします。 設定は、先のデザイン > カスタマイズからフッターとCSSに行います。

CSS

デザインCSSに以下のスタイルを追加します。update-noticeは警告を出すためのスタイルです。

/* ---- Update notice ---- */
.update-notice {
  background-color: #fffbe6;
  /* 柔らかいイエロー */
  color: #333;
  padding: 15px 20px;
  border-left: 5px solid #ffcc00;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin: 20px 0;
}

フッター

フッターには以下のスクリプトを追加します。コンテンツが読み込まれたタイミングで最終更新日を取得し、n日経過している場合に警告を出します。 スタイルはCSSで用意したupdate-noticeを利用し、また本文と同じフォントを使うようにentry-contentクラスを指定しています。

デバッグ用に30日で設定している例です。const n = 30;の部分を変更することで経過日数を変更できます。

<!-- Update notice -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const n = 30; // 経過日数のしきい値（例: 30日）

    // 最終更新日を示す要素 (.date-last-updated 内の time 要素) を取得
    const updateElem = document.querySelector('.date-last-updated time');
    if (updateElem) {
      // datetime属性からISO形式の日付を取得
      const dateStr = updateElem.getAttribute('datetime');
      const lastUpdated = new Date(dateStr);
      const today = new Date();

      // 日数差の計算
      const diffTime = today - lastUpdated;
      const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));

      // 経過日数がn日以上の場合に注意メッセージを作成
      if (diffDays >= n) {
        const notice = document.createElement('div');
        notice.classList.add('update-notice');
        notice.innerHTML = `この記事は${diffDays}日更新されていません。内容が最新でない可能性があります。`;

        // div.entry-content の先頭に挿入
        const targetElem = document.querySelector('div.entry-content');
        if (targetElem) {
          targetElem.insertBefore(notice, targetElem.firstChild);
        } else {
          document.body.insertBefore(notice, document.body.firstChild);
        }
      }
    }
  });
</script>

保存

デザインCSSとフッターを設定後、保存して反映させます。 あとは指定日数より最終更新が古い記事だと警告表示されます。

まとめ

定番のやり方がないか記事をいくつかみたのですが、はてなブログが最終更新日を標準提供するようになってからの方法は見当たらなかったので適当にChatGPTと作りました。o3-mini手早くてさすが。 プロンプト駆動は割と原始的なやり方感もありますが、この程度なら十分便利ですね。やってることはシンプルかつ汎用的なので、はてなブログでも、そうでなくても、適当な生成AIに食わせるとさくっと調整できますね。

今年に入ってタグ整理とか誤字やtextlint適用を過去記事にも行っているために、最終更新日がやたらと新しくなってしまっています。 もしかして最終更新日より公開日の方がいいとかデバッグしててよぎりましたが、いったんこれで。

参考

• 記事に最終更新日を表示する - はてなブログ ヘルプ
• はてなブログの記事に更新日付を表示＆古い記事に警告を出す試み - 風柳メモ