AFFINGER6でスマホフッターメニューを設置したいんだけどやり方を教えてほしい。
簡単にできるのかな？
AFFINGER6では、以下のようなスマホフッターメニューを表示させることができます。
スマホフッターメニューを設置すれば、スマホの画面下にメニューが表示されるため、おすすめページへ誘導しやすくなるメリットがあります。
効果絶大なのでぜひ設置してみましょう。
設置自体は10分もあれば誰でも簡単にできます！
＼当ブログテーマ／
もくじ
スマホフッターメニュー設置のメリット
スマホフッターメニューの設置には以下のようなメリットがあります。
- おすすめ記事へ誘導効果
- ブログの回遊率を上げる可能性がある
- ページトップへ戻る機能でユーザーの満足度向上
それぞれ解説します。
おすすめ記事への誘導効果
前提として、ブログは8割がスマホで見られています。
さらにすべての記事でフッターメニューが表示されるため、自分のおすすめしたい記事へ誘導できる確率がグンと高まります。
ちなみに、スマホフッターメニューでは特定の記事への誘導だけでなく以下のようなページにも誘導することが可能です。
- おすすめのカテゴリ一覧
- 新着記事一覧
- プロフィールページ
- SNSアカウントページ
- お問い合わせページ
ブログの回遊率を上げる可能性がある
おすすめ記事への誘導が成功すれば、ブログの回遊率が上がります。
回遊率が上がれば、SEO評価によい影響を及ぼすことができます。
ページトップへ戻る機能でユーザーの満足度向上
スマホフッターメニューには、ページトップ（サイトの一番上）に戻るボタンを設置することも可能です。
iPhoneの方は画面の上部をタップすればページトップに戻れると思いますが、androidにはそのような機能がありません。
そのため、androidユーザーが自分のサイトを読んだときにページトップに戻る機能があれば満足度を上げることが可能というわけです。
AFFINGER6でのスマホフッターメニューの設置方法
それでは、スマホフッターメニューを設置していきましょう。
設定手順は以下5ステップです。
- 手順①：新規メニュー作成
- 手順②：メニュー項目追加
- 手順③：アイコンコードコピー＆ペースト
- 手順④：メニュー保存
- 手順⑤：スマホフッターメニューの表示設定
アイコンの部分だけ難しいかも…
でも分かりやすく解説するよ！
手順①：新規メニュー作成
まずは新規メニューを作成しましょう。
「外観」→「メニュー」→「新しいメニューを作成しましょう」
をクリックします。
続いて以下の操作でメニューを作成しましょう。
①：「メニュー名」に適当な名前を入力（自分だけが分かればよい）
②：「メニューの位置」にチェック（スマホフッターメニュー）
③：「メニューを保存」クリック
これでメニューの作成は完了です。
手順②：メニュー項目追加
新しいメニューが作成できたので、このメニューに項目を追加していきましょう。
今回はカスタムリンクでのメニュー項目追加手順を紹介します。
以下の手順でメニュー項目を追加しましょう。
①：「URL」に遷移させたい画面のURLを入力（SNSアカウントのURLも可能）
②：「リンク文字列」は一旦適当な文字でOK
③：「メニュー追加」クリック
固定ページ・投稿・カテゴリーに関しても同様の流れでメニュー項目を追加できます
自分が設置したい数だけメニュー項目を追加したら次のステップに進みましょう。
手順③：アイコンコードコピー＆ペースト
続いてアイコンコードを取得し、ナビゲーションラベルに張り付けていきます。
ここでやりたいことは、アイコンを表示させるためのコードを貼り付けるという作業です。
アイコンの設定には、Font Awesomeというツールを使います。
Font AwesomeをAFFINGER6で使えるようにするには事前にアカウント登録とAFFINGER6での設定が必要なので、まだの方は以下の記事を参考に設定してみましょう！
AFFINEGER6とFont Awesomeを連携できたら次の手順に進みましょう。
▼ここから手順
まずはFont Awesomeにログインしましょう。
ログインができたら「虫眼鏡メニュー」をクリックします。
アイコン一覧画面が表示されたら、バージョンを「6.3.0」から「5.15.4」に切り替えましょう。
2023年3月現在、AFFINGER6はFont Awesome6のバージョンに対応していません。バージョン5のアイコンであれば対応しています
アイコン一覧の中から気に入ったアイコンをクリックします。
HTMLになっていることを確認し、コードをコピーしましょう。
アイコンコードをコピーできたら、メニュー項目のナビゲーションラベルに張り付けましょう。
今のままだとアイコンしか表示されないので、後ろに任意のテキストを入力します。
テキストの表示は2通りあるので、好きな方を選択しましょう。
①：アイコンとテキストを横並びにしたい場合 → アイコンコードの後ろにテキスト入力
②：アイコンとテキストを改行させたい場合 → アイコンコードの後ろに「<br/>」＋テキスト
<br/>は改行を意味します。
▼「TOP」アイコンを出したい方は以下を参照ください
- メニュー項目：カスタムリンク
- URL : #wrapper
- ナビゲーションラベル : <i class="fas fa-arrow-up"></i></br>TOP
手順④：メニュー保存
メニューを全て追加できたら、メニューの位置が「スマホフッターメニュー」になっていることを確認して、「メニューを保存」をクリックしましょう。
手順⑤：スマホフッターメニューの表示設定
今のままだとスマホフッターメニューが表示されないので、表示されるように設定しましょう。
▼ここから手順
まずは以下の操作でAFFINGERのメニュー設定画面を表示させましょう。
「AFFINGER管理」→「メニュー」→「その他のスマホメニュー」
その他のスマホメニュー設定にて、以下の操作でスマホフッターメニューの表示設定をONにしましょう。
①：「スマホフッターメニューを表示する」にチェック
②：「Save」クリック
これでスマホフッターメニューの表示設定は完了です！
スマホフッターメニューのカスタマイズ方法
最後はスマホフッターメニューのカスタマイズ方法をご紹介していきます。
カスタマイズの概要は以下の3つです。
- 文字色・背景色・アイコンサイズの変更
- 文字の大きさの変更
- 「TOP」への戻り方をスクロールに変更
ご自分の好みに合わせてカスタマイズしましょう。
文字色・背景色・アイコンサイズの変更
文字色、背景色、アイコンサイズの変更方法をご紹介します。
WordPress管理画面にて、
①：「外観」
②：「カスタマイズ」
③：「各メニュー設定」
④：「スマホフッターメニュー」
をクリックします。
以下の画面からスマホフッターメニューのカスタマイズができるので、お好みでカスタマイズしましょう。
最後に「公開」を忘れずにクリックしましょう！
文字の大きさの変更
スマホフッターメニューの文字の大きさを変えることも可能です。
▼ここから手順
WordPress管理画面で、
「外観」→「カスタマイズ」→「追加CSS」
をクリックします。
追加CSSの入力項目に、以下のコードを添付し、「font-size:13px;」の数字の部分だけ任意に変更しましょう。
#st-footermenubox ul.menu li{
display:table-cell;
vertical-align:middle;
text-align:center;
font-size:13px;
}
設定ができたら「公開」ボタンクリックで完了です。
「TOP」への戻り方をスクロールに変更
最後は「TOP」ボタンをタップした時の挙動をスクロールに変更する方法をご紹介します。
デフォルトだと「TOP」ボタンをタップすると画面最上部へ画面が切り替わります。
▼ここから手順
以下の操作でスクロール設定を完了させましょう。
①：「AFFINGER管理」
②：「その他」
③：「jsによるスムーススクロールを使用する」にチェック
④：「Save」
これで「TOP」ボタンのスクロール設定は完了です！
まとめ：スマホフッターメニューを設置しておすすめ記事への導線を作ろう
スマホフッターメニューはおすすめ記事への誘導や、ブログの回遊率を上げる効果があります。
ぜひ本記事を参考にスマホフッターメニューを設置してみてください。
