ブログ

【AFFINGER6】目次/トップ/ホームなどへ飛ぶ設定【スマホフッターメニュー】

AFFINGER6でもプラグイン無しで、

  • ページトップへ戻るをつけたい！
  • 目次へ戻るをつけたい！
  • ホームへ戻るをつけたい！
  • 収益記事へ飛ぶフッターをつけたい！

と思ったことはありませんか？

これらを実装することでユーザービリティが向上し、滞在時間が長くなります。つまり、グーグルから評価され、ブログ順位が上がりやすくなります。

また、せっかくAFFINGER6を購入したのだから、他のテーマにデザインでも負けたくないですよね！

うみ

この記事でそんな悩みを解決しましょう！

できるだけ簡単に、分かりやすく図解で説明するのでご安心ください。

それでは、さっそく作り方を確認しましょう！

本記事で出来るスマホフッター（サンプル）

図１．スマホフッターメニュー例

タップできる目次
  1. STEP1：新しいメニューを用意する
  2. STEP2：スマホフッターメニューを作成
  3. STEP3：カスタムリンクを設定
  4. STEP4：スマホフッターを表示させる
  5. STEP5：スマホフッターメニューの色を変える
  6. AFFINGER6でホーム/目次/トップへ飛ぶスマホフッターメニューを作ろう！

STEP1：新しいメニューを用意する

まず、メニューを準備します。

操作内容

  • 「外観」を選択
  • 「メニュー」を選択
  • 「新しいメニューを作成」を選択

下図参照。①②③の順にクリックするだけでOKです。

図２．新しいメニューを作成

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

次に、スマホフッターメニューを作成します。

操作内容

  • メニュー名に「スマホフッターメニュー」と記入
  • 「スマホフッターメニュー」を選択
  • 「メニューを作成」を選択

下図参照。①は分かりやすい名称なら何でも大丈夫。①記入後は②③の順にクリックするだけでOKです。

図３．スマホフッターメニューを作成

STEP3：カスタムリンクを設定

続いて、カスタムリンクを設定します。

操作内容

  • 「カスタムリンク」を選択
  • 「URL」欄に飛びたいURLを設定（設定詳細は追って説明）
  • 「リンク文字列」欄に表示させたい絵と文字を入力（上記②に合わせる）
  • 「メニューに追加」を選択
  • ① ~ ④を繰り返し、必要なメニュー(ホーム・目次・トップなど)を追加したら「メニューを作成」を選択

下図参照。

図４．カスタムリンクを設定

②③にホーム・トップ・目次を設定する方法を以下に示します。

カスタムリンクに【ホーム】を設定する

スマホフッターメニューのカスタムリンクに【ホーム】を設定する手順は以下の通りです。

STEP
「URL」欄の設定

図４の②「URL」欄にご自身のブログ・サイトのホームページURLを記入ください。

本ブログの場合は『https://ocean2626.com/』です。

STEP
「リンク文字列」欄の設定

以下のコードを図４③「リンク文字列」欄に記入（コピペ）します。

<i class="fa-solid fa-house"></i><br>HOME

上記のままご使用いただいてもかまいません。

しかし、以下の解説を確認し、ブログに合わせたデザインにするとより見栄えが良くなるでしょう。

解説

  • このままコピペすると、本ブログ スマホフッターのHOMEと同じデザインになる
  • <i class ~ br> までを削除すると、文字だけになる
  • <i class=""></i> は絵文字を意味する
    絵文字は Font Awesome というサイトから好きなものを選べる
    ※英語サイトなので英語で検索すること（house など）

図５．Font Awesomeの例

  • <br> は絵文字と文字「HOME」を改行するために用いる
    削除すると改行されなくなる
  • HOME は好きな文字列に変更可能（ホーム など）

以上で【ホーム】をスマホフッター・カスタムリンクに追加できました。

カスタムリンクに【トップへ戻る】を設定する

