JINカスタマイズ

【WordPress】【JIN】ハンバーガーメニューの「MENU」の文字色と背景色のCSSカスタマイズ

こんにちは😀広瀬ユキです。

今回は、スマホのハンバーガーメニューの「MENU」の文字色と背景色のCSSカスタマイズについてご紹介します。

CSSにコードを追加して、ハンバーガーメニューの「MENU」の文字色と背景色を変えてみましょう🍔

ハンバーガーメニューって何?説明や設定方法はコチラ↓
【WordPress】【JIN】ハンバーガーメニューの閉じるボタンが表示されないときの対処法:2種類【WordPress】【JIN】スマホのハンバーガーメニューの閉じるボタンが表示されないときの対処法について書きました。...

ハンバーガーメニューの基本の配色

スマホのハンバーガーメニューの基本の配色は、下記のような配色になっています。

これは、JINのカスタマイズ画面から設定できる配色です。

上記の設定にプラスで、CSSにコードを追加して、ハンバーガーメニューの「MENU」の文字色背景色を変えてみます!

それぞれ色を変えると、下記のようになります。

BeforeAfter

※Afterの上部のバーは、ヘッダー広告です。

ハンバーガーメニューの「MENU」の文字色が変わり、背景色がやや濃くなりました。

CSSにコードを追加する

では、実際にCSSにコードを追加して、ハンバーガーメニューの「MENU」の文字色と背景色を変えてみましょう!

CSSにコードを追加する方法がよく分からない方は、下記の記事を参考にしてください。

CSSにコードを追加する方法はコチラ↓
【WordPress】【JIN】ブログのデザインをカスタマイズする方法:2種類【追加CSS】【WordPress】有料テーマ【JIN】を使っている方向けにブログのデザインをカスタマイズする方法:2種類について書きました。【追加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」の数値を調べるのに便利なサイト】

カラーコードを入力して、R,G,Bを調べることができます

スマホのハンバーガーメニューの文字色と背景色を変更することができました‼

「閉じるボタン」のCSSカスタマイズ

スマホのハンバーガーメニューの画面右上にある×ボタンの色のCSSカスタマイズについては、下記の記事を参考にしてください。

【WordPress】【JIN】ハンバーガーメニューの閉じるボタンが表示されないときの対処法:2種類【WordPress】【JIN】スマホのハンバーガーメニューの閉じるボタンが表示されないときの対処法について書きました。...

編集後記

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

【WordPress】【JIN】スマホの背景色を変えるCSSカスタマイズ★オススメ★【WordPress】有料テーマ【JIN】スマホの背景色を変えるCSSカスタマイズについて書きました。標準設定では変えられないスマホの背景色を変えることができるカスタマイズなので、オススメです。...
【WordPress】【JIN】サイトタイトルの色を変えるCSSカスタマイズ★オススメ★【WordPress】有料テーマ【JIN】を使っている方向けに、サイトタイトルの色を変えるCSSカスタマイズについて書きました。☆オススメ☆...
【WordPress】表を横スクロールするためのコード【便利】【WordPress】表をスクロールするためのコードについて書きました。【便利】CSSとfunctions.phpにコードを追加します。...

☆クリックで応援お願いします☆

PVアクセスランキング にほんブログ村

ブログランキング・にほんブログ村へ にほんブログ村 スイーツブログ コンビニスイーツへ にほんブログ村 ブログブログ ブログ初心者へ