はてなブログの月別アーカイブをリストからカレンダーに変更

hatenaロゴ

このブログでは、月別アーカイブの表示形式をずっとリストにしていましたが、カレンダーに変更しました。ブログを書いていない(さぼった)日をわかりやすくするためです。

ただ、カレンダーの見た目がいまひとつだったので、CSSでカスタマイズしました。

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

CSS
.calendar-day { /* カレンダー全体 */
    border:1px solid #000;
    background: #ddd;
}

.calendar-sunday,
.calendar-weekday,
.calendar-saturday { /* カレンダーの見出し全体 */
    font-weight: bold;
    border:1px solid #000;
    background: #fff;
}

.calendar-sunday { /* カレンダーの見出し(日曜日) */
    color: #f00;
}

.calendar-weekday { /* カレンダーの見出し(平日) */
    color: #000;
}

.calendar-saturday { /* カレンダーの見出し(土曜日) */
    color: #00f;
}

.calendar-day a { /* 記事へのリンク */
    display: block;
    text-decoration:none;
    transition: 0.3s;
    background: #fff;
}

.calendar-day a:hover{ /* リンクのマウスオーバー */
    text-decoration:none;
    color: #ddd;
    background: #000;
}

記事のある日は白で、マウスオーバーすると色が反転(黒)、記事のない日はグレーです。

参考になるブログ・Webサイト
太陽がまぶしかったから - はてなブログのカレンダーモジュールをオシャレにするCSSを作ってみた

個人的には、カレンダーだけあればいいのですが、見にくる人は、ブログをいつからはじめて、どれくらい続けているのか知りたいと思うので、リストも表示することにしました。

(デザイン→サイドバー→モジュールを追加→HTMLにコードを入力)

HTML
<div class="hatena-module hatena-module-archive" data-archive-type="default" data-archive-url="https://simadzu.hatenablog.com/archive">
    <div class="hatena-module-body">
    </div>
</div>

HTMLのモジュールを使ったのは、月別アーカイブのタイトルを表示させないためです。
赤字は自分のブログのURLを入力します。内容は月別アーカイブモジュールと同じです。

それにしても、例えば、2018年9月の記事を見たとき、月別アーカイブも、カレンダーは2018年9月を、リストは2018年を展開して、表示されるのは、芸が細かいなー。

- 追記 -
カレンダーのスタイルをもっとシンプルなものに変更しました。

参考になるブログ・Webサイト
Someday Somewhere - カレンダー式月別アーカイブ:リンク背景を円形にする

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

CSS
.calendar-day {
    width: 30px;
    height: 30px;
}

.calendar-sunday,
.calendar-weekday,
.calendar-saturday {
    font-weight: bold;
}

.calendar-sunday {
    color: #f00;
}

.calendar-saturday {
    color: #04c;
}

.calendar-day a {
    color: #000;
    display: inline-block;
    width: 25px;
    height: 25px;
    transition: 0.3s;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff;
    line-height: 26px;
    text-align: center;
}

.calendar-day a:hover{
    text-decoration: none;
    color: #fff;
    border-color: #000;
    background: #000;
}

- さらに追記 -
はてなブログの個別記事の投稿日をカレンダーにわかりやすく表示を書きました。