はてなブログのカスタマイズはやりつくした感があったのですが、検索ボックスをちょっとだけカスタマイズしてから、もう少しできるんじゃないかと、ネットを調べたり、過去の記事を書き直したり、ブログのCSSを調整したりしていました。
そして、次のブログの記事がおもしろそうだなと思ってチャレンジしてみました。
日付表示形式の変更 はてなブログはデフォルトだと記事の日付は「2013-10-22」みたいに横並びにハイフン繋ぎで表示されますが、 これを日めくりカレンダー風の形式に変更するというもの。
16bit!
はてなブログの日付のデザインを変更するカスタマイズ用のCSSコードをご紹介します。 はてなブログテーマストアでは様々なデザインのテーマがあり、とくに公式テーマでは個性的な日付のデザインが多いですから、無理してこの記事のように…
Minimal Greenこのブログのとおりに作業すると、簡単にブログの日付を日めくりカレンダー風にできるのですが、日付の余白がもったいないというか、バランスが悪いというか、日付の横に記事タイトルとカテゴリーを表示（移動）するのも無理があるし...。→できました。
（日付を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/20240521/20240521200208.png) no-repeat;
height: 68px;
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: inline-block;
/* 日のフォントの大きさ */
font-size: 30px;
/* 日の文字色を黒 */
color: #000;
/* 日の高さを調整 */
padding: 4px 0;
}
このブログは、デザインテーマのMinimalismをカスタマイズして使っているので、それに合わせて試行錯誤しながら1ドット単位で微調整しました。
それにしても、カスタマイズのしすぎでデザインCSSが収拾つかなくなってきました...。
－ 追記 －
このブログでは、日付を日めくりカレンダー風に表示し、そのフォントに「sans-serif」を指定しているのですが、フォントによってカレンダーの大きさが少し変わってしまいます。 そこで、日付のフォントをWebフォントのGoogle Fontsにして…
simadzu’blog