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

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

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

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

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

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

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

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

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

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

フッターウィジェット4は、「#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;  
}

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です