
この疑問にこたえます。
フッターに「トップへ戻る」ボタンを設置している人は多いのですが、「目次へ戻る」ボタンを設置している人はあまり見かけませんよね・・?
あると便利だなぁと思いませんか?
今回は、スマホの下の部分(フッターメニュー)に目次へ戻るボタンを設置する方法を紹介します。
実際に僕のブログでも目次へ戻るボタンを設置できたので、同じようにやれば誰でもかんたんにできます。
たとえば、下の3つの記事は特に文字数が多いので、「目次へ戻る」ボタンがあると結構便利ですね。
ぜひ、あなたのスマホ画面で使い勝手を試してみてください。
「目次へ戻る」ボタンを押すと、パッと目次画面へ戻ってくれますよ。
fa-arrow-circle-down目次へ戻るボタンがあると便利な文字数が多い記事3つ
①WordPress初心者OK!Diverの使い方を画像42枚でレビュー
②【2017-2018】ニューヨーク年越しタイムズスクエアカウントダウンの体験談
③バリ島1ヶ月間の移住体験まとめ。おすすめ観光地やホテル・WiFi環境など
Diverはプラグインで目次を表示できる
Table of Contents Plusというプラグインをインストールしてください。
ブログの記事に目次を自動でつけてくれるプラグインです。
「Diver」公式ページに、投稿内目次の表示方法が説明されているので詳しくはそちらでご確認ください。
Table of Contents Plusというプラグインをインストールしておかないと、目次へ戻るボタンは機能しません。
Diverで目次ヘ戻るボタンを設定する方法
これから「目次へ戻る」ボタンを設定していきます。
とても簡単ですが、画像付きで説明します。
Diverオプションのフッターメニューで設定する
fa-angle-double-down目次へ戻るボタンは、Diverオプションのフッターメニューで設定します。
WordPress画面左側の「フッターメニュー」をクリックしてください。
fa-angle-double-downフッターメニューのカスタムリンクをクリック
fa-angle-double-downアイコンとか設定する
- アイコンを設定する(好きなアイコンを選びます)
- タイトルを記入(目次へ戻るとか目次へGO!とか)
- リンク先URLに#toc_containerと記述する
- 「変更を保存」をクリック
これで完了です。
めちゃくちゃ簡単ですね。
たったこれだけのことで、読んでくださるユーザーさんの負担を減らすことができます。
あなたのブログにも導入してみてはいかがでしょうか?
以上、『Diverのフッターメニューに目次へ戻るボタンを設定する方法』でした!
僕は、ワードプレステーマDIVERを使ったカスタマイズ参考ブログ6選の記事で「Diver」を使ったブログをまとめて掲載しています。もしよろしければ、こちらの一覧にブログを載せませんか?多少ですが、ブログの宣伝にもなると思います。
お気軽に、お問い合わせページからご連絡ください。