今回ははてなブログで新しい記事投稿したときに、サイドバーの最新記事で新しい投稿であることを示す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!と表示されるようになった。
またブログデザインのアップデートとしては、フッタにカテゴリとしてgnuplot, python, SEOを追加、またサイドバーのリンクにはてなHTML構造を追加した。