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で並べるのが吉。

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

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