TwentyTwelveメニューボタンの削除

Wordpress Blog Software To Blog  - viarami / Pixabay
この記事は約3分で読めます。

レスポンシブデザインで横幅が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から見ても、良い感じで表示されるようになりました。

タイトルとURLをコピーしました