ブログの構造 main sub_main sub_a sub_b
header wrap までのＣＳＳ設定ができて（参照 ）
このような状態です。
ＨＴＭＬをみると（省略してます）
<div id="wrap">
<div id="firstContentsArea">
<div id="subFirstContentsArea">
<div id="sub_a">サイドバーの中身</div>
<div id="main">
<div id="sub_main">記事部分の中身</div>
</div>
</div>
</div>
<div id="sub_b">サイドバーの中身</div>
</div>
wrap内に「firstContentsArea」と「sub_b」があり、
firstContentsAria内に「subFirstContentsArea」があり、
subFirstContentsArea内に「sub_a」と「main」があり、
main内に「sub_main」があるのがわかります。
では、「firstContentsArea」と「subFirstContentsArea」と「main」と「sub_main」と「sub_a」と「sub_b」をＣＳＳ編集画面で検索（Ctrl + F）してください。
見つかったＣＳＳは以下の通りです。
/*
-----------------------------------------------------
ameblo CSS Skin Settings
FileName: common.css
Version: 2005.08.08
Skin for: pink_circle
-----------------------------------------------------
*/
/* ----------------------- MainColumn ----------------------- */
#main {
padding-bottom : 10px ; /*ボックスの下の内側の余白（参照
）*/
}
/*
-----------------------------------------------------
ameblo CSS Skin Layout Settings
FileName: type_a.css
Version: 2005.02.18
Skin for: pink_circle
-----------------------------------------------------
*/
#main{
margin-left : 185px ; /*ボックスの左の外側の余白（参照
）*/
}
#sub_main{
margin-left : 15px ; /*ボックスの左の外側の余白（参照 ）*/
margin-right : 15px ; /*ボックスの右の外側の余白（参照 ）*/
}
#sub_a{
width : 170px ; /*高さ170pxのボックス（参照 ）*/
position : absolute ; /*親ボックスwrapから上0,左15pxに配置（参照 ）*/
left : 15px ;
top : 0 ;
}
#sub_b{
display : none ; /*非表示（参照 ）*/
}
適応させてみると
このようになります。
main のボックスは赤枠。
sub_main のボックスは緑枠。
sub_a のボックスは青枠。
ＣＳＳの指定で、何処が変わったか解かるでしょうか？
sub_aの青ボックスがはみ出ているのは、画像のリスト形式の所為で175px以上幅がある所為です。
文字は折り返しますが画像は折りたためないのでこうなってしまいます。
これからサイドバー内のＣＳＳを指定すればwidth175pxにおさまります（リストマークを消したりです）。
このボックスの配置指定で、２カラム・３カラム…無理やり４カラムなどができます。
ここまで抑えて起きた部分です。
後残りは、サイドバーをどんなデザインに…記事をどんなデザインに…文字を…という細かな設定です。
それは追々やっていきます。