【Wordpress /Twentytwelve/CSS関連】

ヘッダー部分とグローバルナビ部分の横幅を画面いっぱい(画面を縮小した場合、可変で同比率で縮小する。 margin : 0 auto;的な?)

をしたいのですが、どこにどういれたらいいかご教示いただけたら幸いです。
どうぞよろしくお願いいたします。

たとえば、このサイトの緑色部分のグローバルメニューのようなカタチだったり、
http://animaldoctor.jp/
たとえば、このサイトのピンク色部分のグローバルメニューのようなかたちだったり、
http://www.chifure.co.jp/naritai-kirei/

をTwenty twelveの
①ロゴ部分
②グローバルナビ部分
③フッター部分
で再現したくおもっておりました!

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/12/18 22:55:38
  • 終了:2012/12/25 01:29:56

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922012/12/23 00:44:14

ポイント200pt

http://twentytwelvedemo.wordpress.com/ で確認。
こんな感じでしょうか…

#menu-main-menu {
  background-color: pink;
  text-align: center !important;
}
.site {
  margin-top: 0 !important;
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}
.site-header hgroup,
.site > *:not(header) {
  padding: 0 2.85714rem !important;
}
id:hal-star

どうもありがとうございます。いろいろ試したのですが、うまくいきませんでした、、、ご回答いただけたことに感謝しております。

2012/12/25 01:29:47
  • id:fut573
    例に出しているサイトをブラウザのウィンドウサイズを少しずつ小さくしながら、眺めてみてください。
    ナビの中身はある一定のサイズより小さくならないと思います。
    例示されているサイトの場合、可変boxの中に固定サイズの画像の群れをmargin:0 auto;でならべているのです。
    (可変boxと固定サイズの画像の背景色が同じであるため、あたかも可変であるかのように見えるだけです)

    Twentytwelveの場合、この外側のboxに当たる部分が可変ではなく固定サイズなので、同じ事をやろうとすると結構大規模なカスタマイズが必要になるかと思います。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません