はてなで「この記事は一年以上前の記事です」をつける方法

この記事は最終更新日から一年以上が経過しています

Qiitaなんかでよくありますよね。「この記事は最終更新日から1年以上が経過しています。」とかそういうの。こういうやつです。これあるとめちゃめちゃ便利だと思うので、ぼくも作ってみることにしました。これめちゃめちゃ便利なんですよね。特に技術系の記事だと情報が古かったりもっと新しいやり方が主流になってたりするので、新しいかどうかって結構重要だったりします。

f:id:wen000:20170301230422p:plain

こんな感じになります。

やり方は、管理画面からデザイン→カスタマイズ→記事を選んで、「記事上」のところに下記を入れます。

<div id="timeAlert">この記事は最終更新日から一年以上が経過しています</div>

その後、「記事下」のところに下記を追加。

<script type="text/javascript">
    var t = document.getElementsByClassName("updated");
    var time = t[0].getAttribute("title");

    var nowDate = new Date();

    var pubDate = new Date(time.slice(0, 4), time.slice(5, 7), time.slice(8, 10));
    var nowDate = new Date(nowDate.getFullYear(), nowDate.getMonth()+1,
    nowDate.getDate());

    var diff = (nowDate - pubDate) / 86400000;

    if (diff > 365) {
        document.getElementById("timeAlert").style.display = "block";
    }
</script>

最後に、「デザインCSS」のところに下記を追加します。

#timeAlert {
    display: none;
    padding: 10px;
    margin: 10px 0 0 0;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background: #eeeeee;
}

これで冒頭のように表示されます。残念ながらこのブログでは一年以上前の記事がないので実際に見てもらうことはできないのですが…。また、ぼくはReportっていうテンプレートを使ってるので、他のテンプレートだとうまく表示されないかもしれません。HTML分かる方ならすぐ修正できるかと思いますが、だめだったらコメント頂ければこちらでも見てみます。