CSS再構築(その八) 日記のレイアウト残り

• 初期状態
• 一昨日までの状態
• 昨日までの状態

さて、残りを片付けようぞ。
日記本体のレイアウトが済んでない部分から。まづcalenderモジュールだ。基本はdiv.dayと同じなので、そこの設定部分をdiv.day,div.calendarといふ併記に書き直す。その上で差分の定義を追加。

/* calendarモジュール */
 
div.calendar { 
    margin:0 ; /* 外側余白 */
    padding:1em ; /* 内側余白 */
    font-size:80% ; /* 文字サイズ */
    line-height:1.2em ; /* 一行の高さ */
    }

これで日記部分の枠が揃つた。もう勝つたも同然だ(何が)。
この勢ひでコメント欄と脚注欄も一気に片付ける。

/* コメント欄 */
 
div.comment { 
    margin:0 ;  /* 外側余白 */
    background-color:#363 ;  /* 背景色 */
    border-top:1px #999 solid ;  /* 上に罫線表示 */
    }
 
div.caption { 
    padding:0 1em ;  /* [コメントを書く]部分の内側余白 */
    border-bottom:1px #999 solid ;  /* 下に罫線表示 */
    }
 
div.commentshort p { 
    margin:0 ;  /* 外側余白 */
    padding:0.5em 1em ;  /* 内側余白 */
    border-bottom:1px #696 solid ;  /* コメントの下に罫線表示 */
    line-height:1.4em ;  /* 改行幅設定 */
    }

/* 脚注 */
 
div.footnote { 
    padding:1em ;  /* 内側余白 */
    background-color:#666 ;  /* 背景色 */
    border-top:1px #999 solid ;  /* 上に罫線表示 */
    line-height:1.2em ;  /* 改行幅設定 */
    }
 
div.footnote p {
    margin:0 ;  /* 脚注段落の余白キャンセル */
    }
 
span.footnote { 
    font-size:60% ;  /* 本文中の脚注アンカーの文字サイズ */
    }

なんだかんだで設定すべき項目は多い。marginやpaddingは極力減らしたいが、なかなかさうもいかないな。これでも最小限に留めたつもりだ*1。サンプル文書10。
続いて、デフォルトで付与されてゐるスタイルを忘れずに書いておく。一つはワード検索時のハイライト表示用、もう一つは写真の配置用。特に説明は不要だらう。

/* はてなデフォルトスタイル */
 
span.highlight {
    color: black;
    background-color: yellow;
}
img.photo {
    margin:1em ;
    border: none ;

*1:脚注のサンプルを書いてみたりなんかして