WordPressのデフォルトテーマであるTwenty Tenのレイアウトのレイアウト変更について考えてきましたが、今日はいよいよ3カラムにしてみたいと思います。普通に３カラムを作る事は、それほど大変な事ではないのですが、Twenty TenでCSSのみの変更で３カラムを作ろうと思うとちょっと面倒な感じがしてしまいますね。

2つ目のサイドバーはどこに？

Twenty TenのレイアウトのCSSがどのようになっていたのかもう一度思い出してみます。

#container {
	float: left;
	margin: 0 -240px 0 0;
	width: 100%;
}
#content {
	margin: 0 280px 0 20px;
}
#primary,
#secondary {
	float: right;
	overflow: hidden;
	width: 220px;
}
#secondary {
	clear: right;
}

「#secondary」が２つ目のサイドバーで、外観＞ウィジェットの「ウィジェットエリア２」に入れた内容が表示されます。（Twenty Ten テーマの構成（レイアウト）-1）「ウィジェットエリア２」に項目を入ただけでは、「ウィジェットエリア１」の下に縦に並んで表示されてしまいます。

サイドバー２つを右に横並びにしたい

サイドバー２つを右に横並びにしてみたいと思います。サイドバーが２つとも右にfloatさせてあったので、「primary」を左に、「secondary 」を右に振り分けてみます。

変更前
#primary,#secondary { float: right; }

変更後
#primary{ float: left; }
#secondary { float: right; }

ところが、これだけではほんのわずかしか動いてくれません。「content」の部分が広く場所をとっているので、つっかえてしまっているような状態です。

コンテンツ部分のマージンを調整してみる

サイドバーの幅が220 pxなので、２つ分のあきが欲しい訳ですから、「content」の右に440pxのマージンをとってみます。

#content {
       margin: 0 440px 0 20px;
}

まだ動きません。そうです、「container」が邪魔しているのですね。あの、面倒なマイナスのマージンです．．．

containerのマージンも調節する

containerのマイナスのマージンも倍にしてみます。

#container { margin: 0 -440px 0 0; }

できました！これが右にサイドバー２つを横並びさせる３カラムに変更する原理です。

分かりやすいように、カラムとカラムの間隔を計算に入れていませんので、このままではすべてがつながって表示されてしまいます。それに、サイドバー１つが220pxでは広すぎて、コンテンツ部分がとても狭くなってしまいます。今までの考え方をもとに調節してみます。

3カラムにする仕上げ

サイドバーの幅を180pxにすることにします。コンテンツの左のマージンも今回はいらないので0にしてしまいます。それぞれのカラムの間に間隔を取ります。

#container {
	float: left;
	margin: 0 -380px 0 0;
}
#content {
       margin: 0 400px 0 0;
}
#primary {
	float: left;
	width: 180px;
}#secondary {
	float: right;
	width: 180px;
}

このような感じになりました。マージンなどはお好きな感じでどうぞ。

次は他の３カラムにも挑戦してみようと思います。