ELEPHANTでスマホメニューを配置する方法
ELEPHANT2のスマホ用メニューはELEPHANTの目玉機能と言ってもいい程いい機能です。
このスマホ用メニューも簡単に設定できるのでご紹介しますね。
ボレ
スマホ用メニューはなんでいいの？
ワイ
スマホ用メニューは常に表示されているので、訪問者に重要なページを見せやすいんです。
ボレ
ELEPHANTのスマホ用メニューは、重要なページへのリンクを配置するのをおすすめします。
なぜならgoogleはサイト内の重要なページへのナビゲーションは常に表示しておいたほうがユーザビリティが向上すると言っているからです。
サイトの重要なコンテンツをデフォルトで表示します。Google はタブや展開するセクションなどのナビゲーション要素内に含まれる非表示の HTML コンテンツをクロールできますが、こうしたコンテンツはユーザーがアクセスしにくいものとみなされ、また、最も重要な情報はページの表示時にデフォルトで閲覧可能となっているものと解釈されます。
引用元：ウェブマスター向けガイドライン
メニューを作成する
メニューの作成方法は、メインナビゲーションの作成をした時と同じです。
- 外観＞メニューへ移動
- 「新規メニューを作成」を押下
- メニュー名にボレでわかりやすい任意の名前をつける
- 「メニューを作成」を押下
- メニューに入れたい項目にチェックを入れる（4個推奨）
- メニュー設定の「スマホナビ」にチェックを入れる
- メニューを保存を押下
- スマホ実機で確認orウィンドウサイズを縮めて確認
１ページ目での動作
このページでは、上記の1~4までのことを実行してください。
細かい部分は下記画像をご覧ください。
2ページ目での動作
このページでは4~7のことを実行してください。
こちらも細かい部分h下記画像をご覧ください。
実機での確認
スマホが手元にすぐない場合はウィンドウサイズの横幅を縮めても表示されます。
まとめ
これでうまく実装はできたでしょうか？？
スマホ用メニューを実装することでユーザビリティが向上しますし、あなたの意図通りのページへ誘導しやすくなります。
是非スマホ用メニューを実装しましょう。
メインナビゲーションは実装した事あったから、スマホ用のメニューは簡単に実装できたわ。
これでELEPHANT（エレファント）の目玉機能も実装できたってことね。
ワイ
そうなりますね。
冒頭でも述べたように、googleは重要なものは常に表示しておくことを推奨していますからね。
ボレ
早く成果が上がって欲しいわ。
頑張って記事書くね。
ワイ
ELEPHANT（エレファント）カスタム記事一覧
その他のELEPHANT（エレファント）に関する事は下記記事をご覧ください。
