WordPressでグローバルメニューを設定したのに、スマホで確認したら反映されていない！
パソコンではちゃんと反映してたのになんで？？？
グローバルメニューがないと書いた記事は、ただただズラーっと下に並んでいくだけ。
訪問者がページを検索しにくいブログになってしまいます。
パソコンよりもスマホからサイトを見るユーザーが多い今、スマホユーザーが見やすいサイトを作るようにとGoogleからもお達しが出ています。
そのためには、スマホからもグローバルメニューが表示できるようにと、調べ実践しました。
パソコンでスマホでの見え方を簡単に確認する方法もご紹介します。
無事にスマホにもグローバルメニューが反映できましたので、さっそく手順を解説していきますね！
スマホでグローバルメニューを反映させるやり方
筆者が利用しているCocoonでの設定をご紹介していきますね。
1.モバイルメニューの設定
Cocoon設定→モバイルをクリック。
モバイルメニューで【ヘッダーモバイルボタン】か【ヘッダー・フッターモバイルボタン】どちらかお好みの設定をクリック。
グローバルメニューを上だけ(ヘッダー)にするか、上下とも(ヘッダー、フッター)に作るかってことですね。
設定したら、忘れずに『変更をまとめて保存』をクリックすることで反映されます。
2.CSSクラスをチェックする
左の管理画面外観→メニュー→右側の表示オプションをクリック。
詳細メニュー設定表示の中から【CSSクラス】というのがあるので、これにチェックを入れましょう。
3.ヘッダーモバイルメニュー作成
ヘッダーメニューはパソコンで反映させるときに作ってあるので、同じヘッダーメニューをモバイルにも反映させていくやり方です。
下の方にメニューの設定のヘッダーモバイルメニューかヘッダーモバイルボタン、お好みの方にチェックを入れます。
『モバイル』がついてるメニューにチェックですね
ここでも忘れずに『メニューを保存』しましょう。
さらに、上の方へ戻り位置の設定をクリック。
ヘッダーモバイルメニューかヘッダーモバイルボタンどちらかグローバルメニューを反映させたいほうのメニューを選択をクリックして反映させます。
筆者のグローバルメニューは、メニュー名を『グローバルナビゲーション』としてます、なんでもいいのでわかりやすい名前をつけておきましょう。
またまた忘れずに『変更を保存』をクリック。
4.スマホで確認
グローバルメニューが、スマホでもちゃんと反映されているのが確認できました！
みなさんは、できましたか？
パソコンでスマホでの見え方を確認する方法
スマホユーザーが見やすいサイトを作るように意識することは、ブログを書く上で大切なことでした。
でも、いちいちスマホで見え方を確認するのは、ちょっと面倒ですよね？
実は、パソコンからワンクリックでスマホでの見え方を確認できる方法があるのでご紹介します！
パソコンのF12をクリックすると上のような画面になります。
上部にある『ようこそ』の左側にあるモバイルマークをクリックすると、スマホとパソコンでの見え方が切り替えできます。
また、上部左側のディメンションをクリックすると、さまざまなモバイルでの見え方の切り替えもできますよ！
しかし、スマホユーザーが見やすいサイトを作るように意識していても、Googleにインデックス登録されないと誰にも見てもらえませんので注意です。
一生懸命作った記事を悩んでいるユーザーさんにしっかり届けられるよう、準備していきましょう！
まとめ
WordPressのパソコンで設定したグローバルメニューが、スマホでも反映させるやり方をご紹介しました。
スマホでも表示させるには、モバイルの設定が必要でしたね。
画像を照らし合わせながら、4ステップのやり方で反映できますのでお試しくださいね。
また、F12ボタンから手軽に見え方を確認し、モバイルユーザーが見やすいサイト設計をしていきましょう。
コメント