襲の色目で日付スタンプ for WordPress

なんとなくブログのエントリの日付スタンプの画像が浮いているような気がしたのでシンプルに色だけにしてみました。
テンプレートは以下のような感じ。

     <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; }

人見知りソフトウェアエンジニアです。ビジュアル系、お笑い、Pixarが好き。勢いで吉本超合金おたけびBOTを作った。オールザッツ漫才が放送されない東京在住。

趣味や日常からアウトプットの場としてブログを書いています。自作のWordPressプラグインにGitHub Flavored MarkdownAmazonJSなど。