こんにちは~ハルです。
今回は、スマートフォンで自分のブログを確認した時に階層(サブメニュー)が表示されない!というお悩みを解決します。
私はCocoonのテーマを使っています。
先日スマホでサイトをチェックしてみると、ヘッダーメニューのプルダウンが機能していない事に気が付きました。
↓「オーストラリア生活」タップしてもメニューの階層(サブメニュー)が表示されないのです↓
![](https://www.web-and-life.com/wp-content/uploads/2022/08/2-2.-before-1.png)
下↓はパソコンの画面で確認したものです。
「オーストラリア生活」のメニューには階層(サブメニュー)が2つあることが確認できます↓
![パソコンの画面では階層が確認できている。](https://www.web-and-life.com/wp-content/uploads/2022/08/1-.jpg)
![](https://www.web-and-life.com/wp-content/uploads/2021/05/y0411-150x150.png)
せっかく階層(サブメニュー)を作ったのに、表示されてないので困りました。
いろいろ調べていくつか試した結果、解決できたので方法を共有していきます。
この方法は、CSSの設定などは必要ないので、5分ほどで設定できます。簡単な方法なのでぜひ試してみてくださいね。
おすすめのカンタン解決方法2つ
解決方法は他にもあると思いますが、カンタンに解決できた2つをご紹介します。
①トップメニューの設置
②ヘッダーモバイルボタンの設置
この2つの方法を試してみると下の画像のような感じで、スマートフォンでも階層(サブメニュー)が確認できるようになります。
①トップメニューの設置
![](https://www.web-and-life.com/wp-content/uploads/2022/08/1a64ac7d0970c6f9e25ac691acb2b9d4-2.png)
![](https://www.web-and-life.com/wp-content/uploads/2022/08/709f579d0830910a66d3d9f5dd19bbbc-3.png)
②ヘッダーモバイルボタンの設置
![](https://www.web-and-life.com/wp-content/uploads/2022/08/690d6f31495a02e9958175c51dc51075-2.png)
![](https://www.web-and-life.com/wp-content/uploads/2022/08/8d2007fb13b35311439756888a8cac6a-2.png)
では設定していきましょう。
スマホのヘッダーメニューをオフにする設定
スマホで確認した時にヘッダーメニューが表示されている場合は、設定を解除しましょう。そうすることできちんと機能していないメニューを取り除くことができ、見た目がスッキリします。
↓ビフォーアフターはこんな感じです↓
![](https://www.web-and-life.com/wp-content/uploads/2022/08/713dc24eae02408801180d5a551ff499.png)
![](https://www.web-and-life.com/wp-content/uploads/2022/08/2fb5d76e642ba743b086dbba53ae53fc.png)
では、スマホのヘッダーメニューをオフにしていきます。下に画像を添付したので、よかったら参考にしてくださいね。
①「外観」→②「メニュー」→③「ヘッダーメニュー」のみにチェック→④「メニューを保存」で設定を保存します。
※③で「ヘッダーモバイルメニュー」の□にチェックがついていたら外してください。
![](https://www.web-and-life.com/wp-content/uploads/2022/08/d3fdc507d2d070c9e032944a1d51cc92-1.png)
スマートフォンの画面を確認してみます。
![](https://www.web-and-life.com/wp-content/uploads/2022/08/f9f74c40d7110fb203006a8f0c66f778.png)
モバイルヘッダメニューがなくなりました。
Cocoon設定からモバイルメニューの設定
次にCocoonの設定画面からお好みでトップメニュー、ヘッダーモバイルボタンを設置します。
トップメニューの設置
①「Cocoon設定」→②「モバイル」→③「トップメニュー」→④「変更をまとめて保存」で保存します。
![](https://www.web-and-life.com/wp-content/uploads/2022/08/5e9cc1134dd820aeb40fe2727fd72eab.png)
変更後↓
![](https://www.web-and-life.com/wp-content/uploads/2022/08/1a64ac7d0970c6f9e25ac691acb2b9d4-1.png)
「MENU」をクリックすると、プルダウンから階層(サブメニュー)を表示させることもできます↓
![](https://www.web-and-life.com/wp-content/uploads/2022/08/709f579d0830910a66d3d9f5dd19bbbc-1.png)
ヘッダーモバイルボタンの設置
①「Cocoon設定」→②「モバイル」→③「ヘッダーモバイルボタン」→④「変更をまとめて保存」で保存します。
![](https://www.web-and-life.com/wp-content/uploads/2022/08/0cfab5bf940ea8ccc82826d82f65bdbc.png)
変更後↓
![](https://www.web-and-life.com/wp-content/uploads/2022/08/690d6f31495a02e9958175c51dc51075.png)
メニューボタンをクリックすると、こちらのデザインでも階層(サブメニュー)を表示することができます↓
![](https://www.web-and-life.com/wp-content/uploads/2022/08/8d2007fb13b35311439756888a8cac6a.png)
いかがですか?スマホでも階層(サブメニュー)が出てくるようになったでしょうか?
この他にもいろいろ試してお好みでデザインしてくださいね。
あなたのお悩みが解決したことを祈ります^^
コメント