ヘッダー・フッター・ナビメニューなどを横幅いっぱいに広げるCSSの書き方-Twenty Twelve篇-

  • このエントリーをはてなブックマークに追加
  • 0
Twenty Twelve

よく他のウェブサイトをデザインの参考に見ていると、ヘッダーの背景やフッターの背景、またグローバルナビゲーションメニューなどが横いっぱいに広がっているデザインを見かけます。サイトコンテンツは中央に配置されているのに、背景だけ横いっぱい、ブラウザいっぱいに広がっているのです。

以前、Twenty Eleven でこのようなデザインに変更するための方法を記事にしました。今回は Twenty Twelve で同じようにできないかやってみましたので、その方法をお伝えしたいと思います。

基本的な考え方は Twenty Eleven の場合と同じですが、Twenty Twelve の場合、元の CSS に書かれているある記述のせいでつまずいてしまいました。そのつまずき部分を解消し、ヘッダーやフッターなどの背景をブラウザの画面いっぱいに広げ、ダイナミックなレイアウト・デザインへと変更する方法をお伝えしたいと思います。

基本的な考え方はこちらにまとめていますので、興味のある方はご参考ください。

メニューやヘッダー背景だけをブラウザの横幅いっぱいに広げる方法
これ、よく使う CSS テクニックなのでメモしておきます。サイトの横幅を超えて、ヘッダーやメニューをブラウザの画面一杯に広げる方法です。WordPress の Twenty Eleven に関してのメモですが、CSS のテクニックですし基本は同じなのでどんなテーマでも( WordPress じゃなくても)応用ができると思います。 ...
【続】横幅いっぱいのヘッダーやフッターにするCSSテクニック
ヘッダーやフッターなどがブラウザの横幅いっぱいに広がっているウェブサイトをよく見ると思います。そういった表現を実現しようという趣旨です。スタイルシートを活用して、画面いっぱいに広げたいと思います。 以前、どのような考え方でCSSを変更し横を画面いっぱいに広げればいいのかということをまとめたのですが、実はある問題が発生していました。 ...

スタイルシート(子テーマ)への記述内容

全てに共通する記述

横幅を広げたい部分に関する記述

Twenty Twelveの基本となるパーツのセレクタはこちら

ヘッダー #masthead
グローバルメニュー #site-navigation
.main-navigation
※注
フッター #colophon

注)グローバルメニューのセレクタについて

グローバルメニューのデザインを指定しているセレクタは、上記の id や class 以外にもいくつもあります。メニューをどのようにカスタマイズしているかで、指定すべきセレクタが変わってくるようです。

特に Twenty Twelve のグローバルナビメニューは、上下に 1px のボーダーが引かれていますが、実は上記の 2 つのセレクタでは、このボーダーまで横に伸ばすことができません。

ボーダーも横に伸ばしたい場合は、以下のセレクタを、左右のマージン、パディングともに引き延ばす必要があります。

デフォルト状態のグローバルナビメニュー

デフォルト状態のグローバルナビは、作成した固定ページへのリンクが順番に表示されるようになっています。1460 行目からの記述にマージンやパディングを追記すると、ボーダーも含めて横幅を広げることが可能です。

カスタムメニューで変更した場合のグローバルナビメニュー

カスタムメニューで独自のメニューを作成し、グローバルナビに適用させた場合は、上記のセレクタ以外にも以下のセレクタが使えます。

2013.06.29 追記

Twenty Twelve を使っているサイトを複数確認したところ、別のサイトでは #menu-global-nav が使われていませんでした。代わりに、【 #menu-main 】と表示されていました。どんなセレクタが指定されているかは、Firebug( Firefox のプラグイン)などを使ってサイトごとに確認した方がいいみたいです。

Twenty Twelveでの注意点とは?

Twenty Eleven の記事でもお伝えしたように、基本的な考え方は変わりません。なので、別に Twenty Eleven でなくても Twenty Twelve でなくても使えるテクニックです。

ただ、Twenty Twelve の場合はデフォルトの CSS で影響で、うまくいかず、ちょっとした工夫が必要になります。

以下は上記設定の考え方になりますので、興味のある方はどうぞ・・・。

グローバルナビゲーションメニューだけ広がらない

Twenty Eleven の場合と同じようにスタイルシートを記述した場合、グローバルメニューの部分がブラウザいっぱいに広がってくれません。以下のようにある範囲までしか広がらないのです。

ブラウザ全体に広がらないよ横幅

その範囲はというと、どうやら【 .site 】というセレクタで指定されている部分のようです。

なぜ、グロナビはサイトの範囲内までしか横に広がってくれないのか?

その原因はスタイルシートに記述されている【 overflow 】の値にありました。デフォルトでは以下のように記述されています。

この【 overflow 】ははみ出た部分をどうするか、ということを指定しています。デフォルトの指定は【 hidden 】なので、はみ出た部分は非表示になります。つまりこれが原因で横に広がった部分が表示されず、サイトの範囲内に収まったように見えていたわけです。

この部分を表示させるには、【 overflow 】の値を【 hidden 】から【 visible 】へ変更する必要があります。これで、グローバルナビゲーションメニューも左右横にちゃんと広がってくれます。

  • このエントリーをはてなブックマークに追加

無料メール講座

WordPress を活用している
社長、フリーランス、ウェブマーケターのための

ホームページ制作の 3 つの間違い
売上を上げるフレームワークを無料公開中……

無料メール講座

もっと楽に、簡単にホームページを作れないものだろうか?
もっと楽に、簡単にインターネットから集客できないものだろうか?
もっと楽に、簡単にインターネットから売上を上げられないものだろうか?

そんなことを思ったことがある方のために、このページを用意しました。

私たちは、ウェブマーケティングに携わる中で、多くの人が陥っているある「勘違い」に気づきました。

その勘違いとは・・・

コメント

  1. 匿名 より:

    役立った!

コメントをどうぞ

メールアドレスが公開されることはありません。