WordPressのナビゲーションメニューがスマホ画面だと表示されなかったり、はみ出したり!~スマホ画面で特定の機能に不具合が出た場合の対処方法~

50歳からのプログラミング

ある日突然スマホ表示のナビゲーションメニューが、画面からはみ出した!

最近では、ほとんどのWordPressのテーマに『レスポンシブ・デザイン』という機能が初期段階で付いていて、特別な設定とか、プログラミングの知識がなくても、

パソコンで見た時はその画面サイズに

スマホで見るとスマホ画面のサイズに

タブレットで見るとその画面のサイズに

それぞれの画面の大きさに合った画像や文字、そして機能も同様に使えるよう設定されています。

ところが僕の場合、浅く身につけたプログラミング知識(HTML、CSS、PHP)だけでサイトのカスタマイズをあれこれ試してしまったせいで、ある日気づくとスマホ画面で見たときハンバーガーマーク(というのだそうですね。これ↓)と検索ウインドウが完全に消失していたのです!

色々追加していたcssやphpのコードを削除したり元に戻したりすることで何とか検索ウインドウとハンバーガーマークは復活!

復活はしたのですが、スマホでナビメニューを表示させると…

本来KNOWLEGEの下(矢印の更に下)までナビゲーションが続くのですが・・・

はみ出てる!

しかもスクロール出来ない!

「僕ごときのサイトメニューの不具合など誰も困らないだろう」とは思ったものの、その道で食って行きたいと思っている人間の作ったサイトがこのようなことではやはり問題あり!

ってことで修理に取りかかったのでした。

具体的にやったこと(画像つき)

【ご注意とお願い】

Webサイトやデータの編集をされる場合はご自身の責任の下、必ずバックアップを取ってから、最悪の場合も現状復帰させられるようにしてから行うようお願い申し上げます。読者様、閲覧者様が行う行為や、当サイトが紹介するサイト、広告主の安全性に関し、当サイトでは一切責任は負いかねますのであらかじめご了承ください。

まず僭越ながら僕のサイト(※)で具体例を見ていきましょう。※ここでは親サイト『hisshi.jp』を例に見ていきます。

通常、ヘッダー部分にあるメニューは大項目だけ表示されていますよね。

↓こんな感じ。

で、ポインターを合わせるとズラズラっと、小項目が表示されます。

↓こんな感じ。

ところが、スマホで見ると、

こんな感じ↓

少し分かりづらいかもしれませんが、メニューが『KNOWLEDGE』までで終わってしまっていて、それより下のメニューが見られません。

下記がその当時のCSS(記憶が正しければ・・・)

.site-navigation ul ul { 
margin-left: 20px;
overflow: auto; 
max-height: 100%;  /* ナビスクロール高さ */
width: 180px;
}

overflowを『auto』ではなく『auto-flow』にしてみた

ネット上で色々検索した結果、下記のようにoverflowを『auto』ではなく『auto-flow』に設定すれば、ナビゲーションが一番下までスクロールされて見られるとのことを知り、すぐ試してみました。

.site-navigation ul ul { 
margin-left: 20px;
overflow: auto-flow;  /* ナビスクロール */
max-height: 100%;  /* ナビスクロール高さ */
width: 180px;
}

しかし、変わらず。ナビ部分の下が途切れ、全く動かない。

max-heightの単位を『px』ではなく『vh』にしてみた

『max-height』をpxではなく、vhで指定することでナビゲーションがスクロールし、細部まで表示されると言うことが判りました。※スミマセン、参考にさせていただいたサイトのURLを紹介したいのですが、記録していなかったため、どこにあるか判らなくなってしまいました。思い当たる方がいらっしゃいましたらご連絡ください。

.site-navigation ul ul { 
margin-left: 20px;
overflow: auto-flow;  /* ナビスクロール */
max-height: 53vh;  /* ナビスクロール高さ */
width: 180px;
}

この場合PCだと問題なし、

スマホ画面を確認してみると、やはり動かず。

ちなみにここまでのコードのスマホ画面、ログイン状態で確認すると・・・

背景(赤枠の部分)はスクロールするのですが、ナビゲーションは全く動かず。という状態でした。

とにかくWEBで見つけたコードを片っ端から試してみた

Web上には『height: 100%;』『position: fixed;』『z-index: 99;』『-webkit-overflow-scrolling: touch;』などコードを挿入すればよい等の案もあったので全て試しましたが、それでもスクロールせず

ちなみに『overflow-y: scroll;』を試した場合。

.site-navigation ul ul {
overflow-y: scroll;
width:100%;
max-height: 50vh; /* ナビスクロール高さ */
}

これを試したときは(ログイン状態だと)スクロールはするものの、下の方の親要素が完全に重なっている

やみくもに次は、『overflow: auto-flow;』を元の『overflow: auto;』に戻してみると・・・

