うーん、困った。コメント部分を調整したいのに
 いくらやってもトラックバックとコメントが切り替わらない…
 仕方がないからコメントは向こうでやることにします。

 サイドバーを左に持ってきます。
 この作業は「コンテンツ」ページで。
 スタイルシートの#linksを#links-leftに書き換えるのを失念し
 画面横幅いっぱいにサイドバーが広がっていたのは秘密。

 全体像を見るために背景色を消します。
 白い……

 いや、今回夏に向けての改装なのにピンク系の画像を使ったので
 サイト全体を白っぽくデザインしているのですが……うーん……

 背景に色を付けると努力が台無しなので
 全体を1px幅の点線で囲ってみます。

 まだ何となく寝ぼけた感じなので
 画像の下とサイドバー部分の右側に同じボーダー指定。

 そしてずっと気になっていたバグ誘発指定に着手。
 先にやれよって感じです。
 枠組みでwidthとpaddingを同時に指定すると余り良くないとか…
 で、枠組みがこんな具合になっていたのですが
/* -----------枠組------------ */
#container{
margin:0px auto;
width:760px;
color:#9d8e87;
text-align:left;
}
#banner{
padding : 0 30px;
text-align : right;
height:180px;
background : url(http://mimawaka.up.seesaa.net/image/diary.jpg) no-repeat;
border-bottom:dotted 1px #9d8e87;
}

#links-left {
font-weight:normal;
float:left;
width:200px;
padding-top:10px;
padding-bottom:10px;
margin: 20px 5px 0 0;
}
#content {
margin:20px 10px 0 5px;
float:left;
width:520px;
}
#footer{
clear:left;
text-align:center;
margin:0px 30px;
}

 パディングもなー、特にこだわりもないし、見づらかったら
 下位要素でチマチマ修正するか、と思い切って↓
/* -----------枠組------------ */
#container{
margin:0px auto;
width:760px;
color:#9d8e87;
text-align:left;
border:dotted 1px #9d8e87;
}
#banner{
text-align : right;
height:180px;
background : url(http://mimawaka.up.seesaa.net/image/diary.jpg) no-repeat;
border-bottom:dotted 1px #9d8e87;
}
#links-left {
font-weight:normal;
float:left;
width:200px;
border-right:dotted 1px #9d8e87;
}
#content {
float:left;
width:520px;
}
#footer{
clear:left;
text-align:center;
}

 うん!全てが右上に寄った!私のお弁当みたいだ!
 息が詰まるのでカレンダー上と記事タイトル上に
 それぞれ20pxずつパディングを上乗せ。

 サイドタイトル部分がグチャーっとしているけれど
 できるだけ白っぽさを維持したいので太字は却下。
 そのかわり下線のみだったタイトル部分修飾を上下線に。
 微妙に中心を外しているので文字下パディングを3px⇒10px⇒8pxと
 試行錯誤。

 記事部分に余裕が出ているので本当は余白をたくさん入れたいが
 因縁すら感じるほどの長文書きのため、改行対策に横を広げる。
 記事部分を520pxから550pxへ。いじましい努力である。

 よくよく見るとサイドバーと記事の間にひいたボーダーが
 途中で立ち消えている。
 きっとどっちが長いかと言えば記事のはずなので
 サイドバーの右側のボーダー指定を記事部分の左指定に。
 同時にフッタ部分上部にもボーダーをひいて線をつなげる。

 よし、これでブラウザチェック。
 今Sleipnirで編集しているのでIEとFirefoxとOperaとネスケ。
 どれも特にものすごいことにはなっていない。よっしゃ!

 というわけでこんな具合になりました。
 このテンプレはSEOに最高に弱いので
 ここのブログはすぐに替えます;
 記念撮影(笑)
 ブログカスタマイズ

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。