はてなダイアリーガイド「CSSセレクタ - calendar2photoモジュール」

はてなダイアリーガイド「CSSセレクタ - calendar2photoモジュール」

calendar2photoモジュールで表示される写真つきカレンダーのセレクタです。

calendar2モジュール（写真なし）も同じです。

Flashを利用した「calendar2jphotoモジュール」は、スタイルシートでは見栄えを変えられないので、モジュールのタグのほうで指定してやります。はてなダイアリーのヘルプ - Flashを使用した1ヶ月の画像カレンダーを表示する（calendar2jphotoモジュール）をご覧ください。

table.calendarとtable.calendar trとtable.calendar td

「table.calendar」は全体。テーブル全体の幅とか、背景色を決めるのがこのセレクタです。

table.calendar {
 width: 150px;
 height: 180px;
}

のようにすると、カレンダー全体の縦横のサイズをピクセル指定できます。

テーブルの説明もいるかな。テーブル（table）っていうのは表組みのことです。カレンダーも言ってみれば日付の一覧表でしょう。

テーブルの行（の中身）を指したいときは「tr」を追加です。

tr

tr

tr

このカレンダーの横一行になにか指定したいときは「table.calendar 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」はカレンダー内の全部のセル。

table.calendar td {
 font-size: 80％;
 background-color: red;
}

のようにすると、全部のセルの中の文字が80％になり、背景色がred（■）になります。

[戻る▲]

td.calendar-prev-month

前の月へのリンクがあるセル。
このセルの中のリンクを指定するときは、

• td.calendar-prev-month a
  • td.calendar-prev-month a:link
  • td.calendar-prev-month a:visited
  • td.calendar-prev-month a:hover
  • td.calendar-prev-month a:active

[戻る▲]

td.calendar-current-month

その月を表示するセル。
このセルの中のリンクを指定するときは、

• td.calendar-current-month a
  • td.calendar-current-month a:link
  • td.calendar-current-month a:visited
  • td.calendar-current-month a:hover
  • td.calendar-current-month a:active

[戻る▲]

td.calendar-next-month

次の月へのリンクがあるセル。
このセルの中のリンクを指定するときは、

• td.calendar-next-month a
  • td.calendar-next-month a:link
  • td.calendar-next-month a:visited
  • td.calendar-next-month a:hover
  • td.calendar-next-month a:active

[戻る▲]

td.calendar-sunday

「日曜日」のセル。

td.calendar-sunday {
 color: black;
}

で文字が黒くなります。
[戻る▲]

td.calendar-saturday

「土曜日」のセル。
[戻る▲]

td.calendar-weekday

「平日」（月火水木金）のセル。
[戻る▲]

td.calendar-day

各日付のセル（の中身）全部。数字が入ってるセルも、画像が入ってるセルも、なにもないセルも。
文字を右詰めにするには

td.calendar-day {
 text-align: right;
}

のように書きます。
[戻る▲]

td.calendar-day a

日付がリンクになっているところ。

• td.calendar-day a
  • td.calendar-day a:link
  • td.calendar-day a:visited
  • td.calendar-day a:hover
  • td.calendar-day a:active

[戻る▲]

td.calendar-day img

日付の中の画像。

画像はリンクになっているので、それを指定したいときは

• td.calendar-day a img
  • td.calendar-day a:link img
  • td.calendar-day a:visited img
  • td.calendar-day a:hover img
  • td.calendar-day a:active img

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 ;
}

さらにテーブルが崩れないようにするにはこんな指定もありますが、ブラウザによって違う結果かもしれないです。
[戻る▲]