【「BusinessPress」カスタマイズ③】ハンバーガーメニューの三本線の下にMENUの文字を追加するカスタマイズ

前回、前々回とワードプレス無料テーマ「BusinessPress」のヘッダー部分のカスタマイズをご紹介させていただきました。

ワードプレス無料テーマ「BusinessPress」カスタマイズ①【ヘッダー部分のカスタマイズ】

ワードプレス無料テーマ「BusinessPress」カスタマイズ②【グローバルメニューに説明を追加する】

Contents

ハンバーガーメニューの三本線の下にMENUの文字を追加

今回は、ハンバーガーメニューのデザインのカスタマイズです。

ハンバーガーメニューとは、スマホなどでの表示の時に、クリックやタップするとメニューが出てくる主に三本線のアイコンのことで、BusinessPressの場合、サイトの表示幅サイズが980px以下になると自動的にメニューが三本線のハンバーガーメニューに切り替わります。

その三本線の部分をクリック（タップ）すると、三本線が×に変わり、右横からスッとメニューの一覧が現れます。これだけでも十分なのですが、今回は三本線の下にMENUの文字を追加したいと思います。

ダッシュボード「外観」＞「カスタマイズ」から、追加CSSで以下のCSSを追記します。

.drawer-hamburger:after{
	display: block;
	content:"MENU";
	width:50px;
	margin-top:15px;
	margin-left:-15px;
	font-size:8px;
	color:#000;
}

.drawer-hamburgerが、ハンバーガーメニューのCSSクラス名になりますので、それに:after擬似要素でMENUの文字を追加しています。

ハンバーガーメニューのデザインは、三本線でも十分だとは思いますが、MENUと書かれているとより分かりやすく親切ですね。上記のように簡単にカスタマイズできますのでお勧めです。