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

アフィンガー5の固定メニューを作ろう!

こんにちわ!まっわすです。

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

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

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

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

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

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

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

外観 > メニュー でメニューの編集画面に移動します。外観 > メニュー でメニューの編集画面に移動します。
新規メニューの作成をクリック新規メニューの作成をクリック
『スマホ用フッターメニュー』など名前をつけて、保存します。『スマホ用フッターメニュー』など名前をつけて、保存します。
メニューに追加したいリンクをチェックして、追加します。メニューに追加したいリンクをチェックして、追加します。
追加されましたね!追加されましたね!
主要なカテゴリーを追加するものオススメ主要なカテゴリーを追加するものオススメ

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

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

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

作り方を紹介します。

カスタムリンクに『#wrapper』と入力します。カスタムリンクに『#wrapper』と入力、リンク文字列はお好みで。

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

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

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

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

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

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

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

スマートフォンフッター用メニューにチェックをつけて保存しましょう。スマートフォンフッター用メニューにチェックをつけて保存しましょう。

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

お忘れなく!

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

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

AFFINGER5管理 に移動します。AFFINGER5管理 に移動します。
メニューへメニューへ
画面1番下、『スマホ用フッターメニューを表示する(※スマホ閲覧時の「ページTOPへのボタン」は自動で非表示になります)』にチェック。画面1番下、『スマホ用フッターメニューを表示する(※スマホ閲覧時の「ページTOPへのボタン」は自動で非表示になります)』にチェック。

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

 

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

メニューが出ていたら成功!メニューが出ていたら成功!

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

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

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

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

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

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

 

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

お家のアイコンを使って見ます。今回はお家のアイコンを使って見ます。
<i class="..."></i>の部分をコピーする<i class=”…”></i>の部分をコピーする

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

ナビゲーションラベルの頭に貼り付けます。ナビゲーションラベルの頭に貼り付けます。

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

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

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

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

スマホ用フッターメニューができました!スマホ用フッターメニューができました!

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

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

おまけ:色を変更する

外観 > カスタマイズ > [+]メニューのカラー設定 > スマホフッターメニュー でメニューの色を変更する外観 > カスタマイズ > [+]メニューのカラー設定 >
スマホフッターメニュー でメニューの色を変更するスマホフッターメニュー でメニューの色を変更する

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

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

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

アフィンガー5の固定メニューを作ろう!

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

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

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

ABOUT ME
まっわす
3ヶ月で公務員試験に合格したので、そのノウハウを発信中! 質問コーナーもあるので、どんどんコメントしてね。 ただいまメルマガ準備中!
忘れない記憶をつくる勉強ノウハウをつめこんた1冊の資料をつくりました

3ヶ月で公務員試験に合格できた、

私の勉強方法をまとめた ebook ができました。

 

無料でダウンロードできますので、

是非あなたの勉強のお役立てください。

コウムノートのEBOOK

 

COMMENT

メールアドレスが公開されることはありません。