【初心者】アフィンガー5のスマホ用固定フッターメニューの作り方

こんにちは。ガクマーケの井上です。

アフィンガー５のスマホ用固定フッターメニューの設定方法を紹介します。

画像をたくさん使っているので、初心者でも簡単です！

常時表示されるメニューがあると、回遊率がグッとあがります。３分で設定できるので、ぜひお試しください！

アフィンガー4の固定フッターメニューは、こちらの記事（【アフィンガー４】３０分で完成！スマホでメニューを固定する方法）で紹介しています。アフィンガー4を使っている人は、こちらをご覧ください。

① フッター用メニューをつくる

固定フッター用のメニューを作ります。簡単だぞ！

今回は、ホームと、カテゴリーページ、上に戻るボタンの3つにします。

『上に戻るボタン』を作ろう

スマホ用固定メニューがあるときは、スマホのみ『上に戻るボタン』が表示されません。アフィンガー5の仕様です。

固定メニューの中に上に戻るボタンを作っておくと便利です。

作り方を紹介します。

カスタムリンクの『#wrraper』の意味はわからなくて大丈夫です。そのまま書いといて！

ナビゲーションラベルは、『上に戻る』とか、『TOP』などご自由に。

最後にメニューに追加すれば、上に戻るボタンは完成です。

メニューは3〜5個くらいにしておこう

スマホの画面幅は狭い。固定フッターメニューに、どんどんリンクを増やすと、押しにくくなります。見た目も悪いし。

メニューは3〜5個くらいが、ちょうどいいと思います。

スマートフォンフッター用メニュー　に設定する

スマートフォンフッター用メニューにチェックをつけます。忘れやすいです。

お忘れなく！

最後に、メニューを保存して、ここでの作業は終わりです。

② アフィンガー5管理設定

最後に保存して、ここでの作業は終わり。

 

今の作業で、スマホには、固定メニューが表示されているはずです。自分のスマホで確認してみよう。

こんな感じになっていれば、成功です。

殺風景？　僕もそう思います。アイコンをつけて可愛くしてみましょう。

③ アイコンをつけてみよう

アイコンは、fontawesome4（Font Awesome Icons）のアイコンを使います。もちろん無料やで。

fontawesomeとは、こんなアイコンや、あんなアイコンを無料で使えるサービスです。たくさんのアイコンがあるので、見てるだけでも楽しいんですよね。

注意点として、fontawesome5は使えません。アフィンガー5が対応していないのです。

 

さて、まずはfontawesome4（Font Awesome Icons）で使いたいアイコンを探します。

コピーしたら、外観　＞ メニュー　から、先ほど作ったスマホ用メニューの編集画面に移動。

ナビゲーションラベルに、　<i class=””>…</i>　をペースト。

<i class=””>…</i>　の後ろに、<br>　を追記します。

<br>　は『改行』の意味です。アイコン（改行）ホーム と表示するわけです。忘れないでね。

保存して、スマホで確認すると、こんな感じ！　いいね！

他のリンクにもアイコンを設定してください。改行『<br>』を忘れないでね。

最後に、メニューを保存。これで完成だ！

おまけ：色を変更する

せっかく作ったメニューなので、お好きな色に設定してください。

スマホ用フッターメニューの色が濃いと、メニューに目が留まりやすい。逆に、本文をきちんと読んで欲しい場合は、メニューの色を薄くするといいと思います。

アフィンガー5のスマホ用固定フッターメニュー完成！

できました。簡単でしょう？

本当に簡単なのに、ブログの回遊率もアップします。

もし分からないことがあれば、気軽にコメントで質問してください！