18日目：カレンダーに本当の見出しをつける
「けどさ」って声が聞こえる。「今あるカレンダーにもキャプション もうついてるよ。見てよほら、一番うえに月と年でしょ、しかも太字で。」
でもね、HTML ソースをもっとよぉく検証してみると、今あるカレンダーには本物の キャプションはついてないかもよ。たぶん <td> テーブルセルがひとつ、最初の列いっぱいに広がるようにしてあって、CSS で太字に見えるようにしてあるんじゃないかな。これなんてホントの <caption> タグを使えばずーっと簡単なのに。テンプレートも読みやすくなるし、ページのバイト数も多少軽くなるし、ビジュアルブラウザで見たときにはまるっきり同じように表示される。それにもっとアクセシブルなものになるよ。
誰がトクする？
- マーカス が喜ぶ。Lynx はキャプションには "CAPTION:" ってつけて表示する。これでこの一文は行のヘッダーとかテーブルデータじゃなくて、キャプションだってことが明確になる。
- ジャッキー も直接じゃないけど助かる。本当の
<caption>タグは、次回話す本当のテーブルヘッダーを使うことにもつながるから。このテーブルヘッダーはジャッキーの役に立つんだけど、これについては次回するね。
どうしたらいい？
これはカレンダーを使えて、そのカレンダーのHTML をいじっていいブログツールで使える技。
Movable Type では、メインインデックス・テンプレートにたぶんカレンダーのテーブルがこんなふうに入ってる。（"calendarhead" で検索すれば見つかると思うよ）：
<table border="0" cellspacing="4" cellpadding="0">
<tr>
<td colspan="7" align="center"><span class="calendarhead"><$MTDate format="%B %Y"$></span></td>
</tr>
<tr>
<td align="center"><span class="calendar">Sun</span></td>
...
このテーブルタグはそのまま、だけど最初の <tr> 列を本物の <caption> タグと、そっくり入れ替えて。こんな感じ：
<table border="0" cellspacing="4" cellpadding="0">
<caption class="calendarhead"><$MTDate format="%B %Y"$></caption>
<tr>
<td align="center"><span class="calendar">Sun</span></td>
...
その他は触らなくていい。次回また続きをやろう。
<caption> の class 属性はあってもなくてもいい。Movable Type についてくるテンプレートは CSS を使って年月を太字にしてるから、いちおう残しておいただけ。<caption> タグをこうすれば、前とそっくり同じに表示されるはずだよ。
さらなる情報源（英語）
- Tony Bowden: Radio でカレンダーを変更する方法。