そろそろ、メインの部分のカスタマイズについて考えてみたいと思います。

ヘッダーについてもまだまだあると思いますが、「CSSでのTwenty tenカスタマイズ」をひととおり考えたら、今度は実際のテーマファイルを編集したりしながら、さらに考えてみたいな、と思っています。

Twenty Tenのレイアウト

さて、まずやってみたい事の代表として、やはりレイアウトの変更という事があるのではないでしょうか。まず、どのように設定されているのか見てみたいと思います。style.cssの67行目当たりに記述があります。

#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;
}

ID名やクラスなどがどのような構成になっているかと、全体のレイアウトについては「Twenty Ten テーマの構成（レイアウト）-1」と「Twenty Ten テーマ　全体のレイアウトのカスタマイズ」でざっと触れているので参考にして下さい。

Twenty Tenでサイドバーを右に寄せているしくみ

まずはこれがどういうことのなのか見てみます。少し分かりにくいので順番にみていきます。

1. まずは「container」が100%の幅でおかれています。
2. 「content」のことは考えずにサイドバーにあたる「primary」だけをおいてみます。右寄せにしても、「container」が100%の幅であるので、見える所にはやってきません
3. そこで「container」にマイナスのマージンを作ってやると、「primary」がそこに引っ張られてやってきます。
4. 「content」をいれてみますが、幅を指定してないので100%の幅になってしまいます。
5. そこで左右にマージンをとります。右は「primary」が充分入るマージンになっていますね

う〜〜ん。float関係の説明は難しいですね。特にこのネガティブマージン。。
分かりやすく書いてみたつもりですが、どうでしょうか。

ちょっと力つきたので、次に続きたいと思います。
コンテンツと、サイドバーの幅の変更、サイドバーを左に、そして３カラムに変更、まで挑戦したいと思います。

＊（注）この図では「container」のなかに「primary」が入っているように見えますが、実際のソースでは「container」＞「content」で、「primary」は外に出ています。「container」と「primary」を「main」で囲っています。