AFFINGER5 WordPress

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

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

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

この記事ではAFFINGER5でスマホ用フッターメニューを設置する手順と方法をご紹介します。

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

 

\「本気」で収益化するなら /

affinger5

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

ターゲットに合わせた圧倒的な最適化!
SEO対策と広告収入UPの機能が標準装備!
面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら「クレジット削除プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

 

作成する2つの注意点

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

 

メニューは4つまで設置が適当

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

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

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

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

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

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

 

一番行動して欲しいものだけ設置する

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

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

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

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

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

 

新しいメニューの作成

step
1
新しいメニュー作成しましょうをクリック

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

スマホフッターメニュー作成

 

step
2
メニュー名を記入しスマートフォン用フッターメニューにチェック

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

 

step
3
スマホフッターへ設置するメニューを決める

スマホフッターへ設置するメニューを決めていきます。

メニューは「固定ページ」「投稿ページ」「カスタム」「カテゴリー」から選べます。

スマホフッターメニュー作成7

 

ホームメニューを追加

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

step
1
固定ページタブホームにチェックしメニューに追加

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

スマホフッターメニュー作成8-min

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

 

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

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

 

step
1
「fontawesome v4.7」へアクセス、「Icons」をクリック

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

スマホフッターメニュー作成9-min

 

step
2
Twitterアイコンを検索

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

スマホフッターメニュー作成10-min

 

step
3
Twitterアイコンのコードを取得

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

スマホフッターメニュー作成11-min

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

 

step
4
コードを入力。TwitterフォローURLを入力。

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

スマホフッターメニュー作成12-min

参考

URL≫ https://twitter.com/intent/follow?screen_name=WPThemeNavi(あなたのTwitterアカウント)

リンク文字列≫ <i class="fa fa-twitter" aria-hidden="true"></i><br/>(改行させるコード)Follow(表示する文字)

アイコンとTwitterフォローそれぞれのコードが必要なので、ちょっと手こずりますけどね。 このコードをTwitterアカウントだけ差し替えれば、コピペで使えるのでぜひ活用してください♪
はるゆに

 

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

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

step
1
カスタムリンクでURL入力とリンク文字列入力

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

スマホフッターメニュー作成13-min

 

参考

URL≫ #wrapper

リンク文字列≫ <i class="fa fa-angle-double-up" aria-hidden="true"></i><br/>(改行させるコード)TOP(表示する文字)

これで、スマホフッター固定メニューが出来ました。
はるゆに

最後にAFFINGER5管理で、メニューを表示する設定をしていきます。

 

固定メニュー表示設定

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

step
1
「メニュー」に入り、「スマホ用フッターメニューを表示する」にチェック

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

スマホフッターメニュー作成14-min

 

step
2
メニューの「その他」に入り、「ページ内スムーススクロールを使用する」にチェック

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

スマホフッターメニュー作成15-min

 

この2点の設定を完了すれば、スマホフッターに固定メニューが表示されます。

 

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

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

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

スマホフッターメニューカスタマイズ-min

 

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

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】スマホフッターに固定メニューを設置する方法のまとめ

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

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

-AFFINGER5, WordPress

© 2022 はるゆにブログ Powered by AFFINGER5