WordPressのデフォルトテーマであるTwenty Tenのレイアウトを変えることについて考えてきましたが、今日は1カラムにしてみたいと思います。

Twenty Tenにはデフォルトで1カラムのテンプレートが入っていますが、残念ながら、投稿ではなく、ページのテンプレートとして呼び出す事しかできません。

1カラムのページテンプレートの使い方

Twenty Tenの1カラムのページテンプレートは、1カラムにしたい「ページ」の編集画面から設定します。「ページを編集」の公開ボタン下あたりにある「ページ属性」のところで使いたいテンプレートを選びます。

デフォルトから、One column,no sidebarと書いてある1カラムのテンプレートを選択してみます。

このようにサイドバーのない状態でページが表示されます。

1カラムのページテンプレートのコンテンツエリアを広げる

この１カラムのページテンプレートでは、サイドバーは表示されませんが、両脇が大きく開いていますね。これはこれでよいのですが、幅いっぱいにコンテンツを広げたいときはどのようにしたらよいのでしょうか。

Twenty Tenのstyle.cssをみると89行目あたりから

/*
LAYOUT: One column, no sidebar
DESCRIPTION: One centered column with no sidebar
*/

.one-column #content {
	margin: 0 auto;
	width: 640px;
}

と書かれていますので、子テーマの　CSSに

.one-column #content {
	width: 940px;
}

としてやればOKです。

全体を1カラムにする

いままで書いたのは、「ページ」のテンプレートについてなので、そのままではこのテンプレートを投稿に使うことができません。需要があるのかどうか分かりませんが、その他の部分を1カラムにする方法を考えてみたいと思います。コンテンツの部分を幅いっぱいの940px、その下にサイドバー２つを横並びさせる、というレイアウトにしてみます。

1. サイドバーを引っ張り込んでいたのをやめさせたい（Twenty Tenのレイアウトを変える(1)参照）ので、コンテンツを囲むcontainerのfloatをやめて、マージンをなくす。

   #container {
   	float: none;
   	margin: 0;
   }
   

   これで、サイドバーを引っ張り込んでいたのをやめさせます。

2. コンテンツの幅を940pxいっぱいに広げ、マージンをなくす

   #content {
   	margin: 0 auto;
   	width: 940px;
   }

   ここまででコンテンツの幅が広がり、サイドバーが設定されていれば、コンテンツの下に、右にfloatした状態で表示されるはずです。
   

3. サイドバーを左右に

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

このようになりました。

サイドバーは使わずに、フッターのウィジェット４つをいかしてもよいでしょうし、サイドバー２つ、フッターのウィジェット４つの６つのエリアがコンテンツの下にくる、充実したフッターを持つデザインにしても面白いのではないかと思います。