はてなブログのサイドバーの最新記事にNEWマークを表示

hatenaロゴ

このブログでは、サイドバーの最新記事のリンクに、はてな純正アイコンを表示させているのですが(はてなブログのサイドバーの最新記事にアイコンを表示)、それでもまださびしい感じがするので、新着記事にNEWマークを表示させてみることにしました。

まず、サイドバーの最新記事モジュールの高度なカスタマイズにコードを入力します。

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

最新記事の各リンクの投稿日時を設定します(投稿日時はページに表示されません)。
なお、<time datetime={Date}>は、<a>タグの前でも後ろでもどちらでもいいです。
(または、高度なカスタマイズは使わずに「投稿日時を表示する」をチェックします)

次に、フッタにNEWマークを表示するJavaScript(jQuery)を設置します。

(デザイン→カスタマイズ→フッタにコードを入力)

JavaScript
<script>
document.addEventListener('DOMContentLoaded', function() {
    $('.hatena-module-recent-entries time').each(function() {
        var current = new Date();
        var range_ms = current.getTime() - (4 * 24 * 60 * 60 * 1000); /* 投稿日時が4日以内 */
        var modified = new Date($(this).attr('datetime'));
        var modified_ms = modified.getTime();
        if (range_ms < modified_ms) {
            $(this).after('<span style="font-size: 9px; font-weight: bold; font-style: italic; color: #fff; margin: 0 2px; padding: 0 6px; vertical-align: 2px; border-radius: 4px; background: #000;">NEW</span>');
        }
    });
});
</script>

私的雑録 - 自動でNEWマークを表示のコードをそっくりそのまま使わせてもらいます。
投稿日時が今日から4日以内の記事のリンクに、NEWマークが表示されます。
NEWマークの見た目は、CSSの<span style="~">NEW</span>で調整します。

ちなみに、JavaScriptの.hatena-module-recent-entriesを削除して'time'だけにすると、個別記事のタイトルの日時にNEWマークが表示されます。
最新記事などに投稿日時を表示すると、その後ろにもNEWマークが表示される
※ 'time'だけにした場合、ページ全体の<time>タグ(投稿日時が設定されている箇所全部)を確認して処理することになるので、ブログが重たくなってしまいます...。