スマホユーザーへ訴求する重要なポジションとも言えるのがフッターメニューですよね。
この記事ではAFFINGER5でスマホ用フッターメニューを設置する手順と方法をご紹介します。
WordPressにある程度慣れている方なら、5分もあれば設置できますので手順を追って進めていきましょう。
＼「本気」で収益化するなら ／
-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -
WING AFFINGER5
今なら「クレジット削除プラグイン」配布キャンペーン中！
Contents
作成する2つの注意点
スマホフッターメニューは、ユーザーへ誘導できるメニューとして効果的な反面、注意する点も確認しておきましょう。
メニューは4つまで設置が適当
フッターメニューは多く設置すると・・・
アイコンや文字が小さくなりメニューが見えづらくなる
メニューが多い＝選択肢が広くクリック率が下がる
メニューひとつひとつの「価値」が下がる
逆を言えば、フッターメニューが少ないほど見えやすい・クリック率が上がる・メニュー価値が上がります。
メニューは4つまでに抑えて必要最低限の設置を心がけましょう。
一番行動して欲しいものだけ設置する
記事を多く読んでもらいたい（PVアップを目的）なら、「人気記事」「おすすめ記事」などのメニューを設置すれば効果的ですし、フォロワーを増やしたい（Twitter、Facebookなど）なら、各SNSアカウントページを設置すると効果的ですね。
アレもコレも！とメニューを設置すると訪問ユーザーは迷ってしまい、結果的に何もしないでサイトを離脱してしまう確率が上がります。
厳選に厳選したメニューだけを設置するようにしましょう。
スマホフッター固定メニューの作り方
ではスマホメニューを作っていきましょう。
新しいメニューの作成
step
1新しいメニュー作成しましょうをクリック
WordPressダッシュボード画面より「外観」＞「メニュー」に進み、メニュー画面で「新しいメニューを作成しましょう。」のテキストリンクをクリックします。
step
2メニュー名を記入しスマートフォン用フッターメニューにチェック
まず「メニュー名」を記入して、メニュー設定は一番下「スマートフォン用フッターメニュー」にチェックし、「メニューを保存」しましょう
step
3スマホフッターへ設置するメニューを決める
スマホフッターへ設置するメニューを決めていきます。
メニューは「固定ページ」「投稿ページ」「カスタム」「カテゴリー」から選べます。
ホームメニューを追加
ホームメニューは、サイトトップページへ飛ぶリンクメニューです。
step
1固定ページタブホームにチェックしメニューに追加
固定ページタブを開き、全て表示タブから「ホーム」をチェックして「メニューに追加」します。
Twitterの「Follow」メニューを追加
Twitterを設置する場合、「Twitterアイコン」と「Followリンク」が必要になるので、AFFINGER5が対応している外部サイト「fontawesome v4.7」を利用します。
step
1「fontawesome v4.7」へアクセス、「Icons」をクリック
「fontawesome v4.7」へアクセスし、グローバルメニューにある「Icons」をクリックします。
step
2Twitterアイコンを検索
アイコンサーチ枠に「Twitter」と入力すると、下にTwitterアイコンが登場しますのでクリックしましょう
step
3Twitterアイコンのコードを取得
このページにTwitterアイコンを表示させるためのコードが取得できます。ちなみに、他のアイコンも同じ手順でコードを取得できます。
このコードを取得したら、WordPressメニュー作成に戻ります。
step
4コードを入力。TwitterフォローURLを入力。
カスタムリンクを開き、fontawesome v4.7で取得したコードを「リンク文字列」へ入力し、あなたのTwitterフォローURLを「URL」へ入力して、「メニューに追加」をクリックします
参考
URL≫ https://twitter.com/intent/follow?screen_name=WPThemeNavi(あなたのTwitterアカウント)
リンク文字列≫ <i class="fa fa-twitter" aria-hidden="true"></i><br/>(改行させるコード)Follow(表示する文字)
ページトップへ飛ぶメニューを追加
ページトップへ一気にスクロールするメニューです。
step
1カスタムリンクでURL入力とリンク文字列入力
カスタムリンクを開いて、URLには「#wrapper」と入力。リンク文字列は、fontawesomeで「」(角度倍増)を選んで入力しています
参考
URL≫ #wrapper
リンク文字列≫ <i class="fa fa-angle-double-up" aria-hidden="true"></i><br/>(改行させるコード)TOP(表示する文字)
最後にAFFINGER5管理で、メニューを表示する設定をしていきます。
固定メニュー表示設定
WordPressダッシュボードから「AFFINGER5 管理」に入って、2箇所にチェックを入れていきます。
step
1「メニュー」に入り、「スマホ用フッターメニューを表示する」にチェック
AFFINGER5管理メニューの「メニュー」に入り、下の方に「スマホ用フッターメニューを表示する」にチェックを入れてsaveします
step
2メニューの「その他」に入り、「ページ内スムーススクロールを使用する」にチェック
AFFINGER5管理メニューの「その他」に入り、その他の設定内にある「ページ内スムーススクロールを使用する」にチェックを入れて、一番下「保存」をクリックします
この2点の設定を完了すれば、スマホフッターに固定メニューが表示されます。
フッターメニューカスタマイズ
フッターメニュー文字色と背景色を変える
WordPressダッシュボードから「外観」＞「カスタマイズ」に進み、「メニューのカラー設定」＞「スマホフッターメニュー」と進めば、テキストの文字色と背景色を自由に変更できます。
フッターメニューのアイコンとテキストフォントのサイズを変える
AFFINGER5のデフォルトのフッターメニュー「アイコンサイズ」と「フォントサイズ」。このサイズも、簡単に変更可能です。
注意
簡単とは言えども「style.css」のコードを変更するので、あらかじめバックアップを取っておくorCSSコードをマルッとコピペしておくか、対策を取ってから実施しましょう。
step
1「外観」＞「テーマエディター」へ
WordPressダッシュボードから「外観」＞「テーマエディター」に進みます
step
2コードpxを変更するだけ
「style.css」にある「スマホフッターメニュー」の下にあるコードpxを変更するだけです。
フォントサイズ変更（列5877～）
#st-footermenubox ul.menu li{
display:table-cell;
vertical-align:middle;
text-align:center;
font-size:12px;
}
アイコンサイズ変更（列5884～）
#st-footermenubox ul.menu li .fa{
font-size:22px;
}
ちなみにデフォルトサイズは、フォントもアイコンも「13px」です。
私は、上にある「フォント12px」「アイコン22px」に変更。
簡単に変更できますので、ぜひ試してみてください。
【AFFINGER5】スマホフッターに固定メニューを設置する方法のまとめ
「スマホフッターメニュー」は、記事が多い少ない初心者上級者関係なく設置した方が絶対いいです。
サイトに合わせたフッターメニューを設置しましょう！