前回でWordPressのデフォルトテーマであるTwenty Tenを3カラムにする方法を考えました。次に、コンテンツを中央に、左右にサイドバー、という3カラムを作ってみようと思います。

簡単な3カラムの作り方

3カラムの作り方はいろいろあります。最も単純なのは「左サイドバー、コンテンツ、右サイドバー」と並べて、floatさせてしまうことでしょう。でもこれでは、メニューなどのサイドバーの内容がhtmlの上の方にきてしまうので、SEO上からもあまりよく無いと言われていますね。

そこで、よく使われるやり方にこんなものがあると思います。

コンテンツ部分と左サイドバーを１つのdivでくくって右サイドバーとで左右に振り、divの中でまたコンテンツ部分と左サイドバーを左右に振る方法です。これですと、コンテンツ、左サイドバー、右サイドバーの順番で書かれていても、3カラムになりますので、SEOの上からもよいと言われています。

３カラムにしにくいTwenty Ten？

ところがTwenty Tenの構成を見てみると、「コンテンツ、左サイドバー、右サイドバー」の順に並んではいるのですが、都合良く「コンテンツ、左サイドバー」の２つをくくってくれるdivがありません。

テーマファイルの方を書き換えて、一つのdivを足してしまえばすむ話なのですが、今回は「CSSでかんばる」という趣旨で書き始めているので、なんとかCSSのみで実現する方法を考えようと思います。

左のサイドバーにコンテンツを飛び越えて一番左にきてもらい、コンテンツにはその分の隙間をあけてもらわないといけないようです。

containerのマージンをなくす

今回は一番はじめに、いつもややこしいことになるcontainerにあるマイナスのマージンをなくしてしまいたいと思います。

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

↓↓↓↓↓↓↓

#container { margin: 0 ; }

コンテンツに両脇を開けてもらう

それでは、コンテンツにサイドバーが両脇に入れるように隙間をあけてもらいましょう。前回同様、サイドバーを180pxで考えます。
コンテンツとのマージンを考え、両脇に200pxのマージンをとります。

#content  { margin: 0 200px 0 200px; }

この状態で各部部分に背景色があったとしたらこんな風に見えるはずです。

デフォルトではサイドバーは２つとも右にfloatしているので、container >content　の右下に行ってしまいます。また、containerが100％の幅ですのでカラム落ちしている状態です。

サイドバーを左右に

サイドバーを左右に振り分けてみます。

#primary {
	float: left;
	width: 180px;
}
#secondary {
	float: right;
	width: 180px;
}

おお！だいぶ近づいてきたような気がしますね。後はなんとかサイドバーに移動してもらいたいところです。

左サイドバーを移動させる

左サイドバーについて考えると、幅が940px（100%）あるcontainerにひっかかってfloatしたいのにそれ以上いけない状態、ともいえると思います。（このたとえがあっているのか、少し不安ですが．．）

940px左に来て欲しい。そうです！あのマイナスのマージンをつかってみましょう。

#primary {
	float: left;
	width: 180px;
       margin: 0 0 0 -940px;
}

うまくいきました。

右サイドバーを移動させる

右サイドバーの状態を考えると、このような感じです。

#secondary {
	float: left;
	width: 180px;
       margin: 0 0 0 -180px;
}

このようになりました。

Twenty Tenをコンテンツ中央の3カラムにするまとめ

今までの事をまとめるとこのようになります。

#container {
    float: left;
    background: ;
    margin: 0 0 0 0 ;
}
#content {
     margin: 0 200px 0 200px;	
}
#primary {
    float: left;
    width: 180px;
    margin: 0 0 0 -940px;
}
#secondary {
    float: right;
    width: 180px;
    margin:  0  0 0 -180px;
}

3カラムにするにするにはもうひとつ方法があります。

#container {
   float: left;
    margin: 0 -200px 0 0 ;
}
#content {
   margin: 0 200px 0 200px;	
}
#primary {
   float: left;
   width: 180px;
   margin: 0 0 0 -740px;
}
#secondary {
	float: left;
	width: 180px;
	margin:  0 0 0 20px ;
}

他にもあると思いますが．．

それぞれのカラムの幅やマージンなどはお好きなようにアレンジしてみて下さい。考え方の部分を見ていただければ、計算も少し分かりやすくなってくれるのではないかなぁ、と思って長々と書いています。

また、一応色々なブラウザで確認はしているつもりではありますが、「なんか違うよ！」とかありましたら、教えていただけたらありがたいです。