ウェブで食うぜ!やり遂げる!

このサイトで使っているテンプレートについて知りたいならコチラ

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

 
  2017/08/22
ボレ
WRITER
 
ELEPHANT(エレファント)スマホ用メニューの設定方法
この記事を書いている人 - WRITER -
ボレ

これまで色んなネットでの副業に取り組んだけど、ボレは最終的に専業アフィリエイターになったぜ!!これまでの経験とか現状とか、色々好き勝手書いてるぜ!!

詳しいプロフィールはこちら

ELEPHANT2のスマホ用メニューはELEPHANTの目玉機能と言ってもいい程いい機能です。

このスマホ用メニューも簡単に設定できるのでご紹介しますね。

ボレ

スマホ用メニューはなんでいいの?

ワイ

スマホ用メニューは常に表示されているので、訪問者に重要なページを見せやすいんです。

ボレ

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

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

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

メニューを作成する

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

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

1ページ目での動作

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

細かい部分は下記画像をご覧ください。

※画像は押すと拡大できます。

2ページ目での動作

このページでは4~7のことを実行してください。
こちらも細かい部分h下記画像をご覧ください。

※画像は押すと拡大できます。

実機での確認

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

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

スマホ用メニュー

まとめ

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

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

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

メインナビゲーションは実装した事あったから、スマホ用のメニューは簡単に実装できたわ。

これでELEPHANT(エレファント)の目玉機能も実装できたってことね。

ワイ

そうなりますね。

冒頭でも述べたように、googleは重要なものは常に表示しておくことを推奨していますからね。

ボレ

早く成果が上がって欲しいわ。

頑張って記事書くね。

ワイ

ELEPHANT(エレファント)カスタム記事一覧

その他のELEPHANT(エレファント)に関する事は下記記事をご覧ください。

この記事を書いている人 - WRITER -
ボレ

これまで色んなネットでの副業に取り組んだけど、ボレは最終的に専業アフィリエイターになったぜ!!これまでの経験とか現状とか、色々好き勝手書いてるぜ!!

詳しいプロフィールはこちら

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Copyright© 今日からボレは!! , 2017 All Rights Reserved.