はてブロの記事が投稿から1年以上経過している場合にアラートを表示する

経緯

ありがたいことに投稿日から数年経過しても、検索からアクセスされてる記事がいくつかあるんだけど、情報が古いから○iitaみたいに この記事は公開日からn年以上が経過しています。情報が古い可能性がありますので十分ご注意ください。 っていう注意書きを画面上に表示させたかった

注意

ブログデザインのテーマははてブロ公式のEpicを使用しています。本記事で紹介するコードはあくまで左記テーマに限ったものになります。
カスタマイズで編集するCSSやJSのコードについては利用上の注意をご確認の上、編集ください。詳しくはヘルプをご確認ください。

カスタマイズ

1. CSSを追加

管理画面からデザイン＞カスタマイズ画面を開く
はてブロ管理画面デザインCSS

デザインCSSにalert用のスタイルを追加（Bootstrapのwarning alertと同じ）

.warning-alert {
    font-size: 12px;
    background-color: #ebd1b6;
    padding: 0.75rem 1.25rem;
    color: #856404;
    background-color: #fff3cd;
    border: 1px solid #fae39f;
    border-radius: 0.25rem;
}

2. JavaScriptの追加

設定＞詳細設定画面を開く

設定＞詳細設定＞<head>要素にメタデータを追加w:100

<head>要素にメタデータを追加に以下のJSを追加する

document.addEventListener("DOMContentLoaded", function () {
  const dtElements = document.querySelectorAll(".date.entry-date.first time");
  if (dtElements.length === 0) {
    return;
  }
  const nowTs = new Date().getTime();
  dtElements.forEach((element) => {
    if (!element) {
      return;
    }
    const dt = element.getAttribute("datetime");
    const postedTs = new Date(dt).getTime();
    const diffYears = ((nowTs - postedTs) / (1000 * 60 * 60 * 24) / 365).toFixed();

    // 記事公開日から1年以上経過している場合にalertを表示する
    if (diffYears >= 1) {
      const div = document.createElement("div");
      div.innerText = `この記事は公開日から${diffYears}年以上が経過しています。情報が古い可能性がありますので十分ご注意ください。`;
      div.classList.add("warning-alert");
      element.closest(".entry-header").prepend(div);
    }
  });
});

上記の設定が完了後に記事一覧・詳細画面で以下のように表示されます:)

記事に表示されるalert