はてなブログの日付を日めくりカレンダー風にする

hatenaロゴ

はてなブログのカスタマイズはやりつくした感があったのですが、検索ボックスをちょっとだけカスタマイズしてから、もう少しできるんじゃないかと、ネットを調べたり、過去の記事を書き直したり、ブログのCSSを調整したりしていました。

そして、次のブログの記事がおもしろそうだなと思ってチャレンジしてみました。

参考になるブログ・Webサイト

はてなブログテーマの魔改造～日付表示を日めくりカレンダー風に～

日付表示形式の変更はてなブログはデフォルトだと記事の日付は「2013-10-22」みたいに横並びにハイフン繋ぎで表示されますが、これを日めくりカレンダー風の形式に変更するというもの。

はてなブログ日付のデザインカスタマイズカスタマイズ用CSSコード

はてなブログの日付のデザインを変更するカスタマイズ用のCSSコードをご紹介します。はてなブログテーマストアでは様々なデザインのテーマがあり、とくに公式テーマでは個性的な日付のデザインが多いですから、無理してこの記事のようにカスタマイズする必要は…

このブログのとおりに作業すると、簡単にブログの日付を日めくりカレンダー風にできるのですが、日付の余白がもったいないというか、バランスが悪いというか、日付の横に記事タイトルとカテゴリーを表示（移動）するのも無理があるし...。→できました。
（日付をfloat:leftで左寄せしてその横に記事タイトルとカテゴリーを回り込ませた）
なお、日付の背景はCSSのみでも表示できますが、あえて画像を使用しています。

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

CSS
.date:before {
    /* 日付のアイコンを非表示 */
    content: "";
}

.date a {
    /* 日付のリンクを無効 */
    pointer-events: none;
}

.date {
    background: url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/simadzu/20240407/20240407145647.png) no-repeat;
    height: 66px;
    width: 64px;
    font-family: sans-serif;
    /* カレンダー全体を左寄せ */
    float: left;
    /* カレンダー全体の余白 */
    margin: -4px 13px 0 -1px;
    /* 年月日の文字を中央揃え */
    text-align: center;
}

.date-year,
.date-month {
    /* 年月のフォントの大きさ */
    font-size: 13px;
    /* 年月の文字色を白 */
    color: #fff;
    /* 年月の背景色を黒（画像を非表示にすると文字が見えないので） */
    background: #000;
}

.date-year:after {
    content: "/";
}

.hyphen {
    display: none;
}

.date-day {
    display: block;
    /* 日のフォントの大きさ */
    font-size: 30px;
    /* 日の文字色を黒 */
    color: #000;
    /* 日の高さを調整 */
    line-height: 1.45em;
}

このブログは、デザインテーマのMinimalismをカスタマイズして使っているので、それに合わせて試行錯誤しながら1ドット単位で微調整しました。
それにしても、カスタマイズのやりすぎでデザインCSSが収拾つかなくなってきました...。