\クリックで応援!/

AFFINGER5 WordPress

AFFINGER5でスマホ用フッター固定メニューを表示

よあけウェブ

WEBマスター歴20年以上/元WEBデザイナー(出版社のHPなど)
ブログ収入1000万円突破、メルマガ読者1200人超え
資格:ネットショップ実務士レベル1/基礎心理カウンセラー
趣味:ブログ・音楽・筋トレなど

AFFINGER5(アフィンガー5)でスマホ用フッター固定メニューを表示する方法を解説します。

 

ブログのスマホ用フッター固定メニューを使う目的は主に固定ファン作りです。
ブログは放っておいても固定ファンは増えません。

固定ファンを増やすことに成功すれば、SEOに関係なくブログのアクセス数を増やすことができます。

SNSやLINEへ登録してもらうことができれば、たまたまブログに訪れた読者をリピーターにすることができます。

ブログで固定読者を増やす施策をしているかしていないかで、将来的な固定ファンの獲得数が全く異なってきます。

ふなさん
アフィンガー5を使えば、むずかしいコードを書いたりする必要がなく、スマホ用固定フッターを表示することができるようになります。

 

AFFINGER5でスマホ用フッター固定メニューを表示

スマホのフッター固定メニューとはこのようなメニューです。

AFFINGER5でスマホ用フッター固定メニューを表示

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

 

ふなさん
スマホのフッター固定メニューを効果的に使うと、ブログのアクセス数が凄くわ変わってくるんですよね。

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

 

1ユーザーが2ページ閲覧している

 

1ユーザーが2ページ、3ページとブログ記事を読んでくれれば、ページセッション数というのが上がり、総PV数が上がります。

 

  • 100人が2ページ読んでくれれば200PV
  • 1000人が2ページ読んでくれれば2000PV
  • 1万人が2ページ読んでくれれば2万PV
  • 5万人が2ページ読んでくれれば10万PV

このようにアクセス数は倍増するのです。

 

LINEやTwitterフォロワーなどを増やすことで、ブログ記事をみてもらう動機を増やすことができます。

固定読者を獲得する施策として、フッター固定メニューは必ず目に入るので非常に有効な方法です。

 

AFFINGER5でスマホ用フッター固定メニューを表示する手順

アフィンガーの公式サイトでもスマホ用フッターメニューの設定方法が解説されていますが、少しわかりにくいので詳しく解説していきます。

スマホ用フッターメニューの追加|アフィンガー公式サイト

 

  1. スマホ用フッターメニューを設定
  2. メニューを装飾する

 

メニューを設定するのは簡単ですが、メニューの装飾が少し難易度が上がります。

 

AFFINGER5でスマホ用フッター固定メニューを表示

スマホ用フッターメニューを設定

 

外観 → メニュー →「スマホ用フッター」を設定

 

カスタムリンク設定例

<i class="fa fa-heart"></i><br />無料プレゼント

<i class="fa fa-comments"></i><br />LINE

<i class="fa fa-twitter"></i><br />Twitter

 

ふなさん
メニュー数は3つぐらいがおすすめです

 

AFFINGER5でスマホ用フッター固定メニューを表示

AFFINGER5管理 → メニュー →「その他のスマホ用メニュー」で「スマホ用フッターメニューを表示する」にチェックを入れる

 

これで一応スマホ用フッター固定メニューが表示されるようになります。

 

WEBアイコンを装飾する

そのままだと、WEBアイコンが表示されているだけなので、色をつけたり大きさを変えます。

AFFINGER5でスマホ用フッター固定メニューを表示

 

このブログの場合、以下のスタイルシートを入れてます。

 

#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でスマホ用フッター固定メニューを表示

AFFINGER5 → その他 → 「FontAwesomeIcon4.7.0」にチェックを入れる

 

アフィンガー5ではFontAwesomeIconのバーション4まで対応していますが、その後のバージョンが使えない場合があります。
これにチェックを入れることで使えるWEBアイコンが増えます。

とはいえ、本当に表示されるかはコードを表示してみないとわかりません。

表示されないWEBアイコンもあります。

 

fontawesome

Font Awesome Free

 

公式サイトで文字コードを調べてコピペします。

 

よく使われるWEBアイコン一覧

WEBアイコン 表示 コード
home <i class="fa fa-home"></i>
twitter <i class="fa fa-twitter"></i>
instagram <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はアフィンガーではうまく表示されません

 

 

AFFINGER5 BLOG WordPress

AFFINGER6アップデート方法

2021/1/10

AFFINGER5からAFFINGER6にアップデートする方法 AFFINGER5からAFFINGER6にアップデートして不具合をチェックする方法をまとめます。 AFFINGER6 レビュー! Wor ...

AFFINGER5 WordPress

AFFINGER無料版テーマ STINGER

2021/1/10

AFFINGERの無料版ってないの? そんな疑問にお答えします。   AFFINGER無料版テーマ STINGER あまり白rていないかもしれませんが、AFFINGERの同じ制作者が作ってい ...

AFFINGER5 WordPress

AFFINGER5 デザイン済みデータ設定・リセット方法

2021/1/10

有料WordPressテーマ『WING-AFFINGER5』はデザイン済みデータが無料で配布されています。 デザイン済みデータ配布ページ(β)|STINGER STORE 導入したい人は参考にしてくだ ...

affinger6 ACTION

AFFINGER5 WordPress

AFFINGER6 レビュー! WordPressテーマ ACTION(AFFINGER6 / STINGER PRO3)

2021/1/17

AFFINGER6はAFFINGER5を購入すればすぐに使えます。 AFFINGERの新バージョン「AFFINGER 6(アフィンガー6)」の公開が公式サイトでアナウンスされています。 テーマ名はWI ...

AFFINGER5 WordPress

アフィンガー(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万円をはるかに超えることができました。

 

AFFINGER5 / WING

当ブログ限定特典付きで購入

パワフルに収入UP!SEOに強い本格WordPressテーマ

 

ブログを読んだらクリックでお知らせしてくれると飛んでよろびますヽ(´▽`)/

LINE登録でプレゼント

初心者にとってはじめの1万円を稼ぐハードルが高いのです

ブログではじめの1万円を稼ぐ方法

 

\迷わずにはじめの一歩を踏み出すブログ入門/

・ブログの始め方

・ブログの固定ファンを増やす方法

・【特別掲載】AdSense審査に合格する方法

友だち追加

おしらせ

ネットはやっぱり面白い: 20年ほどネットで稼いでいる変な人の思考 (YOAKE Web) Kindleを出版しました。 『ネットはやっぱり面白い』 令和、新型コロナ、外出自粛・・・ どんどん時代が変わる中、1999年から20年ほどネットで稼ぎ続けている変な人が書いた本。 とにかく現代では最低限生きていくために必要なことのひとつとして、求められていることは「自宅に居ながらにして収入を得る」ということではないだろうか? Amazonで購入

にほんブログ村 ブログブログ ブログノウハウへ

\記事が役に立ったと思ったらシェアや感想をお願いします/

  • この記事を書いた人
  • 最新記事

よあけウェブ

WEBマスター歴20年以上/元WEBデザイナー(出版社のHPなど)
ブログ収入1000万円突破、メルマガ読者1200人超え
資格:ネットショップ実務士レベル1/基礎心理カウンセラー
趣味:ブログ・音楽・筋トレなど

-AFFINGER5, WordPress