さて、昨日の続き。昨日付の分で、日記本体の基本的な部分はだいたい望む通りになつた。コメント欄とか脚注とか、その他にも弄るべき点は色々あるけれど後回しにして、下の方にズラッと並んでゐる項目を何とかしたい。
その前に確認しておかう。下の方に並んだ「カレンダー」「話題別インデックス」「テンポラリ」といつた見出しは、これもh2要素でマークアップされてゐる。それぞれの項目も、見出しに対応した本文として記述されてゐる。HTML文書の構造としては極めてシンプルだ。
日記本体部分は昨日も書いた通り、はてなダイアリーによつて"main"といふクラス名のdivで大きく括られてゐる。それより前の部分は設定画面の「ページのヘッダ」、後ろの部分は「ページのフッタ」に書いた内容が反映される。ここでは、フッタに書いた内容をまとめてサイドバーとして表現したい。
そこで、フッタ部分を大きくdiv要素で括る。クラス名は、横にあるのに"footer"では変だし、かといつてスタイルの設定次第で横にあるとも限らないから"sidebar"も不適切だし*1、一度ならず困つたところである。で、結局"infobar"とした。色々とアレな名付け方だが許せ。
で、兎にも角にもdiv.mainとdiv.infobarが横に並ぶ様にしたいといふわけである。そのために、両方のdivにテキストの回り込みの設定をしてやる。
div.main {
width:80% ; /* 日記本体の横幅を全体の80%に */
margin-left:1em ; /* 左側に一文字分の余白 */
float:left ; /* 左側に配置して回り込み設定 */
}
div.infobar {
font-size:80% ; /* フォントのサイズを80%に */
color:#cccccc ; /* 文字色 */
background-color:#000 ; /* 背景色 */
width:17% ; /* サイドバー部分の横幅を全体の17%に */
margin-right:1em ; /* 右側に一文字分の余白 */
padding:0.2em ; /* 内側の余白設定 */
border:1px #ffffff solid ; /* 枠線の設定 */
float:right ; /* 右側に配置して回り込み設定 */
}
サンプル文書6。ワハハ、これはひどい。ただ「サイドバーが付きました」以上のものではないな。しかも、ちゃんとサイドバーとして表示されてゐるのはOperaだけときたもんだ。MozillaもNetscapeもInternetExplorerもダメである。widthを%指定しておきながら、余白をemで指定してゐる様ではきちんと表示される方が不思議なのだ。
ここからは試行錯誤あるのみ。理屈だけで上手くいくならWEBデザイナーの方々も苦労なんかしないのだ。苦労させないでくれよう。
‥‥しばらく試行錯誤を繰返し、なんとか落着いた。
div.main {
width:78% ; /* 日記本体の横幅を全体の78%に */
margin-left:1% ; /* 左側に1%の余白 */
padding:0 ; /* 内側の余白設定 */
float:left ; /* 左側に配置して回り込み設定 */
}
div.infobar {
font-size:100% ; /* フォントのサイズを100%に */
color:#cccccc ; /* 文字色 */
background-color:#000 ; /* 背景色 */
width:18% ; /* サイドバー部分の横幅を全体の18%に */
margin-right:1% ; /* 右側に1%の余白 */
padding:0.2em ; /* 内側の余白設定 */
border:1px #ffffff solid ; /* 枠線の設定 */
float:right ; /* 右側に配置して回り込み設定 */
}
marginも%指定にして、widthの値をすべて合計しても100%に満たない様にすれば問題なく収まつた。もしかしたら「最初から問題ないぢやないか」と思はれた方もゐるかもしれないが、私の閲覧してゐる環境は少々特殊である。タブレットPCのたて画面モードを常用してゐるため、画面の横幅は768ピクセル。WEBブラウザを最大化してもウインドウの横幅は700ピクセルがいいところで、かういふ状態でサイドバー表示をしようとすると結構設定がタイトになつてしまふのだ。ともあれなんとか収まつたので、サイドバーの中身に取り掛からう。サンプル文書7。
