Tenを3カラムにする方法を考えました。次に、コンテンツを中央に、左右にサイドバー、という3カラムを作ってみようと思います。簡単な3カラムの作り方3カラムの作り方はいろいろあります。単純なのは「左サイドバー、コンテンツ、右サイドバー」と並べて、floatさせてしまうことでしょう。これでは、メニューなどのサイドバーの内容がhtmlの上の方にきてしまうので、SEO上からもあまりよく無いと言われていますね。そこで、よく使われるやり方にこんなものがあると思います。コンテンツ部分と左サイドバーを1つのdivでくくって右サイドバーとで左右に振り、divの中でまたコンテンツ部分と左サイドバーを左右に振る方法です。これですと、コンテンツ、左サイドバー、右サイドバーの順番で書かれていても、3カラムになりますので、SEOの上からもよいと言われています。Tenの構成を見てみると、「コンテンツ、左サイドバー、右サイドバー」の順に並んではいるのですが、都合良く「コンテンツ、左サイドバー」の2つをくくってくれるdivがありません。テーマファイルの方を書き換えて、一つのdivを足してしまえばすむ話なのですが、今回は「CSSでかんばる」という趣旨で書き始めているので、なんとかCSSのみで実現する方法を考えようと思います。左のサイドバーにコンテンツを飛び越えて一番左にきてもらい、コンテンツにはその分の隙間をあけてもらわないといけないようです。containerのマージンをなくす今回は一番はじめに、いつもややこしいことになるcontainerにあるマイナスのマージンをなくしてしまいたいと思います。}コンテンツに両脇を開けてもらうそれでは、コンテンツにサイドバーが両脇に入れるように隙間をあけてもらいましょう。前回同様、サイドバーを180pxで考えます。コンテンツとのマージンを考え、両脇に200pxのマージンをとります。}この状態で各部部分に背景色があったとしたらこんな風に見えるはずです。右下に行ってしまいます。containerが100%の幅ですのでカラム落ちしている状態です。サイドバーを左右にサイドバーを左右に振り分けてみます。180px;}おお!だいぶ近づいてきたような気がしますね。後はなんとかサイドバーに移動してもらいたいところです。左サイドバーを移動させる左サイドバーについて考えると、幅が940px(100%)あるcontainerにひっかかってfloatしたいのにそれ以上いけない状態、ともいえると思います。(このたとえがあっているのか、少し不安ですが..)940px左に来て欲しい。!あのマイナスのマージンをつかってみましょう。-940px;}うまくいきました。右サイドバーを移動させる右サイドバーの状態を考えると、このような感じです。-180px;}このようになりました。Tenをコンテンツ中央の3カラムにするまとめ今までの事をまとめるとこのようになります。-180px;}3カラムにするにするにはもうひとつ方法があります。;}他にもあると思いますが..それぞれのカラムの幅やマージンなどはお好きなようにアレンジしてみて下さい。考え方の部分を見ていただければ、計算も少し分かりやすくなってくれるのではないかなぁ、と思って長々と書いています。一応色々なブラウザで確認はしているつもりではありますが、「なんか違うよ!」とかありましたら、教えていただけたらありがたいです。WordPressのテーマでWeaverはなんかすごい。Webourgeon。