ブログを読み進めているうちに、「あっ、この内容は読み飛ばそう。目次に戻りたい。」ってことありますよね。
「上に戻るボタン」はあっても、前置きが長めだと目次までたどり着くのが大変だったり…
今回は、「目次」と「目次へ戻るボタン」を生成できるプラグインを見つけたので紹介します。
RTOCで目次へ戻るボタンを作る方法
RTOCをインストールする
まずはインストールします。やり方は分かると思いますので、O型的ざっくり説明でいきます。
- プラグインの新規追加で「RTOC」と検索
- インストールしたのち有効化にする
この時、もともとTOC使っていた方は、一旦TOCを停止してください。RTOCで問題なく作動すればTOCは削除してしまいましょう。
好みの設定をして終了
インストールして有効化してしまえば、発動してくれるので特にカスタマイズはあまりしていません。カスタマイズする際は「RTOC設定」からいけます。
- 目次の題名を変えた（contents→話すこと）
- 見出し2のみの表示に設定した
- 枠線を薄いものにした
- 目次ボタンの色を変更した
こんなもんです。
使用しているテーマはJINです。RTOC有効化後にTOCを削除しました。
設定画面の画像です
参考までに載せておきますね。
H2のカスタマイズ画面
H3のカスタマイズ画面
枠のデザインカスタマイズ画面
表示アニメーションのカスタマイズ画面
カラーカスタマイズ画面
JINカラーに設定すると、自分がテーマで設定しているカラーが反映されます。
カラー設定応用カスタマイズ画面
その他の設定
RTOCを使用できるテーマ
大御所はほとんどokかと思いますが、自分が使ってるテーマについてのみお話ししていきます。
- JIN→ok
- cocoon→ok
cocoonは元々プラグインがなくても目次が作れるようになっています。RTOCを使う場合はcocoonテーマの目次生成機能を停止させてから使ってください。
cocoon設定→目次→「目次の表示をする」からチェックを外せばできます。
目次へ戻るボタンを作れるRTOCとはどんなプラグインなのか？
そもそも、目次へ戻るボタンとは？↓↓左側にあるやつです
ワードプレステーマ「JIN」の製作者である、ひつじさん達が作ったワードプレス公認のプラグイン（Rich table of contents）。後述しますが、このプラグイン一つで目次へ戻るボタンと目次が生成できます。
ジンのテーマが繊細で女性にも人気が高いことは有名なお話ですよね！RTOCもまたデザイン性が高いです。
次はRTOCのすばらしさを私が語っているので、必要ない方は左にある「目次へ戻る」ボタンを押した後、「RTOCのメリット」に飛んでみてください。
今までは「目次」をみるだけだった
- 必要な情報が芋づる式に書いてあるわけじゃない
- 必要な情報量が人によって異なる
- 長文＝良質なコンテンツとして、無駄に長い記事がある
TOCだと↑これに対応できません。「上へ戻るボタン」は最上部まで戻ってしまい、前置きが長い人の場合、目次に行くまでが面倒です。
こうなってくると「読みにくいな」の矛先はメディアの製作者側に向いてしまいます。もちろん、やたら長くてわかりにくいものもありますが…。
でも、製作者も十人十色なのでこれは致し方がないことだと思います。
理想なのは本のように「目次を使いこなせる」こと
きっとみんなが思っていたのは、紙の本のように「必要な情報を目次から探してたどり着くことを可能にできる行動（機能）」
本は「必要な情報を目次でみつけて、該当ページへたどりついてはまた必要な情報を目次で見つけて該当ページへ…」の繰り返し作業ができます。この行動に代わるもの（機能）がRTOCでは実現できます
RTOCだと必要な情報を必要な分だけ探せます
RTOCだと、インストールしただけで目次生成と「目次へ戻る」ボタンが設置されるので、この煩わしさから解放されます。
ネットサーフィンは情報が出すぎるあまり延々と続いてしまう代物でもあるので、いかに最短で必要な情報を探り当てれるかが勝負だと思います。
RTOCはまさに私が望む機能を兼ね備えていました。
次はRTOCで出来るコトとメリットを、従来のTOCと比較しながら説明します。
目次へ戻るボタンが作れるRTOCのメリットとTOCとの違い
RTOCのメリット
- TOCが不要になる
- プラグインはRTOC一つで十分
- RTOCは目次機能つき
- RTOCは「目次へ戻る」ボタンがついている
- キレイでオシャレな目次を作れる（カスタマイズ性が高い）
- CSSもHTMLも不要なので、初心者にやさしい
- カスタマイズのプレビューが画面に表示される
TOCとRTOCの違い
- 目次機能がついている
- カスタマイズ性は多少ある
- 目次機能つき
- 「目次へ戻る」ボタンがつくれる
- TOCよりもデザイン性が高く、細かなカスタマイズがしやすい
- プレビューがみれる
TOCをもっと使いやすく便利にしたものが、RTOCと考えていただければと思います。
RTOCをインストールしたが「戻るボタン」が表示されないなどの不具合が出た場合の対処法
RTOCのヘルプページを見る
「RTOC設定」にはヘルプページがあります。
想定される質問と対策について書かれているので、もしかしたら原因がわかるかもしれません
検索する
RTOC 表示されない
などと検索すれば、何かしらヒットします。
RTOC 表示されない 〇〇
〇〇部分に自分が使っているテーマを入れれば、もっと的確にヒットするかもしれません。
ひつじさんに質問する
使っているテーマがコアなメーカーの物だと検索かけても出てこないことがあります。
どうしてもダメな場合は、ひつじさんに質問するのも一手です。
まとめ：目次に戻るボタンはRTOC一択【目次機能＋css不要】
- RTOCはTOCをさらに使いやすくしたもの
- RTOCだと目次へ戻るボタンが一発で作れる（CSS知識も不要）
- RTOCはユーザビリティがあがります
