レスポンシブデザインで横幅が600pxを下回ると、ナビゲーションメニューがボタン化されますが、なんかイマイチだったので、style.cssを修正してみました。
ひとまず、テーマ本体は修正しない方針で進めているので、今回も子テーマでの作業です。
参考にさせていただいたのは、sand a lot Web & Music Create様の記事で
Twenty Twelveでメニューをボタン化させない方法です。
作業手順
- 親テーマのstyle.cssから、子テーマのstyle.cssに1460～1534行目を複製
※この範囲のCSSは、横幅600pxを下回った時の挙動です。 - 再度、親テーマの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から見ても、良い感じで表示されるようになりました。
