AFFINGER 使い方

AFFINGER6

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

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 fas fa-heart"></i><br />無料プレゼント

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

<i class="fa fas 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 .fas fa-heart{
color: #f44336;
}
#st-footermenubox ul.menu li .fas fa-comments{
color: #39b900;
}
#st-footermenubox ul.menu li .fas 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 fas fa-home"></i>
twitter   <i class="fa fas fa-twitter"></i>
instagram   <i class="fa fas fa-instagram"></i>
chat   <i class="fa fas fa-comments"></i>
file   <i class="fa fas fa-file"></i>
user   <i class="fa fas fa-user"></i>

※LINEはアフィンガーではうまく表示されません。

AFFINGERの購入リンクはこちら

AFFINGER 11特典付き購入

ノウハウ付き当ブログ限定11特典

当ブログ限定特典詳細

AFFINGER6 ブロックエディタ対応

AFFINGERの購入方法

  1. アフィンガー料金 WordPress有料テーマ比較!AFFINGER購入レビュー
  2. AFFINGER6にアップデート可能・特典付き購入方法
  3. AFFINGER PACK3【当ブログ限定】特典付き購入リンク

AFFINGERの使い方・設定・購入方法

  1. AFFINGERとは?購入手順&カスタマイズ方法 初心者向け【簡単です】
  2. AFFINGER5の使い方・設定・記事の書き方【初心者向けまとめ】
  3. AFFINGER5(アフィンガー5)デメリットとは?デメリット解消法
  4. AFFINGER5の初期設定は簡単!初心者でもできる使い方を解説!

AFFINGER カスタマイズ ガイド

  1. AFFINGERでスマホ用フッター固定メニューを表示
  2. 【超重要】AFFINGER5 記事一覧の使い方|おすすめ記事・人気記事の設定
  3. AFFINGER5会話吹き出しの使い方・口コミ評価お客様の声の作り方
  4. AFFINGER5(アフィンガー5)目次プラグイン 公式以外のおすすめ

おしらせ

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

販売コンテンツ


友だち追加

今日はランキング何位?

当ブログ人気【第1位】AFFINGER6

affinger6 ACTION

アフィリエイトに強いWordPressテーマ「AFFINGER6」

ついにブロックエディタに対応。

【第2位】AFFINGER PACK3

AFFINGER EXと強力な分析ツールがセットになった「AFFINGER PACK3」

【第3位】SANGO

ブロックエディタに完全対応。

ブログ初心者向けの簡単設定でおしゃれなデザインに。

表示速度も軽い有料テーマ。

1万円以内で使い回しOKの有料テーマ。

  • この記事を書いた人

よあけウェブ

【著者プロフィール】ふなさん
▶︎ WEBマスター歴20年以上/元WEBデザイナー(出版社のHPなど)
▶︎ WordPress構築歴は10年以上
▶︎ 資格:ネットショップ実務士レベル1/基礎心理カウンセラー
▶︎ WordPress構築最適化・テーマの活用方法・アフィリエイトブログの作り方など発信
▶︎ ブログ収入は1000万円以上を達成しています。
▶︎ 掲載しているノウハウ・結果には個人差があり、成果を保証するものではありません

▶︎ 趣味:ブログ・音楽・筋トレなど

-AFFINGER6