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

hatenaロゴ

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

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

（デザイン→カスタマイズ→「デザインCSS」にコードを入力）

CSS
.js-archive-module-calendar-container tbody {
    background: transparent;
}

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

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

.calendar-sunday {
    color: #f83438;
}

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

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

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

記事のある日は背景が白丸（文字色は黒）、マウスオーバーすると背景が黒丸（文字色は白）、記事のない日はグレーです。

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

（デザイン→サイドバー→モジュールを追加→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サイト