変更前の状態
このサイトのトップページ（メインテンプレートで表示されているページ）はスタイルシートで段組されています。下の図のように右側の上に左側が重なっているイメージです。（スタイルシートもダイエット NO.9で修正してます）
全体の幅が780pxです。左側が600px、右側が180pxで左サイドの右端に余白を10px指定したいと思います。右側は幅180pxにしておきたいので、左側の幅を少し狭くします。
スタイルシートの修正場所は2箇所あります。
左側の幅を600px→590pxに。（これで左と右の間に10pxの余白ができます。）
右側に内側の余白を設定。（左に600pxの余白を設定することによって段組が崩れることを防ぎます）
/*左側関連*/
#left {
float: left;
width: 590px;
overflow: hidden;
line-height: 150%;
text-align: left;
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
}
/*右側関連*/
#right {
margin-top:10px;
>margin-left:600px;
line-height: 150%;
text-align: left;
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
}
変更後の状態
#left {
float: left;
width: 590px;
overflow: hidden;
line-height: 150%;
text-align: left;
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
}
/*右側関連*/
#right {
margin-top:10px;
>margin-left:600px;
line-height: 150%;
text-align: left;
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
}
ちょっとずつ見やすくなってきました♪
こうやって気になるところを修正していくと、だんだんイメージに近づいていって楽しくないですか？！(*^^)
