今回はWordPressでブログを書く時、目次をおしゃれに作れるおすすめプラグインをご紹介します。
「Rich Table of Contents（RTOC）」というプラグインがおすすめなんですが、実はこれ割と新しくてあまり知られてません。
目次の入れ方は超簡単なのに無料。
有名な目次プラグインは「Table of Contents Plus（TOC＋）」ですが、これデザインがいまいちおしゃれじゃない・・・
WordPressで目次を作るならRTOC一択。
- 直感的に好きなデザインのおしゃれな目次を作れる
- 操作が日本語でわかりやすい
- スマホの目次に戻るボタンが便利
おしゃれな目次の入れ方、作り方はとっても簡単なので、詳しく解説していきますね。
僕は副業でブログをスタートして、現在は家族との時間を大切にしながら在宅で自由にビジネスをしています。
僕がいまのような家族中心の生活を手に入れた方法を、期間未定で特別に公開しています。
是非一度、見てみてくださいね。
WordPressの目次の重要性
目次は主に2つの大きな目的があります。
- 検索者が内容をひと目で把握するため
- SEOの効果がある
目次はあなたの記事に【どんなことが書かれているか】をひと目で把握するために設置します。
本には必ず目次がありますよね？
自分が必要とする情報を確実に得るため、すぐに必要な情報にアクセスするために目次はとても大切です。
また、SEO対策としても目次は効果があると言われています。
【ユーザビリティが上がる】、つまり検索者が必要とする情報にすぐアクセスできる効果があるので、Googleが評価してくれる可能性が高いんです。
目次に表示される見出しの正しい付け方はこちらの記事に詳しく書かれてます▼
WordPressで目次をおしゃれに作るためにRTOCがおすすめな理由4つ
ROTCがおすすめな理由を4つ。
これまで目次のプラグインは海外のものしかなかったので、日本人が開発しただけあってとても便利！
有名ブロガーが作った目次プラグイン
【超お知らせ】
目次プラグイン「Rich Table of Contents」をリリースしました！
・無料プラグイン
・誰でもリッチな目次が作れる
・最新WPとの互換性100%
・目次へ戻るボタン標準搭載プラグイン検索で「RTOC」と打てば一発で出てくるのでぜひ使ってみてください🙌https://t.co/bXNU2Tjxdl pic.twitter.com/we7hqhsM06
— ひつじ@JIN制作 (@hituji_1234) March 1, 2020
RTOCはブロガーで有名なひつじさんが主導で開発したプラグイン。
ひつじさんと言えばブログテーマ「JIN」の開発者としても有名ですよね！
自分自身がブロガーなので、ブロガーが扱い易い理想のおしゃれ目次プラグインを開発したって訳です。
目次の作り方が超簡単
超簡単どころか、RTOCのプラグインをインストールするだけで目次が作れちゃいます。
インストールしたら、デザインや基本設定をするだけ。
使い方は後ほど説明しますが、とにかく簡単に目次が作れます。
日本人が作った目次プラグインだけあって、全て日本語なのもおすすめポイント！
デザイン性が高くおしゃれ
左はRTOCが登場する前に有名でよく使用されていたTable of Contents Plus（TOC＋）という目次プラグイン。
右はRTOCですが、圧倒的にRTOCの方がおしゃれじゃないですか？
TOC＋は他にもデザインが選べますが、どれもいまいち・・・
逆にRTOCは他のデザインにしてもどれもおしゃれです。
圧倒的差があるので、おしゃれな目次にしたいならRTOC一択。
スマホの目次に戻るボタンが便利
スマホの任意の場所に【目次へ戻るボタン】を設置することができます。
実は目次って多くの人が見ています。
とそんな時に便利なのが【目次に戻るボタン】。
タップすれば目次に戻ることができちゃいます！
WordPressの目次プラグインROTCの使い方
ROTCの使い方は超簡単。
WordPressでおしゃれな目次を作るための機能、一通り全部ご紹介します。
RTOCをインストールする
【外観】▶︎【プラグイン】と移動し、画面上にある【新規追加】をクリック。
検索窓に「RTOC」と入力すると「Rich Table of Contents」のプラグインが出てくるので、【有効】にしておきます。
目次の基本設定をする
RTOCの目次プラグインを有効化すると、WordPressの左のメニューバーに「RTOC設定」が表示されるのでクリック。
目次の基本設定をしていきます。
- RTOC設定をクリック
- 目次のタイトルを設定する
（人によって「Contents」とする人もいます） - 目次を表示させたいページを決める
投稿だけ、固定ページだけ、両方を選べる - 設定によって見出し3、見出し4は目次に非表示させることができる
- 見出しが少ない時は目次を作らないことも可能
- 好きなフォントを選ぶ
- 実際にどのように表示されるかプレビュー画面
目次のデザインを決める
目次のデザインは、プレビューを見ながら好みに設定しましょう。
ちなみにこのブログの設定は次図です。
- 目次タイトルを左寄せにするか中央寄せにするか選べる
- 見出し2（H2）のデザインを決める
- 見出し3（H3）のデザインを決める
- 目次の枠を好みに決定する
- 目次を表示させる際のアニメーションを決める
- 読みたい見出しを目次の中から選択した際、目的の見出しまでスクロールさせるか一気に飛ばすかを選択できる
プリセットカラー設定
目次のカラーをワンクリックで好きなものに設定できます。
デフォルトの「JIN Color」以外を選択すると、さらに詳細なカラー設定ができます。
あなたのブログカラーに合う目次のカラーがなかった場合は、こちらで調整しましょう！
<h3id=”#8″>応用設定をする
その他スマホの「目次に戻るボタン」などの設定を行います。
- スマホの「目次に戻る」ボタンのON or OFFを切り替える
- スマホの「目次に戻る」ボタンを左右どちらかに設定する
- 「目次に戻る」ボタンの中のテキストを設定する
- 「目次に戻る」ボタンを数字の大小で上下の微調整をする
- 投稿したブログ記事のIDを指定して目次を表示させないことができる
- 固定ページもIDを指定して目次の表示をさせないことができる
- 目次を最初から表示させるか、閉じておくかの選択ができる
- 目次が閉じている時に開くためのボタンテキストの内容を設定
- 目次が開いている時に閉じるためのボタンテキストの内容を設定
- 自分オリジナルのCSSを適用させたい場合はチェックをいれる
目次の場所を自由に決める方法
ショートコードを利用することで、任意の場所に目次を表示させることができますよ！
【ショートコード】タブを選択して、「目次のショートコード」に記載されている赤枠の部分を全部コピーします。
記事作成の際にこのショートコードを貼り付ければ、貼り付けた場所に目次が作成できますよ！
目次をサイドメニューで追尾させる方法
PCで見た時に、サイドメニューで目次を追尾させたい！とそんな人も多いはず。
そんな時もRTOCなら簡単に追尾メニューバーを設置できます。
WordPressのサイドメニューから「外観」→「ウィジット」を選択。
ウィジットの中から【テキスト】を選び、「サイドバー追尾【PC】」へドラッグ&ドロップ。
タイトルを設定して、テキスト部分に [rtoc☆mokuji] と入力。
※☆の部分を「_」（アンダーバー）に変換してください。
あとは「完了」を押して終了です。
これでPC画面で見た時に目次が追尾してくれるようになります！
WordPressで目次が表示されない時の原因と対策
最後に、RTOCでおしゃれな目次を作ったのに「表示されない」不具合の対処法を解決します。
僕も経験して焦ったことがあるんですよこれ。
もし表示されなかった人は次のことを試してみてください！
キャッシュをクリアにする
キャッシュとは、簡単に言うとブラウザの履歴のこと。
キャッシュが残っていると、RTOCを設定する前の状態がブラウザに記録されているので反映されないことがあるんです。
このキャッシュをクリアすれには、使っているブラウザでキャッシュクリアを行う必要があります。
| ブラウザ名 | Windows | Mac |
|---|---|---|
| Google Chrome | Ctrl＋ F5 | command ＋ R |
| Fire Fox | Ctrl + F5 | command + shift + R |
| safari | – | command + R |
| Internet Explorer（IE） | Ctrl + F5 | – |
ショートカットキーでのキャッシュクリアはこれでできます！
干渉しているプラグインを探す
入れているプラグインのどれかとRTOCが干渉して表示されていない可能性があります。
どのプラグインが干渉しているか分からないので、ひとまず全てのプラグインをOFFにしましょう。
これで目次が表示されれば他のプラグインが原因で間違いありません。
他のプラグインを全てOFFにして目次が表示されたら、ひとつずつONにして表示を確認し問題のプラグインを特定できます。
pタグを削除する
pタグとは、
<p>◯◯◯◯◯◯◯◯</P>
のこと。
文章の前後にこのpタグが見出しに入っていると目次が表示されない場合があるので、削除して表示を確認しましょう。
RTOCをアンインストールして入れ直す
古典的な方法ですが、一度アンインストールしてから再度インストールして有効かしましょう。
これで直るケースもあります。
それでも表示されない場合
JINのテーマやRTOCの開発者が質問に答えてくれる「JIN Forum」で確認しましょう。
ここに似たような症状で表示されない人がすでに相談し、回答があるかもしれません。
また、もしない場合もサポートですくが迅速に質問に答えてくれます。
是非JIN Forumを確認してみましょう。
WordPressで目次をおしゃれにするおすすめプラグイン：まとめ
ここまで、WordPressで目次をおしゃれにするおすすめプラグインをご紹介してきました。
おしゃれな目次を作り方・入れ方を知りたい人はRTOCで決まりですね！
このプラグインを使えば、使い方を知らない初心者でも簡単に設定できます。
様々ある目次プラグインの中で、国産でここまでおしゃれに作れるものはありません。
是非WordPressにインストールして使いこなしましょう！
