AFFINGER5(アフィンガー5)でスマホ用フッター固定メニューを表示する方法を解説します。
ブログのスマホ用フッター固定メニューを使う目的は主に固定ファン作りです。
ブログは放っておいても固定ファンは増えません。
固定ファンを増やすことに成功すれば、SEOに関係なくブログのアクセス数を増やすことができます。
SNSやLINEへ登録してもらうことができれば、たまたまブログに訪れた読者をリピーターにすることができます。
ブログで固定読者を増やす施策をしているかしていないかで、将来的な固定ファンの獲得数が全く異なってきます。

目次
AFFINGER5でスマホ用フッター固定メニューを表示
スマホのフッター固定メニューとはこのようなメニューです。

フッターッター固定メニュー

簡単にいうとリピート率が上がります。

1ユーザーが2ページ閲覧している
1ユーザーが2ページ、3ページとブログ記事を読んでくれれば、ページセッション数というのが上がり、総PV数が上がります。
- 100人が2ページ読んでくれれば200PV
- 1000人が2ページ読んでくれれば2000PV
- 1万人が2ページ読んでくれれば2万PV
- 5万人が2ページ読んでくれれば10万PV
このようにアクセス数は倍増するのです。
LINEやTwitterフォロワーなどを増やすことで、ブログ記事をみてもらう動機を増やすことができます。
固定読者を獲得する施策として、フッター固定メニューは必ず目に入るので非常に有効な方法です。
AFFINGER5でスマホ用フッター固定メニューを表示する手順
アフィンガーの公式サイトでもスマホ用フッターメニューの設定方法が解説されていますが、少しわかりにくいので詳しく解説していきます。
- スマホ用フッターメニューを設定
- メニューを装飾する
メニューを設定するのは簡単ですが、メニューの装飾が少し難易度が上がります。

スマホ用フッターメニューを設定
外観 → メニュー →「スマホ用フッター」を設定
カスタムリンク設定例
<i class="fa fa-heart"></i><br />無料プレゼント
<i class="fa fa-comments"></i><br />LINE
<i class="fa fa-twitter"></i><br />Twitter

AFFINGER5管理 → メニュー →「その他のスマホ用メニュー」で「スマホ用フッターメニューを表示する」にチェックを入れる
これで一応スマホ用フッター固定メニューが表示されるようになります。
WEBアイコンを装飾する
そのままだと、WEBアイコンが表示されているだけなので、色をつけたり大きさを変えます。
このブログの場合、以下のスタイルシートを入れてます。
#st-footermenubox ul.menu li .fa{
font-size:40px;
}#st-footermenubox ul.menu li .fa-heart{
color: #f44336;
}
#st-footermenubox ul.menu li .fa-comments{
color: #39b900;
}
#st-footermenubox ul.menu li .fa-twitter{
color: #40a2f5;
}
カスタマイズ → 「追加CSS」にコピペします。
これで一応、当ブログと同じようにスマホ用フッター固定メニューがひょうじされるようになります。
もっといろいろカスタムしたい人はサルワカというブログで詳しく丁寧に解説されているので参考にしてみてください。
【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう|サルワカ
WEBアイコンの使い方 FontAwesomeIcons
WEBアイコンの使い方を覚えるのが初心者の人には難しいかもしれません。
AFFINGER5 → その他 → 「FontAwesomeIcon4.7.0」にチェックを入れる
アフィンガー5ではFontAwesomeIconのバーション4まで対応していますが、その後のバージョンが使えない場合があります。
これにチェックを入れることで使えるWEBアイコンが増えます。
とはいえ、本当に表示されるかはコードを表示してみないとわかりません。
表示されないWEBアイコンもあります。
公式サイトで文字コードを調べてコピペします。
よく使われるWEBアイコン一覧
WEBアイコン | 表示 | コード |
home | <i class="fa fa-home"></i> | |
<i class="fa fa-twitter"></i> | ||
<i class="fa fa-instagram"></i> | ||
chat | <i class="fa fa-comments"></i> | |
file | <i class="fa fa-file"></i> | |
user | <i class="fa fa-user"></i> |
※LINEはアフィンガーではうまく表示されません
-
-
AFFINGER6アップデート方法
2021/1/10
AFFINGER5からAFFINGER6にアップデートする方法 AFFINGER5からAFFINGER6にアップデートして不具合をチェックする方法をまとめます。 AFFINGER6 レビュー! Wor ...
-
-
AFFINGER無料版テーマ STINGER
2021/1/10
AFFINGERの無料版ってないの? そんな疑問にお答えします。 AFFINGER無料版テーマ STINGER あまり白rていないかもしれませんが、AFFINGERの同じ制作者が作ってい ...
-
-
AFFINGER5 デザイン済みデータ設定・リセット方法
2021/1/10
有料WordPressテーマ『WING-AFFINGER5』はデザイン済みデータが無料で配布されています。 デザイン済みデータ配布ページ(β)|STINGER STORE 導入したい人は参考にしてくだ ...
-
-
AFFINGER6 レビュー! WordPressテーマ ACTION(AFFINGER6 / STINGER PRO3)
2021/1/17
AFFINGER6はAFFINGER5を購入すればすぐに使えます。 AFFINGERの新バージョン「AFFINGER 6(アフィンガー6)」の公開が公式サイトでアナウンスされています。 テーマ名はWI ...
-
-
アフィンガー(AFFINGER)とは?
2021/1/17
目次アフィンガー(AFFINGER)とは? AFFINGERレビューACTION AFFINGER6 アフィンガー6WordPressテーマ WING(AFFINGER5)AFFINGER5特典付きレ ...
アフィンガー5(AFFINGER5)はこんな人におすすめ
- HTML + CSSの知識がなくても記事の装飾をよくしたい
- 個人でアフィリエイトや情報発信を本格的に始めたい
- 無料のものを使うより有料のものを使って利益に差をつけたい
- ブログを高速化させてSEO対策をしたい
- 検索順位を上げてアクセスと収益を上げたい
アフィンガー5(AFFINGER5) 当ブログ限定特典
当ブログからアフィンガー5(AFFINGER5)を購入してくれた人にオリジナルの特典を用意しました。
この特典は当ブログが独自に用意した非公式の特典なので他では入手できません。
特典に関するお問い合わせ等はYoake Webまでお願いします。
YOAKE WEBオリジナル10特典・内容
- AFFINGER5 特典1 稼げるキーワード
- AFFINGER5 特典2 会員限定有料ブログ閲覧権(通常9800円)
- AFFINGER5 特典3 ブログの始め方
- AFFINGER5 特典4 セルフプロデュース講座
- AFFINGER5 特典5 自動収益システム構築法
- AFFINGER5 特典6 あなたにメリットをもたらす"7つの習慣"速習
- AFFINGER5 特典7 【2020年】AdSense(アドセンス)審査に合格する方法
- AFFINGER5 特典8 再配布OKの特典プレゼント
- AFFINGER5 特典9 WordPress・AFFINGER5 構築チェックシート
- AFFINGER5 特典10 ブログ動画講座(30分)

私もプチ目標である月収50万円をはるかに超えることができました。
続きを見る
AFFINGER6 レビュー! WordPressテーマ ACTION(AFFINGER6 / STINGER PRO3)