つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録~最新投稿にNEW表示

 今回ははてなブログで新しい記事投稿したときに、サイドバーの最新記事で新しい投稿であることを示すNEW!を表示するようにしたので方法を紹介する。

基本的にははてなブログのサイドバーの最新記事にNEWマークを表示 - simadzu’blogに従って設定を行った。

はてなブログのデザイン-カスタマイズ-サイドバーの最新記事の編集をクリックし、"高度なカスタマイズを使う"のチェックボックスをオンにする。次に高度なカスタマイズのテキストボックス内にhtmlコードを以下のように記述する

<a href="{Permalink}">{Title}</a><time datetime={Date}>

つぎにフッタ部にjavascript(jQuery)の以下のコードを記述する。

<script>
document.addEventListener('DOMContentLoaded', function() {
    $('.hatena-module-recent-entries time').each(function() {
        var current = new Date();
        var range_ms = current.getTime() - (2 * 24 * 60 * 60 * 1000); /* 投稿日時が2日以内 */
        var modified = new Date($(this).attr('datetime'));
        var modified_ms = modified.getTime();
        if (range_ms < modified_ms) {
            $(this).after('<span style="font-size: 12px; font-weight: bold; font-style: italic; color:red; margin: 0 1px;">NEW!</span>');
        }
    });
});
</script>

コードの内容としては var range_ms = current.getTime() - (2 * 24 * 60 * 60 * 1000);で現在の時間から2日前の時刻(ms単位の経過時間)の時刻をrange_msに格納する。(2の部分を他の数字に置き換えれば2日前以外に設定できる) また var modified = new Date($(this).attr('datetime'));はてなサイドバーの最新記事:.hatena-module-recent-entries timeが更新されたときのオブジェクトをmodifiedに格納し var modified_ms = modified.getTime();でms単位の時刻(経過時間)を取得する。

 if文内では2日前の時刻と比較して最新記事の更新が新しければ(ms単位の経過時間が大きければ)、<span>要素を追加する。ここでは文字をNEW!として<span>タグ内にスタイルを太字,イタリック,文字色を赤,適度なマージンを設定している。

以上の設定をした結果(デザインのテスト用のはてなブログ)は下のように2日以内に投稿された記事はNEW!と表示されるようになった。

"最新投稿にNEW!を表示"
最新投稿にNEW!を表示

またブログデザインのアップデートとしては、フッタにカテゴリとしてgnuplot, python, SEOを追加、またサイドバーのリンクにはてなHTML構造を追加した。