続いて、はてなモジュールの設定。この辺から状況は泥沼化してくる。如何にシンプルにまとめられるか。まづはcalender2モジュールだ。
table.calendar {
font-size:72% ; /* カレンダーの文字サイズ */
margin:0 ; /* 枠の外側余白 */
padding-left:2% ; /* 内側左の余白 */
text-align:center ; /* カレンダー内の字詰めを中央に */
}
table.calendar * { /* カレンダー内の各要素の余白と罫線をキャンセル */
margin:0 ;
padding:0 ;
border:0 ;
}
td.calendar-day { color:#666 ; background-color:#ccc ; } /* 日付部分の基本色 */
td.calendar-sunday { color:#c00 ; background-color:#c66 ; } /* 日曜部分 */
td.calendar-weekday { color:#000 ; background-color:#666 ; } /* 平日部分 */
td.calendar-saturday { color:#00c ; background-color:#66c ; } /* 土曜部分 */
td.calendar-prev-month,td.calendar-current-month,td.calendar-next-month { color:#000 ; background-color:#666 ; } /* ナビゲーション部分 */
td.calendar-day a { color:#000 ; background-color:#ccc ; } /* 日付部分のリンク色 */
td.calendar-day a:hover { color:#fff ; background-color:#933 ; } /* 日付部分のマウスロールオーバー */
正直、曜日部分の色を変へたりしなければこんなに記述が大きくなることはないのだが、凝れるところには凝つておきたいではないか。設定内容自体は妥当なところだらう。
最新タイトル五日分については、実質これだけ。はてなダイアリーが自動的に付与する「最新タイトル」の文字がp要素でマークアップされてゐるのが嫌なのでこれを非表示にする(根本的な解決ではないが)。
p.recentitem { display:none ; } /* 「最新タイトル」表示をキャンセル */
また、リスト項目に下線をつけたいので先のli.indexの部分にsectionモジュールの要素も併記する。
li.index,ul.hatena_section li {
border-bottom:1px #990 solid ; /* リスト項目に下線表示 */
}
最後にphotoモジュールについて、下記の様に設定。写真の一つ一つも箇条書きリストの項目になつてゐるので、これをdisplay:inlineと設定することで横一列に並ぶ様にした。もちろん、収まりきらない場合は適宜折返されるので、ウインドウの表示幅によつて配列は変化する。写真表示の枚数を12枚に設定することで、配列がどう変動してもそれなりに見える様にしたのが一工夫。
ul.hatena_photo {
padding:0 2px ; /* 枠の内側余白 */
text-align:center ; /* 字詰めを中央寄せに */
border-color:#999 ; /* 左右の飾り枠の色 */
border-width:0 4px ; /* 左右の飾り枠の幅 */
border-style:dotted ; /* 左右の飾り枠のスタイル */
}
ul.hatena_photo li {
display:inline ; /* リスト項目をインライン表示に */
}
ul.hatena_photo li img { width:48px ; height:48px ; } /* 画像サイズを固定 */
a img { border:0 ; } /* リンク付画像に表示される枠をキャンセル */
これでサイドバー部分は完全に終了だ。あとは細々とした設定を残すのみ。ここまでのサンプル文書9。
スタイルシートはid:yms-zun:20030105にまとめた。
