B-Teck!

お仕事からゲームまで幅広く

【JavaScript/jQuery】はてなブログで一定期間経過した過去記事に、古い記事であることのメッセージを自動表示するスクリプト

こんなの

f:id:beatdjam:20151118233333p:plain

ソース

<script type="text/javascript">
//更新日時を取得してDateに変換
$('time:not(.updated)').each(function(){
    var updateTime =  $(this).get(0).getAttribute('datetime');
    var date = new Date(updateTime);

    //1年前の日付を設定
    var pastDate = new Date();
    pastDate.setFullYear(pastDate.getFullYear() - 1);

    //一年以上前の記事の場合注意文を設定
    if(pastDate >= date){
        //対象の記事上の要素を取得する
        var updateElem = $(this).parents(".entry").find(".entry-content");
        var notice = '<div class="noticeMessage"><b>この記事は一年以上前に書かれました。情報が古い可能性があります。</b></div>';
        //文言追加
        updateElem.html(notice + updateElem.html());
    }
})
</script>

デザイン

  • 適宜カスタマイズして使うとよろし
.noticeMessage{
    padding: 10px;
    margin-bottom: 10px;
    border-style: double;
    border-width:5px;
    border-color:#333333;
}

使い方と機能

使い方

1.jQueryなので、使えない場合は下記をどこかに追記する

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2.管理画面のデザインから、PCの場合はフッタに、スマホの場合は記事下に追加する
3.CSSをデザインCSSとかHTML書くところに置く

機能

  • PCであれば、記事自体のページと、TOPとかの記事一覧画面で表示される
    ちゃんと一年過ぎた記事だけ出る f:id:beatdjam:20151118233333p:plain f:id:beatdjam:20151118233336p:plain

  • スマホは多分こんな感じ… テストしてた時の画像なので日付は適当 f:id:beatdjam:20151118233529p:plain