スマホフッターメニューのカスタムリンクに【トップへ戻る】を設定する手順は以下の通りです。

STEP
「URL」欄の設定

図４の②「URL」欄に「#wrapper」を記入ください。

STEP
「リンク文字列」欄の設定

以下のコードを図４③「リンク文字列」欄に記入（コピペ）します。

<i class="fa fa-chevron-circle-up"></i><br>TOP

上記のままご使用いただいてもかまいません。

しかし、以下の解説を確認し、ブログに合わせたデザインにするとより見栄えが良くなるでしょう。

解説

  • このままコピペすると、本ブログ スマホフッターのTOPと同じデザインになる
  • <i class ~ br> までを削除すると、文字だけになる
  • <i class=""></i> は絵文字を意味する
    絵文字は Font Awesome というサイトから好きなものを選べる
    ※英語サイトなので英語で検索すること（house など）

図５．Font Awesomeの例

  • <br> は絵文字と文字「TOP」を改行するために用いる
    削除すると改行されなくなる
  • TOP は好きな文字列に変更可能（トップ など）

以上で【トップへ戻る】をスマホフッター・カスタムリンクに追加できました。

カスタムリンクに【目次へ戻る】を設定する

スマホフッターメニューのカスタムリンクに【目次へ戻る】を設定する手順は以下の通りです。

STEP
「URL」欄の設定

図４の②「URL」欄に目次プラグインごとのコードを記入てください。

代表的な目次プラグインごとのコードを以下に示します。

  • 「すごいもくじ」の場合：
    #st_toc_container
  • 「RTOC」の場合：
    #rtoc-mokuji-wrapper
  • 「Table of Contents Plus」の場合：
    #toc_container
  • 「Easy Table of Contents」の場合：
    #ez-toc-container

上記にない場合はお問い合わせもしくは本記事にコメントください。調べてご連絡します。

STEP
「リンク文字列」欄の設定

以下のコードを図４③「リンク文字列」欄に記入（コピペ）します。

<i class="fa-solid fa-book"></i><br>目次

上記のままご使用いただいてもかまいません。

しかし、以下の解説を確認し、ブログに合わせたデザインにするとより見栄えが良くなるでしょう。

解説

  • このままコピペすると、本ブログ スマホフッターの目次と同じデザインになる
  • <i class ~ br> までを削除すると、文字だけになる
  • <i class=""></i> は絵文字を意味する
    絵文字は Font Awesome というサイトから好きなものを選べる
    ※英語サイトなので英語で検索すること（house など）

図５．Font Awesomeの例

  • <br> は絵文字と文字「目次」を改行するために用いる
    削除すると改行されなくなる
  • 目次 は好きな文字列に変更可能

以上で【目次へ戻る】をスマホフッター・カスタムリンクに追加できました。

任意のページへ飛ぶように設定する

上記の「カスタムリンクに【ホーム】を設定する手順」を参考に、「URL」欄を任意のURLとすればOKです。

設定したURLに合わせ、絵文字・文字列の変更もお忘れなく！

STEP4：スマホフッターを表示させる

スマホフッターメニューを表示させるための設定をします。

操作内容

  • 「AFFINGER管理」を選択
  • 「メニュー設定」を選択
  • 少し下にスクロールして「スマホフッターメニューを表示する」を選択
  • 「Save」を選択

下図参照。何も考えずに押し進めるだけでOKです。

図６．スマホフッターメニューを表示させる設定

STEP5：スマホフッターメニューの色を変える

最後にスマホフッターメニューの色を変更します。
※何もしないと黒文字・白背景になっています。それでよければ、このSTEPは不要です。

操作内容

  • 「外観」を選択
  • 「カスタマイズ」を選択
  • 「 - 各メニュー設定」を選択
  • 「スマホフッターメニュー」を選択
  • 「文字色」を好きな色へ変更
  • 「背景色」を好きな色へ変更
  • 「アイコンサイズ」を好きなサイズへ変更

下図参照。

