こんにちは😀広瀬ユキです。
今回は、スマホのハンバーガーメニューの「MENU」の文字色と背景色のCSSカスタマイズについてご紹介します。
CSSにコードを追加して、ハンバーガーメニューの「MENU」の文字色と背景色を変えてみましょう🍔
WordPress有料テーマ【JIN】を使っている方向けの記事です。

ハンバーガーメニューの基本の配色
スマホのハンバーガーメニューの基本の配色は、下記のような配色になっています。
これは、JINのカスタマイズ画面から設定できる配色です。

上記の設定にプラスで、CSSにコードを追加して、ハンバーガーメニューの「MENU」の文字色と背景色を変えてみます!
それぞれ色を変えると、下記のようになります。
Before | After |
![]() | ![]() |
※Afterの上部のバーは、ヘッダー広告です。
ハンバーガーメニューの「MENU」の文字色が変わり、背景色がやや濃くなりました。
CSSにコードを追加する
では、実際にCSSにコードを追加して、ハンバーガーメニューの「MENU」の文字色と背景色を変えてみましょう!
CSSにコードを追加する方法がよく分からない方は、下記の記事を参考にしてください。

コード
/*---スマホのハンバーガーメニュー---*/
.sp-menu-title {
color: #aaa; /*「MENU」の文字色*/
}
.sp-menu-box {
background-color: rgba(255, 255, 255, 0.6); /*背景色*/
}
/*---スマホのハンバーガーメニュー---*/
/* */ で囲ってある部分はメモ書きなので、削除してもOKです。
【メモ書きなしver.】
.sp-menu-title {
color: #aaa;
}
.sp-menu-box {
background-color: rgba(255, 255, 255, 0.6);
}
説明
「MENU」の文字色
「MENU」の文字色の部分について解説します。
「#aaa」の部分にお好きなカラーコードを入れると、色を変えることができます。
color: #aaa; /*「MENU」の文字色 */
※スマホのハンバーガーメニューの「MENU」の文字色のみ変わります。サイトタイトルは、こちらのコードでは変わりません。
背景色
背景色の部分の解説をします。
「rgba」のカッコ内にお好きなカラーと透明度の数値を入れると、色を変えることができます。デフォルト(初期設定)では、下記の数値になっていて、白の透明度60%となっています。お好みで変えてみてください♪
rgba(Redの数値, Greenの数値, Blueの数値, Alphaの数値) ※詳しくは下記へ
background-color: rgba(255, 255, 255, 0.6); /* 背景色 */
透明度が不要な場合は、コチラ↓「#aaa」にお好きなカラーコードを入れてください。
background-color: #aaa; /* 背景色 */
「RGBA」とは・・・
コンピューター上で色を表す方法の一種。カラーを数値で表すことができる。
数値の範囲は、R,G,Bが0~255、Aが0.0~1.0である。(Aが0.6=透明度60%という意味)
- R = Red (赤)
- G = Green (緑)
- B = Blue (青)
- A = Alpha (透明度)
ちなみに、rgba(255, 255, 255, 1.0)が白で、透明度がない色の数値です。透明度がないので、#fffと同じ色です。
【「RGB」の数値を調べるのに便利なサイト】
スマホのハンバーガーメニューの文字色と背景色を変更することができました‼
「閉じるボタン」のCSSカスタマイズ
スマホのハンバーガーメニューの画面右上にある×ボタンの色のCSSカスタマイズについては、下記の記事を参考にしてください。

編集後記
やらなくても良いカスタマイズですが、「MENU」の文字色を変更する設定はオススメです🙂


