ホームページ制作のアレ

記事の右上に表示していた日付を、カレンダーのようにしてみました。

カレンダーの元となる画像は、
http://www.smashingmagazine.com/2008/02/22/gallery-of-date-stamps-and-calendars/
ここに沢山あるので、頑張ってここにあるものと被らないように日めくりの画像を作成します。

こんな風になりました。

次に、日付の部分のソースを
<div class=”entry-date”><?php the_time(‘Y/m/d’) ?></div>
から
<div class=”entry-date”>
<span class=”entry-month”><?php the_time(‘M’) ?></span>
<span class=”entry-day”><?php the_time(‘d’) ?></span>
</div>
に変更。
※最初、<span>のところを<div>にしようとして失敗しました。divの「d」が、wordpressに「日」の引数 として判断されて、タグが崩れてしまったのが原因な気がします（深く調べなかった）

次に、css（弊社のは、オリジナルのテンプレートですので、クラス名やパスはお使いのテーマにそって変更してください)に、
.entry-date {
text-align: center;
color: #666666;
background: url(images/blog_date.gif) no-repeat right top;
height: 56px;
float: right;
margin-right: 15px;
margin-left: 15px;
}
.entry-date .entry-month {
display: block;
padding-top: 15px;
font-weight: bold;
font-size: 10px;
color: #999999;
width: 56px;
}
.entry-date .entry-day {
display: block;
color: #0096cc;
font-weight: bold;
font-size: 16px;
width: 56px;
}

こんな感じで書いてしました。で、完成。IE6とFirefoxで確認してあります。
こんなんで一時間くらいかかってしまいました。ホームページデザインの仕事の合間を縫ってwordpressの修行はまだ続きます。