目次に戻るボタンはRTOC一択【目次機能+css不要】

  • URLをコピーしました!

ブログを読み進めているうちに、「あっ、この内容は読み飛ばそう。目次に戻りたい。」ってことありますよね。
「上に戻るボタン」はあっても、前置きが長めだと目次までたどり着くのが大変だったり…

今回は、「目次」と「目次へ戻るボタン」を生成できるプラグインを見つけたので紹介します。

目次

RTOCで目次へ戻るボタンを作る方法

RTOCをインストールする

RTOC

まずはインストールします。やり方は分かると思いますので、O型的ざっくり説明でいきます。

  1. プラグインの新規追加で「RTOC」と検索
  2. インストールしたのち有効化にする

この時、もともとTOC使っていた方は、一旦TOCを停止してください。RTOCで問題なく作動すればTOCは削除してしまいましょう。

好みの設定をして終了

RTOC設定画面

インストールして有効化してしまえば、発動してくれるので特にカスタマイズはあまりしていません。カスタマイズする際は「RTOC設定」からいけます。

私のやったカスタマイズを載せていきます。
カスタマイズした点
  • 目次の題名を変えた(contents→話すこと)
  • 見出し2のみの表示に設定した
  • 枠線を薄いものにした
  • 目次ボタンの色を変更した

こんなもんです。

カスタマイズしたあとは「変更を保存する」を押さないと反映されないので押し忘れに注意です!
元々TOCを使っていましたが、RTOCの存在を知って乗り換えました。特に不具合はありません。

使用しているテーマはJINです。RTOC有効化後にTOCを削除しました。

設定画面の画像です

参考までに載せておきますね。

 

目次の名前についての設定

H2のカスタマイズ画面

RTOCのカスタマイズ画像1

H3のカスタマイズ画面

RTOCのカスタマイズ画像2

枠のデザインカスタマイズ画面

RTOCのカスタマイズ画像4

表示アニメーションのカスタマイズ画面

RTOCのカスタマイズ画像3

カラーカスタマイズ画面

RTOCのカスタマイズ画像5

JINカラーに設定すると、自分がテーマで設定しているカラーが反映されます。

RTOCのカスタマイズ画像6

RTOCのカスタマイズ画像7

RTOCのカスタマイズ画像8

カラー設定応用カスタマイズ画面

RTOCのカスタマイズ画像9

その他の設定

RTOCのカスタマイズ画像10

RTOCのカスタマイズ画像11

RTOCのカスタマイズ画像12

RTOCを使用できるテーマ

大御所はほとんどokかと思いますが、自分が使ってるテーマについてのみお話ししていきます。

  • JINok
  • cocoonok

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
  • 目次機能がついている
  • カスタマイズ性は多少ある
RTOC
  • 目次機能つき
  • 「目次へ戻る」ボタンがつくれる
  • TOCよりもデザイン性が高く、細かなカスタマイズがしやすい
  • プレビューがみれる

TOCをもっと使いやすく便利にしたものが、RTOCと考えていただければと思います。

もはや、インストールしない理由が見つかりません。

RTOCをインストールしたが「戻るボタン」が表示されないなどの不具合が出た場合の対処法

RTOCのヘルプページを見る

「RTOC設定」にはヘルプページがあります。

ROTC設定ヘルプで行けます。

想定される質問と対策について書かれているので、もしかしたら原因がわかるかもしれません

検索する

RTOC 表示されない

などと検索すれば、何かしらヒットします。

RTOC 表示されない 〇〇

〇〇部分に自分が使っているテーマを入れれば、もっと的確にヒットするかもしれません。

ひつじさんに質問する

使っているテーマがコアなメーカーの物だと検索かけても出てこないことがあります。
どうしてもダメな場合は、ひつじさんに質問するのも一手です。

まとめ:目次に戻るボタンはRTOC一択【目次機能+css不要】

  • RTOCはTOCをさらに使いやすくしたもの
  • RTOCだと目次へ戻るボタンが一発で作れる(CSS知識も不要)
  • RTOCはユーザビリティがあがります
よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

目次