Twenty Tenのレイアウトを変える(1)で、Wordpress のデフォルトテーマであるTwenty Tenで、コンテンツを左に、サイドバーを右にしている仕組みについて考えました。

これをもとにTwenty Tenのレイアウトを変えていきたいと思います。

コンテンツとサイドバーの幅を変えてみる

デフォルトではサイドバーに当たる「primary」の幅が220pxになっています。
これを少し狭く、180pxにしてコンテンツの幅をさらにゆったりととってみようと思います。

1. サイドバーの幅を変更

   変更前
   #primary { width : 220px ;}

   変更後
   #primary { width : 180px ;}

   まず、これでサイドバーの幅が縮まります。

2. 「container」のマイナスのマージンも、サイドバーの幅にあわせて、変更します。

   変更前
   #container { margin: 0 -240px 0 0;}

   変更後
   #container { margin: 0 -200px 0 0;}

   20pxの余裕ほそのままで計算します。

3. コンテンツの幅を広げます。220px→180pxで40px分縮めたので、40px分広げます。ただし、コンテンツの幅は左右のマージンで設定されているので、右のマージンを40px分狭くすることになりますね。（あ〜〜、ややこしい;）

   変更前
   #content {margin: 0 280px 0 20px;}

   変更後
   #content {margin: 0 240px 0 20px;}

という訳で、コンテンツ幅の調整ができました。マイナスのマージンを使っているので、計算が面倒ですね。

サイドバーを広げるときはこの逆に、また、コンテンツとサイドバーのあいだの余白の調整も、この方法を応用すればうまくいくと思います。

（参考）コンテンツだけひろげてみる

今現在(2010年10月20日)、このサイトではコンテンツ幅のみ広げて、コンテンツとサイドバーの余白を少し縮めてあります。また、左のマージンも外して、すべて左にそろえてあります。

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

このような感じです。違いが微妙すぎですが、よろしければ参考にしてみて下さい。

次（こそ）は、コンテンツとサイドバーの左右の入れ替えをやってみます。