はてなブログで1年以上前の記事にアラートを出す方法

ども、@kimihom です。

某企業の技術ブログをリスペクトし、記事が1年以上前のものは この記事は公開から1年以上経過しているため、情報が古い可能性があります。 と表示するようにしたので、実装メモ。

例えばこんな感じになる。１年以上前の適当な記事を貼っておく。

記事の上下のカスタマイズ

まずは HTML と JavaScript を書いていこう。デザイン設定の記事 -> 記事上or下のエリアに以下のコードを書こう。

<script>

var timer = setInterval(function() {
    if (typeof jQuery != 'undefined') {

//////////////
// check if the article is old or not
var currentTime = (new Date).getTime();
var articleTime = Date.parse($(".entry-date time").attr("datetime"));
var day365 = 1000 * 60 * 60 * 24 * 365;
if (currentTime - articleTime > day365) {
    $( "<div/>", {
      "class": "old-article",
      "text": "この記事は公開から1年以上経過しているため、情報が古い可能性があります。"
    }).appendTo( ".entry-header" );
}
//////////////

        clearInterval(timer);
    }
}, 1000);

これだけ。今回は jQuery の書き方講座じゃないので詳しい解説はしない。適宜コードを入れ替えて条件を2年以上前にするとか、文言を変えたりだとか、挿入場所を変えたりとかしていただきたい。

CSS の設定

ここら辺はもう書くまでもないかもしれないが、一応自分のブログの CSS を貼っておく。自由にコピペしてもらえれば。

.old-article {
    border: 1px solid grey;
    padding: 8px 12px;
    margin-bottom: 24px;
    border: 2px solid #ecd218;
    color: #533900;
    background-color: #ffffe4;
}