投稿日・更新日で古い記事だと強調表示するカスタマイズ

概要

はてなブログの記事毎のページで更新日を表示しつつ、投稿日 or 更新日から1年以上経過していたら
「この記事は投稿・更新されてから一年以上経過しています」と表示します。
更新日ははてなブログ上では表示されないので、自分で書く必要があります。
どこでもいいのですが記事の先頭とかに次のようなHTMLを記述します

<time class="entry-updated updated">2015-01-24</time>

表示例PC1

投稿日の右側に更新日がアイコン付きで表示され、さらに見出し下部に、 「この記事は投稿・更新されてから一年以上経過しています」と表示されています。

表示例PC2

同様です。こちらの例はここに示した方法とは別にCSSで別途調整したほうが良いかもしれません。
スマホの表示例は割愛します。

設定方法

JavaScriptとCSSを各箇所に追加します。

headに要素を追加

設定 > 詳細設定 > headに要素を追加

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script>
(function(){
  document.addEventListener('DOMContentLoaded', function() {
    var dstr_updated = insertUpdatedDate();
    if (dstr_updated !== '') {
      displayRecentlyNotUpdated(dstr_updated);
    }
  }, false);
  
  function insertUpdatedDate() {
    var entry = document.getElementsByClassName("page-entry");
    if (entry.length >= 1) {  // 記事のみのページで有効
      var entry_date_wrapper = entry[0].getElementsByClassName("date first");
      var dstr_updated = entry[0].getElementsByClassName("entry-updated updated");
      if (entry_date_wrapper.length >= 1 && dstr_updated.length >= 1) {
        entry_date_wrapper[0].appendChild(dstr_updated[0]);
        return dstr_updated[0].innerText;
      }
    }
  }
   
  function displayRecentlyNotUpdated(dstr_updated) {
    var today = new Date();
    // 記事の投稿日時
    var entry_created = document.getElementsByClassName("updated");   // .entry-footer-time > .updated
    var dst_created = entry_created.item(0).getAttribute("datetime");
    var entry_date = new Date(dst_created);
    // 記事の投稿日時に一年を加算する
    entry_date.setFullYear(entry_date.getFullYear() + 1);
    var entry_updated_date = undefined;
    if (dstr_updated != null) {
      entry_updated_date = new Date(dstr_updated);
      // 記事の更新日時に一年を加算する
      entry_updated_date.setFullYear(entry_updated_date.getFullYear() + 1);
    }
    // 記事の投稿日時が記事を開いた日時よりも過去ならメッセージを追加
    if (entry_date <= today) {
      if (entry_updated_date === undefined || entry_updated_date <= today) {
        var doc = document.getElementsByClassName("entry-content").item(0);
        var entry_notice = "<div class=\"entry-notice\">この記事は投稿・更新されてから一年以上経過しています</div>";
        doc.innerHTML =  entry_notice + doc.innerHTML;
      }
    }
  }
})();
</script>

PC

デザイン > カスタマイズ > デザインCSSに下記コードを入れてください。

.entry-content .updated {
    display:none;
}
.page-entry .entry-header .updated {
    display:inline-block;
    font-size: 15px; /* PCのみ */
}
.page-entry .entry-header .updated:before {
    font-family: FontAwesome;
    content: "\f021";
    left: 0;
    top: 0;
    color: #454545;
    padding-left: 20px;
    padding-right: 8px;
}
.entry-notice {
    text-align: right;
    font-size: 80%;
    color: #999;
    background-color: #F0F0FA;
    margin-bottom: 20px;
}

スマホ

レスポンシブ設定の場合は、特に何もしなくて大丈夫です。
レスポンシブ設定でない場合は、デザイン > スマートフォンの記事上に下記コードを入れてください。

<style>
.entry-content .updated {
    display:none;
}
.page-entry .entry-header .updated {
    display:inline-block;
}
.page-entry .entry-header .updated:before {
    font-family: FontAwesome;
    content: "\f021";
    left: 0;
    top: 0;
    color: #454545;
    padding-left: 20px;
    padding-right: 8px;
}
.entry-notice {
    text-align: right;
    font-size: 80%;
    color: #999;
    background-color: #F0F0FA;
    margin-bottom: 20px;
}
</style>

PCとほぼ同じ内容でコピペなのがイケてないですが、無理に共通化するよりましだと思いました。
生成されるHTMLに付与されるクラスが微妙に違ったりするので…。
なお、微妙にスタイルを変えたい場合は適宜CSSを調整してください。

参考

記事の更新日を手動で表示させる：はてなブログ

はてなブログで古い記事にメッセージを表示するスクリプト

CSSとJSがだんだん肥大化してきてえらいこっちゃになってますが、WordPressをメンテするよりましかなとおもいながらメンテしています。
整理も兼ねてこの記事を書きました。