レイアウト調整:3カラムのレイアウト
デフォルトのテーマTwenty Tenを自己流にデザインしていく過程を記事にしています。
ヴィジェットを3カラムにする
デフォルトのテーマでは、ヴィジェットのサイドバーは、右側に配置されています。このサイドバーを2段するというレイアウトにしていきます。
構成をみると、内容や記事は「#container」「#content 」、ヴィジェットエリア1のサイドバーは「#primary」、ヴィジェットエリア2は「#secondary 」のdivでくくられています。
デフォルトのスタイルシートの中の#container&#contentを次のように変更します。
#container {
float: left;
margin: 0 -240px 0 0; ⇒0 -460px 0 0 ;へ
width: 100%;
}
#content {
margin: 0 280px 0 20px; ⇒margin: 0 460px 0 0;へ
}
次に#primary,#secondaryを次のように変更します。
#primary,
#secondary {
float: left;
overflow: hidden;
width: 220px;
}
・・・を以下のように分離させ記述します。(別々の位置関係になるから)
#primary {
float: left;
width: 220px;
}
#secondary {
float: right;
width: 220px;
}
※
#secondary {
clear: right;
}については削除です。
設定は220pxでサイドバーを右側に並べて表示させる内容です。
以上の記述をすると、両サイドに表示されます。
上記のうちmarginを指定しないと#contentの下に回りこんで表示されてしまいます・・・
サイドバー右側2段表示のcss記述例
#container {
float: left;
margin: 0 -460px 0 0;
width: 100%;
}
#content {
margin: 0 460px 0 0;
}
#primary {
float: left;
width: 220px;
}
#secondary {
float: right;
width: 220px;
}
※今は、3カラム両サイドで行っています。