【Twenty Ten】フッターのウィジェットをレイアウト変更

TwentyTenには、フッターウィジェットエリアが4つあります。ウィジェット機能が用意されているので利用してみます。

試しに、それぞれのフッターウィジェットエリアにカテゴリーを入れると、下の画像のように横一列に並んで表示されます。

style.cssの「/* Structure the footer area */」にある「#footer-widget-area .widget-area」を変更して横一列に並んでいるレイアウトを変更して、２行２列にしてみます。
【変更後：style.css】

#footer-widget-area .widget-area {
  float: left;
  margin: 0 10px;
  width: 450px;
}

今度は、「style.css」ファイルの「/* Structure the footer area */」に以下のコードを追加して１行２列と２行１列にしてみます。

#footer-widget-area #first,
#footer-widget-area #second{
  float: left;
  margin: 0 10px;
  width: 450px;
}
#footer-widget-area #third{
  clear: left;
  margin: 0 10px;
  width: 920px;
}
#footer-widget-area #fourth {
  margin: 0 10px;
  width: 920px;
}

フッターウィジェットエリア４を使い、「ホーム」、「お問い合わせ」、「サイトマップ」などフッターによくある項目を作ってみます。

その前に、「外観」⇒「メニュー」で新しいメニュー（footer）を作成します。メニューを作成し「お問い合わせ」、「サイトマップ」ページ（固定ページ）をメニュー（footer）に追加します。

そして「外観」⇒「ウィジェット」より「フッターウィジェットエリア４」にカスタムメニューを配置して「メニューを選択：」の所は作成したメニュー（footer）を選択して保存します。

フッターウィジェット４は、「#footer-widget-area #fourth」に対応しているので、プロパティなどを変更し、「#footer-widget-area #fourth .widget-container 」、「#footer-widget-area #fourth ul ul」、「#footer-widget-area #fourth ul ul li」を追加して表現します。
＊cssに関して参考なるかわかりませんが、こんな感じです。

#footer-widget-area #fourth {
  width: 920px;
  text-align: center;
  margin: 0 10px;
}
#footer-widget-area #fourth .widget-container {
  border-style: none;
}
#footer-widget-area #fourth ul ul {
  width: 920px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #F6F6F6;
  margin: 0px;
}
#footer-widget-area #fourth ul ul li{
  background-image: none;
  display: inline;  
}

フッターウィジェット３にウィジットでテキストを設定してみました。テキストを設定したので、「/* Structure the footer area */」に以下のスタイルを追加します。
＊テキストで文章やリンクなど追加できます。

#footer-widget-area #third .textwidget{
  padding: 5px;
  text-align: center;
}

因みにフッターウィジェット１，２は、今の所一旦削除しておきます。