はてなブログの個別記事の投稿日をカレンダーにわかりやすく表示

hatenaロゴ

はてなブログの月別アーカイブをリストからカレンダーに変更してからしばらく経ちますが、よくよくカレンダーを見てみると、個別記事の投稿月がカレンダーに反映されている(例えば、個別記事を2019年4月に投稿していたら、カレンダーの表示も2019年4月と表示される)のがわかるかと思います。

ただ、個別記事の投稿月に連動してカレンダーの表示が変わるものの、個別記事の投稿日は、カレンダー上で特に表示が変わるわけでもなく、カレンダーだけ見ると、いつ投稿された記事なのかわかりません。

そこで、JavaScript(jQuery) で、個別記事の投稿日をカレンダー上で目立たせてわかりやすく表示するようにしました。

(デザイン→カスタマイズ→記事→記事上下のカスタマイズの記事下にコードを入力)

JavaScript
<script>
window.addEventListener('load', function() {
    var day = $('.calendar-day a[href="'+location.href+'"]');
    day.css('color','#fff');
    day.css('border-color','#000');
    day.css('background','#000');
});
</script>

動作的には、個別記事ページのURLと同じカレンダーの投稿日を色を変えて目立たせるようにしました(この記事の投稿日の4月14日がカレンダー上で黒背景になっているはず)。

ポイントは、カレンダーの表示が遅いので「window.addEventListener('load' ~」でスクリプトを実行させたこと。要は「window.onload」で実行を遅らせたということです。

参考になるブログ・Webサイト
By U Zensen. - JavaScriptでwindow.onloadの色々な書き方!!

言われなければわからない本当に些細なことですが、こういう小さい工夫が好きです。