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

hatenaロゴ

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

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

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

recent-new

最新記事の各リンクの投稿日時を設定します(投稿日時はページに表示されません)。
なお、<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() - (7 * 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マークを表示のコードをそっくりそのまま使わせてもらいます。
投稿日時が今日から7日以内の記事のリンクに、NEWマークが表示されます。
NEWマークの見た目は、CSSの<span style="~">NEW</span>で調整します。

- 追記 -
つれづれなる備忘録さんに言及してもらいました(説明が簡潔でわかりやすいです)。

ブログデザイン備忘録~最新投稿にNEW表示
今回ははてなブログで新しい記事投稿したときに、サイドバーの最新記事で新しい投稿であることを示すNEW!を表示するようにしたので方法を紹介する。 基本的にははてなブログのサイドバーの最新記事にNEWマークを表示 - simadzu’blogに従って設定を行った。