【AFFINGER6】スマホフッターに固定メニューを設置する方法

こんにちは。WordPressテーマ研究家SHINです。

スマホユーザーへ訴求する重要なポジションとも言えるのがフッターメニューですよね。

スマホフッターメニューと言えば、パソコンで言う「CTA」のような存在。ホームリンクや各種SNSフォローやシェア、人気記事、おすすめ記事、広告リンク、カテゴリーメニュー、Feedly、読者登録などなど、目的別にスマホユーザーへ訴求できます。

今回AFFINGER6でフッターメニューを設置する手順と方法をご紹介します。

WordPressにある程度慣れている方なら、5分もあれば設置できますので手順を追って進めていきましょう。

スマホ用フッターメニューを作成する2つの注意点

スマホフッターメニューは、ユーザーへ誘導できるメニューとして効果的な反面、注意する点も確認しておきましょう。

1.設置するメニューは4つまで設置が適当

フッターメニューは多く設置すると・・・

アイコンや文字が小さくなりメニューが見えづらくなる

メニューが多い＝選択肢が広くクリック率が下がる

メニューひとつひとつの「価値」が下がる

逆を言えば、フッターメニューが少ないほど見えやすい・クリック率が上がる・メニュー価値が上がります。

メニューは4つまでに抑えて必要最低限の設置を心がけましょう。

2.フッターメニューはユーザーに一番行動して欲しいものだけ設置する

記事を多く読んでもらいたい（PVアップを目的）なら、「人気記事」「おすすめ記事」などのメニューを設置すれば効果的ですし、フォロワーを増やしたい（Twitter、Facebookなど）なら、各SNSアカウントページを設置すると効果的ですよね。

アレもコレも！とメニューを設置すると訪問ユーザーは迷ってしまい、結果的に何もしないでサイトを離脱してしまう確率が上がります。

厳選に厳選したメニューだけを設置するようにしましょう。

スマホフッター固定メニューの作り方

ではスマホメニューを作っていきましょう。

step
1WordPressダッシュボード画面より「外観」＞「メニュー」に進み、メニュー画面で「新しいメニューを作成しましょう。」のテキストリンクをクリックします。

step
2まず「メニュー名」を記入して、メニュー設定は一番下「スマートフォン用フッターメニュー」にチェックし、「メニューを保存」しましょう

step
3スマホフッターへ設置するメニューを決めていきます。メニューは「固定ページ」「投稿ページ」「カスタム」「カテゴリー」から選べます。

ここから、僕が実装しているフッター固定メニューを紹介していきます。

1.ホームメニューを追加

ホームメニューは、サイトトップページへ飛ぶリンクメニューですね。

step
1固定ページタブを開き、全て表示タブから「ホーム」をチェックして「メニューに追加」します。

SHIN

「ホーム」はたった2ステップで追加できます♪

2.Twitterの「Follow」メニューを追加

Twitterを設置する場合、「Twitterアイコン」と「Followリンク」が必要になるので、AFFINGER6が対応している外部サイト「fontawesome v4.7」を利用していきます。

step
1早速「fontawesome v4.7」へアクセスし、グローバルメニューにある「Icons」をクリックします

step
2アイコンサーチ枠に「Twitter」と入力すると、下にTwitterアイコンが登場しますので、クリックしましょう

step
3このページにTwitterアイコンを表示させるためのコードが取得できます。ちなみに、他のアイコンも同じ手順でコードを取得できます。

このコードを取得したら、WordPressメニュー作成に戻ります。

step
4カスタムリンクを開き、fontawesome v4.7で取得したコードを「リンク文字列」へ入力し、あなたのTwitterフォローURLを「URL」へ入力して、「メニューに追加」をクリックします

SHIN

アイコンとTwitterフォローそれぞれのコードが必要なので、ちょっと手こずりますけどね；

このコードをTwitterアカウントだけ差し替えれば、コピペで使えるのでぜひ活用してください♪

3.ページトップへ飛ぶメニューを追加

ページトップへ一気にスクロールする便利なメニューです。

step
1カスタムリンクを開いて、URLには「#wrapper」と入力。リンク文字列は、fontawesomeで「」(角度倍増)を選んで入力しています

SHIN

Twitterフォローメニューが設置できれば、ここはある程度慣れたもんですよね♪

これで、スマホフッター固定メニューが出来ました。最後にAFFINGER6管理で、メニューを表示する設定をしていきます。と言ってもチャチャっと簡単に出来ます♪

スマホフッター固定メニュー表示設定（AFFINER5）

WordPressダッシュボードから「AFFINGER6 管理」に入って、2箇所にチェックを入れていきます。

step
1AFFINGER6管理メニューの「メニュー」に入り、下の方に「スマホ用フッターメニューを表示する」にチェックを入れてsaveします

step
2AFFINGER6管理メニューの「その他」に入り、その他の設定内にある「ページ内スムーススクロールを使用する」にチェックを入れて、一番下「保存」をクリックします

この2点の設定を完了すれば、スマホフッターに固定メニューが表示されます。チェックしてみましょう♪

では、ちょっとカスタマイズできるワザを紹介していきます。

フッターメニューカスタマイズ集

1.フッターメニュー文字色と背景色を変える

めちゃくちゃ簡単に変更できます。と言うか、こういったかゆいところまで簡単にカスタマイズできるAFFINGER6は・・神！！

WordPressダッシュボードから「外観」＞「カスタマイズ」に進み、「メニューのカラー設定」＞「スマホフッターメニュー」と進めば、テキストの文字色と背景色を自由に変更できます。

2.フッターメニューのアイコンとテキストフォントのサイズを変える

AFFINGER6のデフォルトのフッターメニュー「アイコンサイズ」と「フォントサイズ」が小さいなぁ・・って思いませんでしたか？このサイズも、簡単に変更可能です。

step
1WordPressダッシュボードから「外観」＞「テーマエディター」に進みます

step
2「style.css」にある「スマホフッターメニュー」の下にあるコードpxを変更するだけです

ちなみにデフォルトサイズは、フォントもアイコンも「13px」です。僕は、上にある「フォント15px」「アイコン18px」に変更。画像で説明すると・・・左側が変更前、右側が変更後。

右側のサイズの方が見やすいですよね。もちろん好みはありますけど、訪問ユーザーを考えたサイズへ簡単に変更できますので、ぜひ試してみてください。

3.メニューアイコンを動くアニメーションにする

フッターメニューアイコンに、動きを付けた「アニメーション」にすることもできます。

こんな感じ　→　　　　

アニメーションで気を引くケースもあるし、女性なら可愛らしく表示したいってときにアクセントになりますよね。設定は簡単です。

step
1まずアニメーションにしたいメニューアイコンを選びましょう。

step
2メニューアイコンが決まったら、表示されたHMTLコードをコピーしておき、メモ帳などにペーストしておきます。

step
3上の基本HTMLコードに、以下アニメーションごと赤字部分のコードを追加して「ナビゲーションラベル」にペーストすれば出来上がり。

アイコンに合わせたアニメーションを選んでみてください。

まとめ

昨今からスマホユーザーとパソコンユーザーが、逆転していく時代になってきているので、スマホユーザー向けのユーザビリティを考えていかないといけませんよね。

そのひとつの「スマホフッターメニュー」は、記事が多い少ない、初心者上級者関係なく設置した方が絶対いいです。

サイトに合わせたフッターメニューを設置しましょう！

ではまた(◎´▽`)ﾉｼ