TwentyTwelveメニューボタンの削除

レスポンシブデザインで横幅が600pxを下回ると、ナビゲーションメニューがボタン化されますが、なんかイマイチだったので、style.cssを修正してみました。

ひとまず、テーマ本体は修正しない方針で進めているので、今回も子テーマでの作業です。

参考にさせていただいたのは、sand a lot Web & Music Create様の記事で
Twenty Twelveでメニューをボタン化させない方法です。

作業手順

  1. 親テーマのstyle.cssから、子テーマのstyle.cssに1460~1534行目を複製
    ※この範囲のCSSは、横幅600pxを下回った時の挙動です。
  2. 再度、親テーマのstyle.cssから、子テーマのstyle.cssに1421行目と1487~1491行目、1508~1520行目、1584行目を複製
    ※この範囲のCSSは、横幅600pxを上回った時の挙動です。

横幅600px以下表示時の文字サイズ等への変更

ざっくりですが、修正した子テーマCSSです。
先ほど1.で複製した範囲内の作業です。

.main-navigation li { margin: 0 14px 0 0; margin: 0 1rem 0 0; position: relative; font-size: 9px; font-size: 0.642857143rem; } 

29、30行目でマージンを小さくしています。
32、33行目は、追加することでナビゲーションメニューのフォントサイズを小さくしています。 

.main-navigation li ul li a { background: #efefef; border-bottom: 1px solid #ededed; display: block; font-size: 9px; font-size: 0.642857143rem; line-height: 1.636363635; padding: 6px 7px; padding: 0.428571429rem 0.5rem; width: 90px; width: 6.428571428rem; white-space: normal; } 

55、56行目は、先ほど小さくしたフォントサイズに合わせて小型化。
57~61行目はお好みで縮小します。特に60,61行目は小さくしないと子メニューを表示したときに、はみでてしまいます。
※当サイトでは、子メニューを使ってないので、どうでも良かったりしますけど(笑)

横幅600px以上表示時の修正

ここは修正箇所は1箇所だけです。
先ほど2.で複製した範囲の作業です。

 .main-navigation li { margin: 0 40px 0 0; margin: 0 2.857142857rem 0 0; position: relative; font-size: 12px; font-size: 0.857142857rem; } 

6、7行目でフォントサイズの修正を追加しています。 
これを追加しないと、600px表示時も先ほど縮小したフォントサイズで表示されてしまいます。

これで、iPhoneから見ても、Macから見ても、良い感じで表示されるようになりました。

スポンサーリンク
レクタングル広告(大)
レクタングル広告(大)
スポンサーリンク
レクタングル広告(大)