【Twenty Ten】サイドバーを2列分を1列にして、その下は２列のレイアウトにする

投稿カテゴリーを2列分を1列にして、その下に2列のサイドバーを作成します。

スタイルシートを変更したあと、ウィジェットエリアに配置するウィジェットも必要に応じて変更します。

【変更前】

【変更後】

style.cssの/* =Layoutに以下のコードを追加・変更すると上記の画像のようなスタイルになります。

#content {
  width: 540px;
  margin: 0 0 0 20px;
}
#primary {
  float: right;
  overflow: hidden;
  width: 360px;
}
#secondary  {
  float: right;
  overflow: hidden;
  width: 180px;
}
#tertiary {
  float: right;
  overflow: hidden;
  width: 180px;
}

＊記事が少なくてレイアウトが崩れる場合は、sidebar.phpをdivなどで囲む方法があります。
【例】
sidebar.phpのコードを以下のコードで囲みます。

<div id=&quot;sidebar-right&quot;>
・・・・
</div>

そして、style.cssに以下のスタイルを追加します。

#sidebar-right {
  float:right;
  width: 360px;
}