「メニューによってHeaderとContentを上下分離するような形(width: 940pxから無限)にしたいのですが、どの値を変更すれば良いかご教授いただけないでしょうか。」
次の記事に何を書こうかな、と考えていた所、コメントでこのような質問をいただきました。たまたまそのようなデザインでテーマをいくつか作成したところでもありましたので、よい機会かもしれないと思い、今回はこのことについて考えてみたいと思います。
出来上がり予想図
メニューの背景がブラウザの領域いっぱいに広がり、かつメニュー自体はもとのエリアに収まっている、というデザインですね。背景が水平に分かれているこのようなデザインはよく見かけます。考え方が分かればいろいろな場所に応用できますので、ぜひこの考え方をマスターしてみて下さい！
Twenty Tenの構成を再確認
では、まずTwenty Tenの構成を再確認してみましょう。
Twenty Ten テーマの構成（レイアウト）-1に詳しく書いてあります。
まず、「wrapper」というidのついた全体の囲みがすべての要素を囲んで中央に表示させていることに注目します。
囲みのエリアを広げる
囲みから一つの部分だけ飛び出させるのは難しいので、まずはこの「wrapper」の領域を広げてあげましょう。
#wrapper
{
width: 100%;
}
width: 100%というのは、そのエリアいっぱいに、という事ですので、「wrapper」の幅を100%にしてあげることで、他の部分も広がる事ができるようになります。
さて、これでどのような表示になるか見てみましょう。
あらあら、メニューが左にずれていますね。でもこれで「wrapper」が広がったことが分かります。
メニューの背景エリアを広げる
メニューが左にずれてしまった事はひとまず置いておいて、このメニューの背景色がブラウザいっぱい広がるようにしてみましょう。
メニューが含まれるエリアはid「access」です。
/* =Menu
-------------------------------------------------------------- */
#access {
background: #000;
display: block;
float: left;
margin: 0 auto;
width: 940px;
}
ここを見ると分かるように、「access」は940pxの幅が指定されていますので、「wrapper」のとき同様に広げてあげればよい訳です。
#wrapper,
#access
{
width: 100%;
}
さっきのCSSに「access」をつけたしました。
どうでしょうか。黒い背景部分が広がりましたね。
中央に寄せるということ
ここでいままで全てのエリアが中央にいてくれたのはどうしてだったのか思い出してみましょう。
/* The main theme structure */
#access .menu-header,
div.menu,
#colophon,
#branding,
#main,
#wrapper {
margin: 0 auto;
width: 940px;
}
}
Twenty Tenの元々のCSSのこの部分です。「margin: 0 auto」で、左右のマージンを自動で同じ値にしています。つまりこれが中央に持ってくる、ということですね。
メニューは部分は「access」の中に入っています。ですから、この「access」に対して中央に寄せてあげます。
#access .menu-header,
div.menu
{
margin: 0 auto;
width: 940px;
}
さぁ、できたと思ったら。。
さあ、うまくいったと思ったら。。
わかりますか？ブラウザのはじっこの方に隙間が！！
これは「wrapper」に左右20pxずつの余白が設定されているためです。
wrapperの余白を消す
という訳で、「wrapper」の余白を消してあげましょう。
#wrapper {
padding: 0
}
上下にも隙間が
また、このままですと、「wrapper」は幅は100%にしていますので大丈夫ですが、上下の部分をよく見ると、背景と「wrapper」の部分の色の段差が残ります。
少し分かりにくいのですが、まるで囲んだ部分です。下の方にも同様に色の段差ができます。
marginやpaddingなどで調節するか、
body {
background: #fff;
}
などとして色の段差をなくしてあげるとよいと思います。
ちょっとしたでさらにひと味
「access」の部分に背景画像を指定してもよいですし、「access」とメニューの部分には違う色や背景などを指定する事ができます。ちょっとしたでデザインの幅が広がりますね。
また、同じような考え方で、フッターの背景のみ幅いっぱいにする、など応用がきくと思いますので色々やって見て下さいね。
質問主のトモです。
記事にてご教授いただけるなんてビックリしました！
そして無事にメニューバーを画面いっぱいに広げることができました！！
さらにカスタマイズを楽しんでみます。
ありがとうございました！！！
トモさん
よかったです♪
いつも参考にさせて頂き、感謝しております。
メニューバーのサイズを保ったまま、wrapperの幅を100%にしたいのですが、どのようにすればよろしいのでしょうか？
どうしてもメニューバーが左に寄ってしまいます。
ヒロ さん
wrapper以外にどこを100％の幅にしたいかによると思うのですが、
例えば、#headerか#mastheadに、 margin: 0 auto; と width: 940px; を設定してみてはどうでしょう？
早速のご返信ありがとうございます！
「フッターの背景のみ幅いっぱいにする」を実現しようと思っていました。
後ほど試させて頂きます！
あっさり解決しました！
ありがとうございます。
これからも本サイトを参考にさせて頂きます。
WordPressを使い始めたときから参考にさせて頂いて、感謝しております。
自分はこの記事とはちょっと違って、#headerからsite-titleとsite-descriptionを除いたエリアに、帯のように画面の隅まで広がる背景を入れたいのですが、どのようにすればよろしいのでしょうか。とりあえずdivで囲んで、background-colorで色を指定してみたのですが、変わらないようでした。
わかりづらいうえに、記事の内容とあまり関係なくてごめんなさい。
koukiさん
はじめまして。
よく読んで下さっているのですね、ありがとうございます。
お尋ねの件ですが、ヘッダーのイメージとメニューの後ろに背景を入れたい、という事でしょうか。
divで囲んだ、という事ですが、どこからどこまで囲みましたか？
状況がわからないので、推測で書きますね。。
ヘッダーのイメージは「branding」のなか、メニューは「access」の中、とヘッダーの中でも入っている場所が違います。
例えば、ヘッダーのイメージを、「access」の中に入れてしまうというのは、どうでしょうか？
そうすると、一つのdivに入りますので、少し操作がしやすくなるのではないかと思います。
元々、設定されている部分に気をつけて、CSSを上書きして、試してみて下さい。
丁寧に返信してくださり、ありがとうございます。
自分が思っていたそのままの意味を理解していただけて良かったです。
現在はヘッダーイメージのスペースに新着記事のサムネイルを入れるようにしてしまっていて、ご教授いただいた通りの条件では試せていないのですが、とりあえずヘッダーイメージをaccessの中に入れる方法を試してみました。するとaccessの黒い背景が大きくなってしまって、思ったとおりの見た目にはなりませんでした。他のdivに含めたり、逆にまわりに背景をつけるという方法も思いついたのですが、とりあえずサイトを形にしてみることにしました。折角教えていただいたのにごめんなさい。
今後も何かあると思いますので、その時はまたよろしくお願いします。
koukiさん
うまくいったでしょうか。
ソースを見る事ができないので、あまりきちんとしたお返事ができなくて残念です。
htmlがきちんとしているか、CSSがどこまできいているか、
など検証できる物も色々あるので、そういうものを使いながら、
じっくり見ていくと、あっさり解決するかもしれません。
いろいろ試してみて下さいね。