【アフィンガー】スマホメニュー設定ガイドマップ【ハンバーガーメニューの作り方】

アフィンガーでスマホメニューを作りたいんだけど、どこから設定したらいいですか…？

メニューの作り方は３つステップできます。

設定があちこち触る必要があるので、わかりづらいですが

手順さえわかれば、サクッと設定できます。

本記事では、図解にして実際の設定画面をみせながら、解説していきます！

なお、アフィンガーでは以下のメニューが設置できます。

それぞれの設定手順についても、あわせてみていきます。

この記事を読んで、スマホメニュー設定を完璧にしましょう！

スマホメニューに不要なもの

メニューはシンプルがいいです。

詰め込みすぎると、サイトがみずらくなってしまう。そうなると、ユーザビリティが低下します。

要するに「ユーザーに必要ないもの」は極力なくしておきましょう。

例えば、検索バー、です。

データをみると、0.8%、とかなんですよね・・

当サイト調べ

上記は月間10万PVサイトから参照しています。

このデータをみるかぎり、必要ないよね・・となり、当サイトは検索バーを削除しました。

過去にはサイドバーにランキングページの誘導もいれていました。ただ、クリック率が悪いため、外しました。

カテゴリと、トップページ、この２つがあれば、基本問題ないと思います。

アフィンガーで設定できるもの

スマホページで表示できるメニューは以下です。

インフォーメーションバーというのは、ヘッダー下に表示できるリンクバーのことです。

「コンバージョン記事への誘導」で使われており、効果的と言われています。

その理由はファーストビューにあります。

インフォメーションバーはヘッダーの次に位置しており、

毎回ユーザが目にするところです。

ですので、アフィリエイトサイトであれば「ランキングサイトのリンク」がいいと思います。

役割をまとめると、

メニューをつくるときは、上記を意識して作るようにしましょう。

ハンバーガーメニューの設定手順

ハンバーガーの作り方について解説していきます。

手順は以下です。

位置の設定ができていないと、バランスが悪くなります。

きちんと設定が完了すると以下のようになります。

コツはハンバーガーメニューとロゴは同位置にすることです。

設定方法は以下です。

カスタマイザー を開いて、ロゴ画像を選択してください。

画像のとおりにチェックをいれます。

アイコンの形や、文字を追加することが可能です。

右から、ノーマル、クール、カット

アイコンの形は３パターンから選べます。

アフィンガー５管理 - メニュー から設定できます

ハンバーガーメニューとは別に検索バーをつけることもでき、アニメーションを加えることもできます。

デフォルトだと、白のままなので、黒に変更しました。

ヘッダーが黒だったりする場合は、この設定でアイコンを色を変えてください。

黒か白にするとバランスがよいです。

ほかにも、検索ボタンをおしたときのアニメーションを変えたりと、細かい設定ができます。

フッターナビの設定手順

完成すると以下のようになります。

メニューづくりは基本のとおりに設定すれば、作れます。

「アイコン＋文字」をいれておくと、バランスがよいです。

アイコン選びに関しては「fontawesome」でOKです。

すでにアフィンガーに設定されているので、以下のコードをいれるだけ表示できます。

・ホームのアイコン（fa-home）

 html
<i class="fa fa-home" aria-hidden="true"></i><br/>HOME

・TOPへ戻るアイコン（fa-arrow-up）

 html
<i class="fa fa-arrow-up" aria-hidden="true"></i><br/>TOP

・目次のアイコン（fa-file-text-o）

 html
<i class="fa fa-file-text-o" aria-hidden="true"></i><br/>目次

あとは、カスタマイザーで配色設定して、

上記のように、チェックボックスをいれてあげればOKです。

インフォメーションバーの設定手順

以下のように動きをつけると、目に留まりやすくなります。

設定は

• コードをウェジットに登録して、
• カスタイザーで配色調整をする

このステップでインフォメーションバーを作れます。

まずはコードは以下です。

 html
<p><a href="誘導先のURL">表示する文字列をいれる   <span class="animated st-animate"><i class="fa fa-angle-double-right"></i></span></a></p>

<span class="animated st-animate">〜</span> が動きをつける部分です。

次に、CSSの設定です。

 html
#st-header-top-widgets-box {
background-color: #112b4c;
}
#st-header-top-widgets-box .st-content-width a {
color: #ffffff;
text-decoration: none;
}

こちらのコードを、カスタマイザー - カスタムCSS に、コピペしてください。

設定が完了すれば、全ページに表示できます。

※実は方法は2通りあり、基本エリア設定からも設定できます。ですが、設定がバラバラになってしまうので、カスタムCSSに統一することをお勧めします。

ちなみに、「記事ページにだけ表示したいな・・」というときは、Widget Options、というプラグインが使いましょう。

ページごとに切り替えることができ、投稿ページや固定ページの設定が可能です。

まとめ

フッターメニューに関しては、意見が分かれると思います。

僕が運営しているアフィリエイトやブログは、広告の邪魔になるので、載せてません。

とはいえ、こんな意見もあります。

画面の上端は、親指がもっとも届きにくい領域です。メニューを上部に置くと、ユーザーはインターフェイスの操作が困難になります。ユーザーはメニューをきわめて頻繁に使用します。そのため、親指の届く範囲にメニューを設置することは不可欠です。

参考：モバイルではメニューを画面下に表示すべき理由

運営しているジャンルによって変わると思うので、各自で判断でいいと思います。