カレンダーの土曜日と日曜日の色を変える

今回はカレンダーの土曜日と日曜日の色を変えたいと思います。
デフォルトテンプレートでは、投稿があった日以外は全て同じ色で表示されていますね。

サイドバーの HTML ソースを直接いじることは出来ませんが、実は土曜日と日曜日にはそれぞれクラス名が割り当てられています。
これを利用すると、簡単に色を分けることが出来ます。

HTML ソースの確認

ブログを表示させた状態で、ブラウザの「表示」＞「ページのソース」で HTML ソースを確認してみます。

<div class="calender"><div class="calendarhead">

<a href="d2009-03.html">&lt;</a> 2009年<a href="d2009-04.html">04</a>月 <a href="d2009-05.html">&gt;</a></div>

<table class="calendartable" summary="calender">

<tr>

<th abbr="S" class="calendarwd sun"><span class="calendarweek">S</span></th>

<th abbr="M" class="calendarwd"><span class="calendarweek">M</span></th>

<th abbr="T" class="calendarwd"><span class="calendarweek">T</span></th>

<th abbr="W" class="calendarwd"><span class="calendarweek">W</span></th>

<th abbr="T" class="calendarwd"><span class="calendarweek">T</span></th>

<th abbr="F" class="calendarwd"><span class="calendarweek">F</span></th>

<th abbr="S" class="calendarwd sat"><span class="calendarweek">S</span></th>

</tr>

<tr>

<td class="calendard sun"><span class="calendar">&nbsp;</span></td>

<td class="calendard"><span class="calendar">&nbsp;</span></td>

<td class="calendard"><span class="calendar">&nbsp;</span></td>

<td class="calendard"><span class="calendar">1</span></td>

<td class="calendard"><span class="calendar">2</span></td>

<td class="calendard"><span class="calendar">3</span></td>

<td class="calendard sat"><span class="calendar">4</span></td>

</tr>

<!-- 中略 -->

</table>

</div>

テーブルで組まれているので見えづらいかもしれませんが、土曜日と日曜日の見出しセル（<th>）とデータセル（<td>）にのみ、「sat」「sun」というクラス名が指定されていることが分かります（尚、id名やクラス名は半角スペースで区切れば複数指定することが出来ます）。

このクラス名を利用します。

CSS に手を加える

以下のソースをテンプレート「スタイルシート」に追加します。
追加する場所はどこでも構いませんが、「.calendard」の下あたりに追記しておくとカレンダーに対するスタイル指定として、ソース上まとまるので分かりやすいと思います。

/* --- 土曜日 --- */

th.sat, td.sat {/* 文字色 */

    color: #76a348;

}



td.sat a, td.sat a:link td.sat a:visited {/* リンクのスタイル */

    color: #76a348;

    text-decoration: underline;

}





td.sat a:active, td.sat a:hover {/* オンマウス＆クリック時 */

    color: #009933;

    text-decoration: none;

}



/* --- 日曜日 --- */

th.sun, td.sun {/* 文字色 */

    color: #e57640;

}



td.sun a, td.sun a:link, td.sun a:visited {/* リンクのスタイル */

    color: #e57640;

    text-decoration: underline;

}



td.sun a:active, td.sun a:hover {/* オンマウス＆クリック時 */

    color: #009933;

    text-decoration: none;

}

上記ソースの中の文字色や装飾は当ブログで採用しているものですので、ご自身のブログに合わせて変更して下さい。

完成

これで土曜日と日曜日の文字色が変わりました。



よりカレンダーらしい見栄えになったと思います。