こんにちは😀広瀬ユキです。
今回は、スマホのハンバーガーメニューの閉じるボタンが表示されないときの対処法についてご紹介します。
カラー設定を変更する方法とCSSにコードを追加してカスタマイズする方法のいずれかを使って、ハンバーガーメニューの×ボタンを表示できるように設定してみましょう🍔
WordPress有料テーマ【JIN】を使っている方向けの記事です。
もくじ
ハンバーガーメニューって何？
ハンバーガーメニューとは、スマホでメニューを表示したいときに押す三本線のボタンのことです。※パソコンのような大きい画面では表示されません。
言葉で説明しても分かりづらいので・・・
三本線が、ハンバーガーのように見えますね🍔
これを開くと、メニューが表示されるのですが・・・
ハンバーガーメニューの閉じるボタンが見えない‼
という事態になっていました。本来は、×ボタンが表示されるはずです。
その状態がコチラ↓
実はこれは、背景が白×閉じるボタンの色が白＝閉じるボタンが見えない‼
という状態になってしまっているんですね。なので、正確には「表示はされているが見えていない」ということです。ハンバーガーメニューを開いて、前のページにどこから戻ればいいのか分からないと、少々焦ります…😅
なぜこうなってしまっているのかというと、ヘッダーに広告が入っているからです。広告が入っていることによって、多少余白ができ、その余白部分が白なので、閉じるボタンが見えなくなってしまっているんです。
と、いうことは、閉じるボタンの色を変更するしかありません。
閉じるボタンの色を個別に決めることができる有料テーマもあるようですが、JINにはその設定がありません。
しかし、解決方法がありました。
- カラー設定を変更する方法
- CSSにコードを追加してカスタマイズする方法
こちらの2種類の解決方法をご紹介します。
方法①カラー設定を変更する方法
では、カラー設定を変更して「閉じるボタン」の色を変更する方法をご紹介します。
閉じるボタンの色がどこと連動しているかというと・・・
なんと、タイトルの文字色と連動しています。
Step.1 「カスタマイズ」を開く
WordPressの編集画面へログインし、「外観」→「カスタマイズ」を開きます。
Step.2 「カラー設定」を開く
「カスタマイズ」を開いたら、「カラー設定」を開きます。
すると、このような画面が出てきます。
PC画面では、「タイトルの文字色」→タイトルの文字色、「SNSボタンの色」→SNSボタンの色と連動しています。
しかし、スマホのハンバーガーメニューだと、連動する箇所がPCと異なります。
- 「閉じるボタン」・・・タイトルの文字色
- 「文字」・・・サイト内の文字色
- 「リスト」・・・アクセントカラー
- 「SNSボタン」・・・テーマカラー
- タイトルの文字色は、デフォルト（初期設定）だと「#f4f4f4」という白に近い色が設定されています。
- スマホ画面上の「SNSボタン」は、SNSボタンの色ではなく、テーマカラーと連動しています。
- PC画面上の「SNSボタン」をマウスオーバーしたときに反転する色は、アクセントカラーと連動しています。
- フッターのプロフィールの「SNSボタン」は、フッターの文字色と連動しています。
- フッターの「プロフィール名」「肩書」「説明」は、サイト内の文字色と連動しています。
Step.3 タイトルの文字色を変更する
編集画面で色を設定する
タイトルの文字色を変更し、「公開」を押します。
試しに、「黒」を設定してみます。
PCの画面上のタイトルの文字色が黒になりました。
スマホの閉じるボタンを確認する
続いて、スマホの画面から、ハンバーガーメニューを開いて色が黒に変更されているか、確認しましょう。
閉じるボタンが白くて見えなかったのが、黒に変更されているのが分かりました。
スマホのトップページからの見え方
PCの画面とは異なり、スマホのトップページ上部の色も黒に変更されます。
カラー設定を変更して、スマホのハンバーガーメニューの閉じるボタンが表示されるように設定できました‼
方法②CSSにコードを追加してカスタマイズする方法
次に、CSSにコードを追加して「閉じるボタン」の色を変更する方法をご紹介します。
CSSにコードを追加する方法がよく分からない方は、下記の記事を参考にしてください。
コード
/*---ハンバーガーメニューの×ボタンの色---*/
/*閉じた状態*/
.cps-icon-bar {
background-color: #aaa ;/*色*/
}
/*閉じた状態*/
/*開いた状態*/
#navtoggle:checked + .sp-menu-open .cps-icon-bar {
background-color : #aaa;/*色*/
}
/*開いた状態*/
/*---ハンバーガーメニューの×ボタンの色---*//* */ で囲ってある部分はメモ書きなので、削除してもOKです。
【メモ書きなしver.】
.cps-icon-bar {
background-color: #aaa ;
}
#navtoggle:checked + .sp-menu-open .cps-icon-bar {
background-color : #aaa;
}説明
#aaaには、お好みのカラーコードを入れてください。
color: #aaa;だと色が変わらないので、
background-color: #aaa;と記述して下さい。
ハンバーガーメニューを閉じた状態と開いた状態の色は同じでも良いし、それぞれ変えることもできます。また、どちらか一方のみCSSにコードを追加すると、カスタマイズしていない方はタイトルの文字色の色になります。
- 「開いた状態のみ」CSSにコードを追加 → 「閉じた状態」はタイトルの文字色の色
- 「閉じた状態のみ」CSSにコードを追加 → 「開いた状態」はタイトルの文字色の色
CSSにコードを追加して、スマホのハンバーガーメニューの閉じるボタンが表示されるように設定できました‼
当ブログのカラー設定
当ブログのカラー設定をご紹介します。
- テーマカラー：#cc00aa
- アクセントカラー：#cc8800
- タイトルの文字色：#cc8800
- サイト内の文字色：#000000
※サイトのタイトルは、透過PNGファイル（背景が透明）で作成した画像を使っているため、タイトルの文字色：#cc8800と色が異なり、白色になっています。画像は「カスタマイズ」→「ヘッダー設定」→「サイトロゴ」から設定できます。
オリジナルの色を設定してみよう！
PCとスマホの色が変更される個所を把握し、上記の手順を応用して、自分の好きな色を設定してみましょう。
サイトのオリジナリティがぐっと上がります❗
ちなみに・・・目次が連動する色は？
目次を作る際に便利なワードプレスのプラグイン「Table of Contents Plus」を使っている方が多いと思います。
JINの設定と連動する色を把握しておきましょう。
目次が連動する色
この目次もカラー設定によって色が変わるのですが、
- 「もくじ」※初期設定だと「Contents」→テーマカラー
- 「閉じる」や「開く」※初期設定だと「hide」や「show」→リンクの色
と連動しています。
HTMLサイトマップが連動する色
さらに、「Table of Contents Plus」や「PS Auto Sitemap」でHTMLサイトマップ（人間が見る用のサイトマップ）を作ると、以下のように色が連動します。
- 「HTMLサイトマップ内の文字色」→リンクの色
【サイトマップには2種類ある！】
- ロボットが検知する用→XMLサイトマップ
- 人間が見やすいように表示する用→HTMLサイトマップ
編集後記
自分が設定するときによく分からなかったことをまとめて記事にしてみました。JINの特徴を知り、個性のあるブログができると良いですね！
https://yuki-hirose.com/wordpress-jin-hamburger-menu-icon/
☆クリックで応援お願いします☆