デフォルトテーマ:レイアウト調整④3カラム(片側)

レイアウト調整: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カラム両サイドで行っています。

master の紹介

サイト作成で、ワードプレスというものを知り、phpやcssの初心者なりに自己流にカスタマイズしていこうと思っています。 ワードプレスの機能やプラグインを使えば結構楽しくサイトが作れます。
カテゴリー: デフォルトテーマをカスタマイズ   パーマリンク

コメントは受け付けていません。