wordpressでサブメニュー（プルダウンメニュー）が背景画像に重なって隠れてしまい、選択できなくなることへの対処法

はじめに

いやー、知ってたんですよ、スマホでveloart-intelligenceのサイトを開き、左上のメニューを展開すると、プルダウンメニューが画像に隠されて選択できないという不具合があること。でもfooter menuからは選択できるし、PCでは問題ないし、色々忙しいし、ということでほったらかしていました。今日INDEXさんのホームページを作っていく中で解決法の関連情報を見つけ、解決したので、その対処法をメモしておきます。

概略

style.cssでz-indexを指定するだけです。

web engineerの方ならみなさん当然ご存知なのでしょうが、私は初心者なので知りませんでした。今回は画像の方を下にしたいので、画像のz-indexをメニューのものより小さくすればOK。とはいえ、具体的な手順としてどうするか、が色々調べても分かりにくかったので、ここにメモしておきます。

対処法

1. 重なりがある部分のcssファイル部分を特定

   1. wordpressの管理画面に行き　外観→カスタマイズ　を選択し、左下のスマホマークをクリックして、不具合を再現する。
   2. 直したい部分で右クリック。今回だと重なっている背景画像上で右クリックする。
   3. 「検証」をクリック
   4. 右に現れたソースの中程の”Filter”と書かれたBoxに”z-index”といれて対象部分を検索する。
   5. 検索で現れた部分の”{“までを最初をコピー。今回私の例ではこちら。

      .wp-block-cover-image.has-background-dim:before, .wp-block-cover.has-background-dim:before {

2. wordpressテーマのstyle.cssに書き込み

   といっても直接style.cssをいじるのはテーマがアップデートされたりすると困るし、これだけのために子テーマ作るのもなあ、、、という方のために、今回はwordpressの機能の、追加CSSで対応します。
   1. wordpressで　外観→カスタマイズ　を選び、「追加CSS」をクリックする。
   2. そこに、先程コピーしたものに続けて、z-indexを指定する。今回は画像を下にしたいので一番小さな値0を入れる。私の例ではこちら。

      .wp-block-cover-image.has-background-dim:before, .wp-block-cover.has-background-dim:before {z-index: 0;
      }

   3. 公開ボタンを押して保存

以上です。

下のサイトを参考にさせていただきました。https://www.clrmemory.com/wordpress/z-index-customize/

終わりに

できましたか？と聞いておきながら、できなかった場合はどうするか知りません。←なんじゃそら。

という訳で、今週は依頼を受けているINDEXさんのホームページ作成が大詰めだったので、homepage作成ネタ三昧で、ベロモービルネタが全然なくて申し訳ありませんでした。来週からはベロモービルネタがバンバン！…あるかな？ではまた明日！