.site-navigation ul ul {
margin-left: 20px;
overflow: auto;/* ナビスクロール */
max-height: 53vh; /* ナビスクロール高さ */
width: 200px;
}

変わらず・・・変わらずなのですが、ログイン状態で見てみると・・・

おおっ!ナビの子要素が見事にスクロールされ、全て表示されるようになっている!ログイン状態のみとはいえ、明確な変化が現れた!

ちなみにPCで見るとどうかな・・・

あれ?変なところに縦と横のスクロールが・・・しかもサブメニューが表示されない!

これだと全く意味ないですね。

ログアウトした状態でも、スマホ画面でナビがスクロールするように、そしてPC画面では元のナビがアコーディオン上に表示されるようにならないと・・・。

最終的に改善できた対処方法

@media screenを設定してみた

そこで当時はよくわからず「スマホだからメディアスクリーンを指定すれば良いのかな?」と下記を指定。

※メディアスクリーンとは:

メディアクエリは画面の解像度 (例えばスマートフォンの画面とコンピュータの画面) といった条件に対応してコンテンツの描画が行えるようにするCSS3のモジュールである。2012年6月にはW3C勧告になり、[1]レスポンシブウェブデザイン (RWD) の基礎になっている。

-上記『メディアクエリ Wikipedia』より引用-

cssにおける@media screen and () というコードは、『画面サイズがこの大きさ(これ以下や、これ以上)の場合は、CSSで、このようなデザインを指定する』、というコードです。

今回は画面幅が400px以下のデバイスを使った場合のデザイン(CSSコード)を下記のように指定してみました。

@media screen and (max-width: 400px) {
.site-navigation ul ul {
overflow: auto; /* ナビスクロール */
max-height: 50vh; /* ナビスクロール高さ */
width: 200px;
}
}

すると

ログインしていなくても、ブルーのライン内が縦にスクロールされて、全体がスマホ画面に収まるようになりました!

ではパソコン画面で確認へ!

無事元のアコーディオンに戻っています!

変なスクロールが無くなり、子要素も自動的に表示されるようになりました。

後はタブレットで上手く表示されていれば全てOK・・・なのですが

最後はタブレットへ。

ハンバーガーメニューをタップしてみると・・・

げっ!またメニューがはみ出してスクロールしない!

そうか。スマホの画面幅よりタブレットの方が幅が広いのだから当然やな。

そこで今度は先ほどの指定した画面幅(400px以下)を(タブレットや幅広のスマホでも大体673px以下なので)、673px以下に変更。

こうすることで、画面横幅673px以下のデバイスで表示するときだけ、その条件(スクロールやその他諸々)で表示するという設定ができました。

@media screen and (max-width: 673px) {

そして確認。

今度はタブレットでも上手くいきました!

結論

途中紹介した『auto-flow』や『vh』また、『height: 100%;』や『position: fixed;』などの方法でも上手く設定できるのかもしれませんが、レスポンシブ・デザインには『@media screen』が素人には判りやすく、手っ取り早いと感じました。

おすすめの品

僕はHTMLやWEBサイト作成にあたり、スクールなどに通ったことが一切ありません。ネット動画か本がほとんどなのですが、色々拝見した中でこの商品がかなり秀逸(簡潔で判りやすい)と感じましたので、お勧めしています。

本稿でも一部プログラミングのコードをheader.phpに埋め込む作業を紹介していますが、HTMLやCSSだけでも知っておくと、かなりの部分で応用が利きますので、WEBサイトのカスタマイズですごく活躍します。

【ご注意とお願い】

当サイトにご訪問いただきありがとうございます。

当サイトでは、少しでも皆様のお役に立ちたいと誠心誠意正確な情報を提供しているつもりですが、訪問者様が(当サイトの情報を参考にされたかどうかに関わらず)ご自身で行われる行動(PCの設定変更等)については、当方では一切の責任を負いかねますので、予めご了承ください。

ただし誤った表記があった場合等は、ご指摘頂けましたらすぐに確認し、必要に応じ修正、削除等対応いたします。また、サイトについてのお問い合わせ、仕事のご依頼等も随時受け付けています。

最後に

本件、突然表示が崩れ、「慌てて色々試した結果、なんとなく上手くいった」というのが実際のところで、何ともまとまりのない投稿になってしまいました。

参考にさせていただいたサイトさんも結構あったのですが、結局どれだったのかわからなくなってしまい・・・。

後日、参考になったサイトさんを探しているときに下記ページを見つけました。すごく参考になりそうだったので、書き留めておくことにしました。

CSSのoverflowを使ってはみ出た表示の指定をする方法【初心者向け】

[CSS]知っておくと便利!スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法

Eye-Catch Photo by freestocks.org on Unsplash

コメント

タイトルとURLをコピーしました