Movable Typeのエントリーの日付を日めくりカレンダーにしてみる

エントリの日付のデザインが適当で気にいらなかったので画像をつくろうかと思ったが、すでにいろいろありそうな気がしたので適当に探していたら下記を見つけたので使ってみた。

Calendar icons not only for your blog
Movable Typeで使う場合、まず上のリンクから画像を落として適当な場所に配置する。エントリーのテンプレート(ブログ記事の概要とか)で、下記のように追加する。

<div class="asset-date asset-date-m<$MTEntryDate format="%m"$>">
<div class="asset-date-day"><$MTEntryDate format="%d"$></div>
</div>

で、cssに下記を追加。

.asset-date { float: left; margin-right: 6px; width: 42px; height: 42px; }
.asset-date-m01 { background: url('./img/calendar-icons/01.gif'); }
.asset-date-m02 { background: url('./img/calendar-icons/02.gif'); }
.asset-date-m03 { background: url('./img/calendar-icons/03.gif'); }
.asset-date-m04 { background: url('./img/calendar-icons/04.gif'); }
.asset-date-m05 { background: url('./img/calendar-icons/05.gif'); }
.asset-date-m06 { background: url('./img/calendar-icons/06.gif'); }
.asset-date-m07 { background: url('./img/calendar-icons/07.gif'); }
.asset-date-m08 { background: url('./img/calendar-icons/08.gif'); }
.asset-date-m09 { background: url('./img/calendar-icons/09.gif'); }
.asset-date-m10 { background: url('./img/calendar-icons/10.gif'); }
.asset-date-m11 { background: url('./img/calendar-icons/11.gif'); }
.asset-date-m12 { background: url('./img/calendar-icons/12.gif'); }
.asset-date-day { font-weight: bold; font-size: 1.3em; color: #333; width: 42px; text-align:center; padding-top: 14px; }
.asset-header { width: 440px; }

画像は1ファイルにまとめて欲しかったなー。日付のフォントは意外にメイリオが良い感じ。asset-headerやasset-nameもfloatで並べるのが吉。