
AFFINGER6でもプラグイン無しで、
- ページトップへ戻るをつけたい!
- 目次へ戻るをつけたい!
- ホームへ戻るをつけたい!
- 収益記事へ飛ぶフッターをつけたい!
と思ったことはありませんか?
これらを実装することでユーザービリティが向上し、滞在時間が長くなります。つまり、グーグルから評価され、ブログ順位が上がりやすくなります。
また、せっかくAFFINGER6を購入したのだから、他のテーマにデザインでも負けたくないですよね!

この記事でそんな悩みを解決しましょう!
できるだけ簡単に、分かりやすく図解で説明するのでご安心ください。
それでは、さっそく作り方を確認しましょう!
本記事で出来るスマホフッター(サンプル)


STEP1:新しいメニューを用意する
まず、メニューを準備します。
操作内容
- 「外観」を選択
- 「メニュー」を選択
- 「新しいメニューを作成」を選択
下図参照。①②③の順にクリックするだけでOKです。
STEP2:スマホフッターメニューを作成
次に、スマホフッターメニューを作成します。
操作内容
- メニュー名に「スマホフッターメニュー」と記入
- 「スマホフッターメニュー」を選択
- 「メニューを作成」を選択
下図参照。①は分かりやすい名称なら何でも大丈夫。①記入後は②③の順にクリックするだけでOKです。
STEP3:カスタムリンクを設定
続いて、カスタムリンクを設定します。
操作内容
- 「カスタムリンク」を選択
- 「URL」欄に飛びたいURLを設定(設定詳細は追って説明)
- 「リンク文字列」欄に表示させたい絵と文字を入力(上記②に合わせる)
- 「メニューに追加」を選択
- ① ~ ④を繰り返し、必要なメニュー(ホーム・目次・トップなど)を追加したら「メニューを作成」を選択
下図参照。
②③にホーム・トップ・目次を設定する方法を以下に示します。
カスタムリンクに【ホーム】を設定する
スマホフッターメニューのカスタムリンクに【ホーム】を設定する手順は以下の通りです。
図4の②「URL」欄にご自身のブログ・サイトのホームページURLを記入ください。
本ブログの場合は『https://ocean2626.jp/』です。
以下のコードを図4③「リンク文字列」欄に記入(コピペ)します。
<i class="fa-solid fa-house"></i><br>HOME
上記のままご使用いただいてもかまいません。
しかし、以下の解説を確認し、ブログに合わせたデザインにするとより見栄えが良くなるでしょう。
解説
- このままコピペすると、本ブログ スマホフッターのHOMEと同じデザインになる
- <i class ~ br> までを削除すると、文字だけになる
- <i class=””></i> は絵文字を意味する
絵文字は Font Awesome というサイトから好きなものを選べる
※英語サイトなので英語で検索すること(house など)


- <br> は絵文字と文字「HOME」を改行するために用いる
削除すると改行されなくなる - HOME は好きな文字列に変更可能(ホーム など)
以上で【ホーム】をスマホフッター・カスタムリンクに追加できました。
カスタムリンクに【トップへ戻る】を設定する
スマホフッターメニューのカスタムリンクに【トップへ戻る】を設定する手順は以下の通りです。
図4の②「URL」欄に「#wrapper」を記入ください。
以下のコードを図4③「リンク文字列」欄に記入(コピペ)します。
<i class="fa fa-chevron-circle-up"></i><br>TOP
上記のままご使用いただいてもかまいません。
しかし、以下の解説を確認し、ブログに合わせたデザインにするとより見栄えが良くなるでしょう。
解説
- このままコピペすると、本ブログ スマホフッターのTOPと同じデザインになる
- <i class ~ br> までを削除すると、文字だけになる
- <i class=””></i> は絵文字を意味する
絵文字は Font Awesome というサイトから好きなものを選べる
※英語サイトなので英語で検索すること(house など)


- <br> は絵文字と文字「TOP」を改行するために用いる
削除すると改行されなくなる - TOP は好きな文字列に変更可能(トップ など)
以上で【トップへ戻る】をスマホフッター・カスタムリンクに追加できました。
カスタムリンクに【目次へ戻る】を設定する
スマホフッターメニューのカスタムリンクに【目次へ戻る】を設定する手順は以下の通りです。
以下のコードを図4③「リンク文字列」欄に記入(コピペ)します。
<i class="fa-solid fa-book"></i><br>目次
上記のままご使用いただいてもかまいません。
しかし、以下の解説を確認し、ブログに合わせたデザインにするとより見栄えが良くなるでしょう。
解説
- このままコピペすると、本ブログ スマホフッターの目次と同じデザインになる
- <i class ~ br> までを削除すると、文字だけになる
- <i class=””></i> は絵文字を意味する
絵文字は Font Awesome というサイトから好きなものを選べる
※英語サイトなので英語で検索すること(house など)


- <br> は絵文字と文字「目次」を改行するために用いる
削除すると改行されなくなる - 目次 は好きな文字列に変更可能
以上で【目次へ戻る】をスマホフッター・カスタムリンクに追加できました。
任意のページへ飛ぶように設定する
上記の「カスタムリンクに【ホーム】を設定する手順」を参考に、「URL」欄を任意のURLとすればOKです。
設定したURLに合わせ、絵文字・文字列の変更もお忘れなく!
STEP4:スマホフッターを表示させる
スマホフッターメニューを表示させるための設定をします。
操作内容
- 「AFFINGER管理」を選択
- 「メニュー設定」を選択
- 少し下にスクロールして「スマホフッターメニューを表示する」を選択
- 「Save」を選択
下図参照。何も考えずに押し進めるだけでOKです。
STEP5:スマホフッターメニューの色を変える
最後にスマホフッターメニューの色を変更します。
※何もしないと黒文字・白背景になっています。それでよければ、このSTEPは不要です。
操作内容
- 「外観」を選択
- 「カスタマイズ」を選択
- 「 – 各メニュー設定」を選択
- 「スマホフッターメニュー」を選択
- 「文字色」を好きな色へ変更
- 「背景色」を好きな色へ変更
- 「アイコンサイズ」を好きなサイズへ変更
下図参照。
AFFINGER6でホーム/目次/トップへ飛ぶスマホフッターメニューを作ろう!
本記事では「【AFFINGER6】目次/トップ/ホームなどへ飛ぶ設定【スマホフッター】」を解説しました。
これでユーザービリティが向上し、Googleからのブログ・サイトの評価も少しずつ上がります。
ぜひ、ご自身のサイトに合わせた素敵なスマホフッターメニューを作成してみてください。
本記事で出来るスマホフッター(サンプル)


不明点等あれば、コメントいただけると嬉しいです。
AFFINGER6カスタマイズ関連記事
当サイトでは、ブログツールの他、格安SIMの情報を数多く取り扱っています。データ通信量別最安プランの紹介なども行っていますので、あわせてご参照ください。
あわせて読みたい
- スマホの保険に入るなら比較して!
~ちょっと待って、キャリアやApple公式の保険に入ってない?!~ - スマホを自分で探せるようにしよう
~紛失時・盗難時も焦らない&慌てないで大丈夫!~
▼本サイトの情報リンク▼
データ通信量別最安SIM


▼スマホを賢く買うなら【ダイワンテレコム】▼


▼スマホの修理は【モバイル保険】▼


▼電気代の見直しは【電気チョイス】▼


▼法人向けレンタルサーバーは【エックスサーバー】▼


▼個人向けレンタルサーバーは【ConoHa WING】▼


コメント