カレンダーの本日表示だけを画像にする。

【追記　02/23 11:00】
別の方法にて実現できましたので、こちらの方を参照ください。
→ カレンダーの本日表示だけを画像にする。再び

【追記　18:00】
FireFoxで見ると、原因は不明（インラインで直接スタイルを定義しているから？）ですが background-image を読み込んでくれないので FireFox では背景色でのみの表示となります。

この間、sbでブログを構築されている、ふれあい果樹園さんのページを見て、カレンダーの本日表示がアイコンになってたので、おお！これはいいなぁと思って試行錯誤してたんですよ。

MTのカレンダーは table で組まれているので、単純に background-image を指定してやって、リンク文字のスタイルを font-size:0px に変えてやればいいのだろうなぁと思ってやってみたんですけど、カレンダーの本日日付のリンク文字のスタイルがどうやっても変わらず、背景画像の上に日付表示が載ってきて、どうにも不細工なことに・・・。

カレンダーの日付自体にリンクスタイルが設定してあるんですけど、それは本日日付も何も関係なく、全ての日付にスタイル設定されているので、本日日付だけに class を付与してスタイルを設定してあげれば font-size:0px で日付表示を見せないようにすることができると思ったんですけどね。
その class 付与をどこでやればいいのか皆目わからない状態で。

なので、sb のようにスクリプトで本日日付の a:link 関連のスタイルを跳ばしてやるしかないのかなぁと思い、某所でそんな話題を振ってたんですけどね、なんと、kazunoblog の kaz さんに良いヒントをもらって表示できました。とりあえずトップだけですが。（笑）　ありがとうございます。

■TB to 月送りカレンダー by kazunoblog

内容はいたって簡単で、日付にリンクスタイルを設定するのではなくて、カレンダーの日付セル自体にリンクスタイルを付与するってだけのことでした。あー、私、難しく考えすぎてました。（苦笑）

以下、ソース出しときますので、やられる方はご参考に。縦型、横型、関係なく誰でもできますよー。
　

▽このブログのカレンダー部分のソース

<table width="100%" class="calendar" cellpadding="2" cellspacing="4" summary="カレンダー">
<tr>
<td class="calendar-head"><$MTDate format="%B"$>月</td>
</tr>
<MTCalendar>
<tr>
<td class="calendar-day" <MTCalendarIfToday>style="background-color:#fff; font-size:0px;background-image:url（表示させたい画像のurl);background-repeat:no-repeat;background-position:center;"</MTCalendarIfToday>>
<MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a>
</MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
<MTCalendarIfBlank> </MTCalendarIfBlank>
</td>
</MTCalendar>
</tr>
</table>

上記青文字の部分で本日日付にスタイル設定を付与して画像を表示させてます。

▽カレンダー廻りのスタイルシート設定

/* カレンダー全体 */
.calendar {
background: #f5f5f5;
width : 15px ;
border-left : 1px solid #8FABBE;
border-bottom : 1px solid #8FABBE;
border-top : 1px solid #8FABBE;
float: left;
margin-top : 10px;
}
/* カレンダー年月 */
.calendar-head {
text-align: center;
color: #666666;
background: #f6f6f6;
font-family: Verdana, Arial, sans-serif;
font-size:10px;
border:1px solid #dcdcdc;
}
/* カレンダー曜日数字 */
.calendar-day {
font-size:10px;
text-align: center;
color:#666;
font-family: Verdana, Arial, sans-serif;
font-weight:normal;
background: none;
}
/* カレンダー日付セル */
.calendar td {
font-size:10px;
height: 12px;
}
/* カレンダーリンクスタイル設定 */
.calendar td a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: #8FABBE;
}
.calendar td a:hover {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: #fff;
}