calendar2photoモジュールで表示される写真つきカレンダーのセレクタです。
calendar2モジュール(写真なし)も同じです。
Flashを利用した「calendar2jphotoモジュール」は、スタイルシートでは見栄えを変えられないので、モジュールのタグのほうで指定してやります。はてなダイアリーのヘルプ - Flashを使用した1ヶ月の画像カレンダーを表示する(calendar2jphotoモジュール)をご覧ください。
「table.calendar」は全体。テーブル全体の幅とか、背景色を決めるのがこのセレクタです。
table.calendar { width: 150px; height: 180px; }
のようにすると、カレンダー全体の縦横のサイズをピクセル指定できます。
テーブルの説明もいるかな。テーブル(table)っていうのは表組みのことです。カレンダーも言ってみれば日付の一覧表でしょう。
テーブルの行(の中身)を指したいときは「tr」を追加です。
tr |
tr |
tr |
table.calendar tr { line-height: 150%; border-top: 1px solid #eee; border-right: 1px solid #aaa; border-left: 1px solid #ddd; border-bottom: 1px solid #999; }
のようにすると、すべての行が影つきっぽくなると思います。
テーブルの中のマス目(の中身)を指したいときは「td」を追加です。こういうマス目のことを「セル」と言います。
td | td | td | td |
td | td | td | td |
td | td | td | td |
table.calendar td { font-size: 80%; background-color: red; }
のようにすると、全部のセルの中の文字が80%になり、背景色がred(■)になります。
[戻る▲]
前の月へのリンクがあるセル。
このセルの中のリンクを指定するときは、
[戻る▲]
その月を表示するセル。
このセルの中のリンクを指定するときは、
[戻る▲]
次の月へのリンクがあるセル。
このセルの中のリンクを指定するときは、
[戻る▲]
「土曜日」のセル。
[戻る▲]
「平日」(月火水木金)のセル。
[戻る▲]
各日付のセル(の中身)全部。数字が入ってるセルも、画像が入ってるセルも、なにもないセルも。
文字を右詰めにするには
td.calendar-day { text-align: right; }
のように書きます。
[戻る▲]
日付がリンクになっているところ。
[戻る▲]
日付の中の画像。
画像はリンクになっているので、それを指定したいときは
td.calendar-day a:hover img { width : 60px ; height : auto ; }
のように書くと、ポインタで触れたときに画像が大きくなってちょっと便利です。
td.calendar-day td { position: relative ; } td.calendar-day a:hover { dislpay : block ; line-height : 1 ; } td.calendar-day a:hover img { position: absolute ; width : 60px ; height : auto ; }
さらにテーブルが崩れないようにするにはこんな指定もありますが、ブラウザによって違う結果かもしれないです。
[戻る▲]