カレンダーを表形式で表示できるcalendar2モジュールをよく見ますが、「hatena」以外のテーマや自作スタイルシートを使っている場合、見栄えを自分で調整しなければなりません。その際に「こうしたい」と多く考えられていそうな指定を、いくつか紹介します。
画像の上段は何も指定しない状態、下段はこれらをすべて指定した状態です。
- カレンダー内の文字を小さくする
- table.calendar{font-size:80%;}（「80%」の数字はお好みで）
- 「<< 」、月名、「>>」の間隔を揃える（なにも指定しないと左寄せになっているので、中央寄せにする）
- table.calendar td{text-align:center;}
- 「<<」「>>」や幅の狭い数字にマウスポインタをぴったり合わせなくても、リンクとしてクリックできるようにする
- table.calendar a{width:100%;}
最後の「table.calendar a{width:100%;}」は特におすすめです。これを指定すると、「<<」などをクリックしやすくなります。
calendar2モジュールのクラス名は、d:id:Imamura:20031118:p1にまとめてあります。上のほかに、いろいろ装飾したい方の参考になればと思います。
コメント
id:DocSeri『 a{width:100%;}はKonqueror系、Gecko系ともに対応しないのが残念。』
id:manpukuya『なんと、そうですか。情報ありがとうございます。』
