こんにちは😀広瀬ユキです。
今回は、スマホのハンバーガーメニューの「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」の文字色を変更する設定はオススメです🙂
☆クリックで応援お願いします☆