印刷用表示へ切り替え 通常表示へ切り替え 更新履歴を表示 更新履歴を隠す
Fri April 22, 2005
MovableTypePlugin カレンダーにスタイルシートを適用

カレンダーの大幅な見直しを行う。これまで休日の色をインラインスタイルで指定していたが，スタイルシートで指定するように変更する。

■ ■ ■

Movable Type for land.to :: 可動式活字 さんから トラックバック を頂いて，うーむなるほど確かにその通り。カレンダーの色の指定をスタイルシートで行うのは正しい道である。

このサイトでは，拙作のプラグインでカレンダーの休日や土曜日の色づけをインラインスタイルで指定していたのだが(nlog(n) - 休日表示カレンダープラグイン)，これを捨てて新たにクラスを作り，スタイルシートで色づけをすることにする。方針は以下の通り。見た目を変えないように書き換える。

旧 (インラインスタイル) 新 (スタイルシート)
<table style="border: none; margin: auto;" width="160"> <table>
.calendar table { border: none; margin: auto; width: 160px; }
<tbody style="text-align: center;"> <tbody>
.calendar tbody { text-align: center; }
<th abbr="Sunday" style="border-bottom: solid 1px gray;"> <th abbr="Sunday">
.calendar th { border-bottom: solid 1px gray; }
<td style="border-bottom: solid 1px #D7CEDF; background-color: #FFDAB9;"> <td class="calendarifnottoday holidaycolor">
.calendar td { border-bottom: solid 1px #D7CEDF; }
.holidaycolor { background-color: #FFDAB9; }

クラスを2つ指定する場合は，スペースで区切る。

今までのカレンダー部分のテンプレートは次のようになっていた。<MTDateHeader> と <MTDateFooter> はリンクのタイトルを複数表示するために使用している(nlog(n): カレンダーのリンクにタイトルを複数表示させたい)。

<div class="calendar">
<table cellspacing="0" cellpadding="2" width="160" summary="Monthly calendar with links to each day's posts" style="border: none; margin: auto;">
<caption class="calendarhead">
<MTArchiveList archive_type="Monthly" lastn="1">
<MTArchivePrevious><a href="<$MTArchiveLink$>" title="<$MTArchiveDate format="%B %Y" language="jp"$>" style="text-decoration: none;">&laquo;&laquo;</a>&nbsp;
</MTArchivePrevious>
</MTArchiveList>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Monthly"$>" title="<$MTDate format="%B %Y" language="jp"$>" style="text-decoration: none;"><$MTDate format="%B %Y"$></a>
</MTEntries>
</caption>
<tbody style="text-align: center;">
<tr>
<th abbr="Sunday" style="border-bottom: solid 1px gray;"><span class="calendarweek-sunday">S</span></th>
<th abbr="Monday" style="border-bottom: solid 1px gray;"><span class="calendarweek">M</span></th>
<th abbr="Tuesday" style="border-bottom: solid 1px gray;"><span class="calendarweek">T</span></th>
<th abbr="Wednesday" style="border-bottom: solid 1px gray;"><span class="calendarweek">W</span></th>
<th abbr="Thursday" style="border-bottom: solid 1px gray;"><span class="calendarweek">T</span></th>
<th abbr="Friday" style="border-bottom: solid 1px gray;"><span class="calendarweek">F</span></th>
<th abbr="Saturday" style="border-bottom: solid 1px gray;"><span class="calendarweek-saturday">S</span></th>
</tr>
<MTCalendar sdow="0">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td style="border-bottom: solid 1px #D7CEDF; <MTCalendarIfToday>border:solid 1px black;</MTCalendarIfToday> background-color: <$MTCalendarColor holidaycolor="#FFDAB9" saturdaycolor="#DDDDEE" oddcolcolor="#F1FFC8" evencolcolor="#FFFFFF"$>;"><span class="calendar">
<MTCalendarIfEntries>
<MTEntries days="1" sort_order="ascend">
<MTDateHeader><a href="<$MTEntryPermalink archive_type="Daily"$>" title="</MTDateHeader>
<$MTEntryTitle$>...
<MTDateFooter>" style="font: 12px Arial; font-weight: bold; text-decoration: none;"><$MTCalendarDay$></a></MTDateFooter>
</MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
<MTCalendarIfBlank>&nbsp;</MTCalendarIfBlank></span></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
</tbody>
</table>
</div>

これを次のように書き換えた。各曜日の色は，新たに作成したクラスに振っている。<td> にスタイルをつけて枠線を描くと，<MTCalendarIfToday> による今日の日付の黒い枠線の指定を上書きしていまうという問題がある。これを解決するために「calendariftoday」と「calendarifnottoday」という2つのクラスを作り，<MTCalendarIfToday> が True の場合は「calendariftoday」，False の場合は「calendarifnottoday」になるように <MTElse> を使って分岐している。しかし，何でもいいけど複雑過ぎで読む気にならん。

<div class="calendar">
<table cellspacing="0" cellpadding="2" summary="Monthly calendar with links to each day's posts">
<caption class="calendarhead">
<MTArchiveList archive_type="Monthly" lastn="1">
<MTArchivePrevious><a href="<$MTArchiveLink$>" title="<$MTArchiveDate format="%B %Y" language="jp"$>">&laquo;&laquo;</a>&nbsp;
</MTArchivePrevious>
</MTArchiveList>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Monthly"$>" title="<$MTDate format="%B %Y" language="jp"$>"><$MTDate format="%B %Y"$></a>
</MTEntries>
</caption>
<tbody>
<tr>
<th abbr="Sunday"><span class="calendarweek-sunday">S</span></th>
<th abbr="Monday"><span class="calendarweek">M</span></th>
<th abbr="Tuesday"><span class="calendarweek">T</span></th>
<th abbr="Wednesday"><span class="calendarweek">W</span></th>
<th abbr="Thursday"><span class="calendarweek">T</span></th>
<th abbr="Friday"><span class="calendarweek">F</span></th>
<th abbr="Saturday"><span class="calendarweek-saturday">S</span></th>
</tr>
<MTCalendar sdow="0">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td class="<MTCalendarIfToday>calendariftoday<MTElse>calendarifnottoday</MTElse></MTCalendarIfToday> <$MTCalendarColor holidaycolor="holidaycolor" saturdaycolor="saturdaycolor" oddcolcolor="oddcolcolor" evencolcolor="evencolcolor"$>">
<MTCalendarIfEntries>
<MTEntries days="1" sort_order="ascend">
<MTDateHeader><a href="<$MTEntryPermalink archive_type="Daily"$>" title="</MTDateHeader>
<$MTEntryTitle$>...
<MTDateFooter>"><$MTCalendarDay$></a></MTDateFooter>
</MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
<MTCalendarIfBlank>&nbsp;</MTCalendarIfBlank></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</tbody>
</table>
</div>

スタイルシートには次の項目を追加した。スタイルシートに分離しておけば，色を変えたいときはスタイルシートの変更のみで可能になる。それでこそのスタイルシートである。

        .calendar table { width: 160px; border: none; margin: auto; }
        .calendarhead a { text-decoration: none; }
        .calendar tbody { text-align: center; }
        .calendar th { border-bottom: solid 1px gray; }
        .calendar td { font: 12px Arial; }
        .calendar td a { font: 12px Arial; font-weight: bold; text-decoration: none; }
        .calendariftoday { border: solid 1px black; }
        .calendarifnottoday { border-bottom: solid 1px #D7CEDF; }
        .holidaycolor { background-color: #FFDAB9; }
        .saturdaycolor { background-color: #DDDDEE; }
        .oddcolcolor { background-color: #F1FFC8; }
        .evencolcolor { background-color: #FFFFFF; }

よく見ると，色指定を「gray」のような色名を使っている場合があったりして，統一感がない…。

休日表示部分の変更の要点は，色を返す部分をクラス名を返すように変更したことである。

<td class="<MTCalendarIfToday>calendariftoday<MTElse>calendarifnottoday</MTElse></MTCalendarIfToday> <$MTCalendarColor holidaycolor="holidaycolor" saturdaycolor="saturdaycolor" oddcolcolor="oddcolcolor" evencolcolor="evencolcolor"$>">
Posted by n at 2005-04-22 23:57 | Edit | Comments (0) | Trackback(0)
Trackbacks

  • 「手違いで複数トラックバックを送ってしまった!」という場合でも気にしないでください (重複分はこちらで勝手に削除させていただきます)
  • タイムアウトエラーは，こちらのサーバの処理能力不足が原因です (詳細は トラックバック送信時のエラー をご覧ください)
  • トラックバックする記事には，この記事へのリンクを含めてください(詳細は 迷惑トラックバック対策 をご覧ください)
Comments
Post a comment
  • 電子メールアドレスは必須ですが，表示されません (気になる場合は「メールアドレスのような」文字列でもOKです)
  • URL を入力した場合はリンクが張られます
  • コメント欄内ではタグは使えません
  • コメント欄内に URL を記入した場合は自動的にリンクに変換されます
  • コメント欄内の改行はそのまま改行となります
  • 「Confirmation Code」に表示されている数字を入力してください (迷惑コメント対策です)


(必須, 表示されます)


(必須, 表示されません)


(任意, リンクされます)


Confirmation Code (必須)


Remember info (R)?

‌