ELEPHANTでスマホメニューを配置する方法

[voicel icon=”https://www.mb-honki.jp/wp-content/uploads/2017/06/ichiro.jpg” name=”ボレ”]ELEPHANT2のスマホ用メニューはELEPHANTの目玉機能と言ってもいい程いい機能です。

このスマホ用メニューも簡単に設定できるのでご紹介しますね。[/voicel] [voicer icon=”https://www.mb-honki.jp/wp-content/uploads/2017/06/matsuko.jpg” name=”ワイ”]スマホ用メニューはなんでいいの？

[/voicer] [voicel icon=”https://www.mb-honki.jp/wp-content/uploads/2017/06/ichiro.jpg” name=”ボレ”]スマホ用メニューは常に表示されているので、訪問者に重要なページを見せやすいんです。[/voicel]

ELEPHANTのスマホ用メニューは、重要なページへのリンクを配置するのをおすすめします。

なぜならgoogleはサイト内の重要なページへのナビゲーションは常に表示しておいたほうがユーザビリティが向上すると言っているからです。

サイトの重要なコンテンツをデフォルトで表示します。Google はタブや展開するセクションなどのナビゲーション要素内に含まれる非表示の HTML コンテンツをクロールできますが、こうしたコンテンツはユーザーがアクセスしにくいものとみなされ、また、最も重要な情報はページの表示時にデフォルトで閲覧可能となっているものと解釈されます。
引用元：ウェブマスター向けガイドライン

メニューを作成する

メニューの作成方法は、メインナビゲーションの作成をした時と同じです。

外観＞メニューへ移動
「新規メニューを作成」を押下
メニュー名にボレでわかりやすい任意の名前をつける
「メニューを作成」を押下
メニューに入れたい項目にチェックを入れる（4個推奨）
メニュー設定の「スマホナビ」にチェックを入れる
メニューを保存を押下
スマホ実機で確認orウィンドウサイズを縮めて確認

１ページ目での動作

このページでは、上記の1~4までのことを実行してください。

細かい部分は下記画像をご覧ください。
[spfont] ※画像は押すと拡大できます。[/spfont]

2ページ目での動作

このページでは4~7のことを実行してください。
こちらも細かい部分h下記画像をご覧ください。
[spfont] ※画像は押すと拡大できます。[/spfont]

実機での確認

[spcolwrap][spcol2] 実装が終われば最後はスマホ実機での確認です。

スマホが手元にすぐない場合はウィンドウサイズの横幅を縮めても表示されます。
[/spcol2][spcol2]
[/spcol2][/spcolwrap]

まとめ

これでうまく実装はできたでしょうか？？

スマホ用メニューを実装することでユーザビリティが向上しますし、あなたの意図通りのページへ誘導しやすくなります。

是非スマホ用メニューを実装しましょう。

[voicer icon=”https://www.mb-honki.jp/wp-content/uploads/2017/06/matsuko.jpg” name=”ワイ”]メインナビゲーションは実装した事あったから、スマホ用のメニューは簡単に実装できたわ。

これでELEPHANT（エレファント）の目玉機能も実装できたってことね。[/voicer] [voicel icon=”https://www.mb-honki.jp/wp-content/uploads/2017/06/ichiro.jpg” name=”ボレ”]そうなりますね。

冒頭でも述べたように、googleは重要なものは常に表示しておくことを推奨していますからね。[/voicel] [voicer icon=”https://www.mb-honki.jp/wp-content/uploads/2017/06/matsuko.jpg” name=”ワイ”]早く成果が上がって欲しいわ。

頑張って記事書くね。[/voicer]