図７．スマホフッターメニューの色変更

AFFINGER6でホーム/目次/トップへ飛ぶスマホフッターメニューを作ろう！

本記事では「【AFFINGER6】目次/トップ/ホームなどへ飛ぶ設定【スマホフッター】」を解説しました。

これでユーザービリティが向上し、Googleからのブログ・サイトの評価も少しずつ上がります。

ぜひ、ご自身のサイトに合わせた素敵なスマホフッターメニューを作成してみてください。

本記事で出来るスマホフッター（サンプル）

図１．スマホフッターメニュー例

不明点等あれば、コメントいただけると嬉しいです。

AFFINGER6カスタマイズ関連記事

2023/3/30

【AFFINGER6】目次をRTOCでサイドバー追従+ハイライトさせよう！【Rich Table of Contentsでキレイな目次】

AFFINGER6で、 キレイな目次を簡単に作りたい！PC表示で目次をサイドバー追従させたい！サイドバー追従の目次を現在位置でハイライトさせたい！サイドバー追従の目次のh3見出しを折りたたみたい！ と思ったことはありませんか？ これらを実装することでブログ来訪者が好きな見出しへ簡単に飛べます。 ユーザビリティが向上することで滞在時間が長くなり、ブログ順位が上がりやすくなります。 できるだけ簡単に、分かりやすく図解で説明するのでご安心ください。 それでは、さっそく作り方を確認しましょう！ ※現在当ブログでは ...

ReadMore

2023/3/8

【AFFINGER6】目次/トップ/ホームなどへ飛ぶ設定【スマホフッターメニュー】

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

ReadMore

2023/3/2

【AFFINGER6】一番簡単な表の作り方【横スクロール・列固定も】

AFFINGER6で表を作るときに、 簡単に表を作りたい！ 横スクロールさせたい！ 横スクロールさせたときに一番左の一列目を固定させたい！ エクセルからコピペしたい！ と思ったことはありませんか？ この記事を見て、ほとんどコピペするだけでとても簡単に作れます。 さっそく作り方を確認しましょう！ 本記事で出来る表（サンプル） タップできる目次 STEP1：プラグインの導入STEP2：CSSをコピペSTEP3：function.phpにコードコピペSTEP4：HTMLをコピペSTEP5：ビジュアル編集する上手 ...

ReadMore

当サイトでは、ブログツールの他、格安SIMの情報を数多く取り扱っています。データ通信量別最安プランの紹介なども行っていますので、あわせてご参照ください。

あわせて読みたい

▼本サイトの情報リンク▼

データ通信量別最安SIM

  • 1ギガ（GB）最安SIMはこちら👈

  • 2ギガ（GB）最安SIMはこちら👈

  • 3ギガ（GB）最安SIMはこちら👈
    ・・・スマホ利用者の60%以上をカバー

  • 4ギガ（GB）最安SIMはこちら👈

  • 5ギガ（GB）最安SIMはこちら👈
    ・・・スマホ利用者の70%以上をカバー

  • 6ギガ（GB）最安SIMはこちら👈

  • 7ギガ（GB）最安SIMはこちら👈

  • 8ギガ（GB）最安SIMはこちら👈

  • 10ギガ（GB）最安SIMはこちら👈
    ・・・スマホ利用者の80%以上をカバー

  • 15ギガ（GB）最安SIMはこちら👈

  • 20ギガ（GB）最安SIMはこちら👈
    ・・・スマホ利用者の90%以上をカバー

MMRIの調査結果抜粋

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



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



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



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



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



  • この記事を書いた人

うみ

格安SIM・格安スマホのコンサル ➡携帯・スマホの安い運用方法を18年(2005年~)研究。2023年1月時点で累計64回線分、合計770万円以上の節約に寄与！自身は5回線を0円運用中。 また、ガジェットにも精通。スマホやスマートウォッチ、その他心躍るガジェットを安く個人輸入・調達・試して変えてを繰り返している。

-ブログ
-,