このブログでは、サイドバーの最新記事のリンクに、はてなのアイコンフォントを表示させているのですが(はてなブログのサイドバーの最新記事にアイコンを表示)、それでもまださびしい感じがするので、新着記事に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() - (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>で調整します。
- 追記 -
つれづれなる備忘録さんに言及してもらいました(説明が簡潔でわかりやすいです)。