なんとなくブログのエントリの日付スタンプの画像が浮いているような気がしたのでシンプルに色だけにしてみました。
テンプレートは以下のような感じ。
<div class="post_date post_date_m<?php the_time('m') ?>">
<div class="post_date_month"><?php echo get_post_time('M') ?></div>
<div class="post_date_day"><?php echo get_post_time('j') ?><span><?php echo get_post_time('S') ?></span></div>
<div class="post_date_year"><?php the_time('Y') ?></div>
</div>
the_timeがローカライズされてしまうので明示的に書式を指定したい場合にはget_post_timeを呼んでいます。
季節ごとの色については、平安時代に嗜まれたという襲の色目の配色を適応してみました。
白との組み合わせとして
- 春 -> 白梅(薄紅: #f0908d)
- 夏 -> 花菖蒲(萌黄: #aacf53)
- 秋 -> 菊(紫:#884898)
- 冬 -> 氷重(鳥の子色: #fff1cf)
としています。色の数値はについては以下のサイトを参考にしています。
http://www.colordic.org/colorsample/
cssとしては以下のような感じ。
.post_date { float: left; width: 42px; text-align:center; border:1px solid #ddd; }
.post_date_month { font-size: 10px; line-height: 16px; font-weight:bold; color: #fff; background-color:#10C7EF; }
.post_date_m03 .post_date_month,
.post_date_m04 .post_date_month,
.post_date_m05 .post_date_month { color: #fff; background-color:#f0908d; }
.post_date_m06 .post_date_month,
.post_date_m07 .post_date_month,
.post_date_m08 .post_date_month { color: #fff; background-color:#aacf53; }
.post_date_m09 .post_date_month,
.post_date_m10 .post_date_month,
.post_date_m11 .post_date_month { color: #fff; background-color:#884898; }
.post_date_m12 .post_date_month,
.post_date_m01 .post_date_month,
.post_date_m02 .post_date_month { color: #fff; text-shadow:1px 1px 1px #999; background-color:#fff1cf; }
.post_date_day { font-size: 12px; line-height: 20px; }
.post_date_day span { font-size: 10px; line-height: 20px; font-weight:bold; margin-left:2px; }
.post_date_year { font-size: 8px; line-height: 14px; background:#eee; }
Markdown with by 
wp-gfm
wp-gfm