ブログのスタート

WordPressで目次をおしゃれに作るおすすめプラグインはRTOC一択!

WordPressで目次をおしゃれに作るおすすめプラグインはRTOC一択!
めいた
めいた
WordPressでブログ書く時におしゃれな目次を入れたいんだけど、おすすめってある?
めいこ
めいこ
なんか目次って地味なのが多いから、私もおしゃれで可愛いやつ知りたい!

今回はWordPressでブログを書く時、目次をおしゃれに作れるおすすめプラグインをご紹介します。

「Rich Table of Contents(RTOC)」というプラグインがおすすめなんですが、実はこれ割と新しくてあまり知られてません。

目次の入れ方は超簡単なのに無料

有名な目次プラグインは「Table of Contents Plus(TOC+)」ですが、これデザインがいまいちおしゃれじゃない・・・

WordPressで目次を作るならRTOC一択。

  • 直感的に好きなデザインのおしゃれな目次を作れる
  • 操作が日本語でわかりやすい
  • スマホの目次に戻るボタンが便利

おしゃれな目次の入れ方、作り方はとっても簡単なので、詳しく解説していきますね。

カズマ
カズマ
こんにちは、カズマです。

僕は副業でブログをスタートして、現在は家族との時間を大切にしながら在宅で自由にビジネスをしています。

僕がいまのような家族中心の生活を手に入れた方法を、期間未定で特別に公開しています。

是非一度、見てみてくださいね。

 

WordPressの目次の重要性

WordPressで目次をおしゃれに作るおすすめプラグインはRTOC一択!
めいこ
めいこ
そもそも目次ってどんな目的で入れてるの?

目次は主に2つの大きな目的があります。

  1. 検索者が内容をひと目で把握するため
  2. SEOの効果がある

目次はあなたの記事に【どんなことが書かれているか】をひと目で把握するために設置します。

本には必ず目次がありますよね?

自分が必要とする情報を確実に得るため、すぐに必要な情報にアクセスするために目次はとても大切です。

また、SEO対策としても目次は効果があると言われています。

ユーザビリティが上がる】、つまり検索者が必要とする情報にすぐアクセスできる効果があるので、Googleが評価してくれる可能性が高いんです。

目次に表示される見出しの正しい付け方はこちらの記事に詳しく書かれてます▼

ワードプレスブログの見出しの使い方や書き方は?使い分けを初心者向けに解説!
ワードプレスブログの見出しの使い方や書き方は?初心者向けに解説! ワードプレスでブログを書くにあたり、見出しの目的や使い方、書き方が分からない人のために今回は解説していきます。 見...

 

WordPressで目次をおしゃれに作るためにRTOCがおすすめな理由4つ

WordPressで目次をおしゃれに作るおすすめプラグインはRTOC一択!

ROTCがおすすめな理由を4つ。

これまで目次のプラグインは海外のものしかなかったので、日本人が開発しただけあってとても便利!

 

有名ブロガーが作った目次プラグイン

RTOCはブロガーで有名なひつじさんが主導で開発したプラグイン。

ひつじさんと言えばブログテーマ「JIN」の開発者としても有名ですよね!

自分自身がブロガーなので、ブロガーが扱い易い理想のおしゃれ目次プラグインを開発したって訳です。

カズマ
カズマ
ちなみにこのブログのテーマは「JIN」、目次との相性バッチリ!と言ってもRTOCは別のテーマでも問題なく使えますよ!

 

目次の作り方が超簡単

超簡単どころか、RTOCのプラグインをインストールするだけで目次が作れちゃいます。

インストールしたら、デザインや基本設定をするだけ。

使い方は後ほど説明しますが、とにかく簡単に目次が作れます。

日本人が作った目次プラグインだけあって、全て日本語なのもおすすめポイント!

 

デザイン性が高くおしゃれ

WordPressで目次をおしゃれに作るおすすめプラグインはRTOC一択!

左はRTOCが登場する前に有名でよく使用されていたTable of Contents Plus(TOC+)という目次プラグイン。

右はRTOCですが、圧倒的にRTOCの方がおしゃれじゃないですか?

TOC+は他にもデザインが選べますが、どれもいまいち・・・

逆にRTOCは他のデザインにしてもどれもおしゃれです。

圧倒的差があるので、おしゃれな目次にしたいならRTOC一択。

 

スマホの目次に戻るボタンが便利

WordPressで目次をおしゃれに作るおすすめプラグインはRTOC一択!

スマホの任意の場所に【目次へ戻るボタン】を設置することができます。

実は目次って多くの人が見ています。

めいた
めいた
さっき読んだところに戻りたい、でもどこだったっけ・・・スクロールで探すのめんどいな。

とそんな時に便利なのが【目次に戻るボタン】。

タップすれば目次に戻ることができちゃいます!

 

WordPressの目次プラグインROTCの使い方

WordPressで目次をおしゃれに作るおすすめプラグインはRTOC一択!

ROTCの使い方は超簡単。

WordPressでおしゃれな目次を作るための機能、一通り全部ご紹介します。

 

RTOCをインストールする

【外観】▶︎【プラグイン】と移動し、画面上にある【新規追加】をクリック。

WordPressで目次をおしゃれに作るおすすめプラグインはRTOC一択!

検索窓に「RTOC」と入力すると「Rich Table of Contents」のプラグインが出てくるので、【有効】にしておきます。

目次の基本設定をする

WordPressで目次をおしゃれに作るおすすめプラグインはRTOC一択!

RTOCの目次プラグインを有効化すると、WordPressの左のメニューバーに「RTOC設定」が表示されるのでクリック。

目次の基本設定をしていきます。

  1. RTOC設定をクリック
  2. 目次のタイトルを設定する
    (人によって「Contents」とする人もいます)
  3. 目次を表示させたいページを決める
    投稿だけ、固定ページだけ、両方を選べる
  4. 設定によって見出し3、見出し4は目次に非表示させることができる
  5. 見出しが少ない時は目次を作らないことも可能
  6. 好きなフォントを選ぶ
  7. 実際にどのように表示されるかプレビュー画面

 

目次のデザインを決める

目次のデザインは、プレビューを見ながら好みに設定しましょう。

ちなみにこのブログの設定は次図です。

WordPressで目次をおしゃれに作るおすすめプラグインはRTOC一択!
  1. 目次タイトルを左寄せにするか中央寄せにするか選べる
  2. 見出し2(H2)のデザインを決める
  3. 見出し3(H3)のデザインを決める
  4. 目次の枠を好みに決定する
  5. 目次を表示させる際のアニメーションを決める
  6. 読みたい見出しを目次の中から選択した際、目的の見出しまでスクロールさせるか一気に飛ばすかを選択できる

 

プリセットカラー設定

目次のカラーをワンクリックで好きなものに設定できます。

WordPressで目次をおしゃれに作るおすすめプラグインはRTOC一択!

 

デフォルトの「JIN Color」以外を選択すると、さらに詳細なカラー設定ができます。

あなたのブログカラーに合う目次のカラーがなかった場合は、こちらで調整しましょう!

WordPressで目次をおしゃれに作るおすすめプラグインはRTOC一択!

<h3id=”#8″>応用設定をする

その他スマホの「目次に戻るボタン」などの設定を行います。

WordPressで目次をおしゃれに作るおすすめプラグインはRTOC一択!
  1. スマホの「目次に戻る」ボタンのON or OFFを切り替える
  2. スマホの「目次に戻る」ボタンを左右どちらかに設定する
  3. 「目次に戻る」ボタンの中のテキストを設定する
  4. 「目次に戻る」ボタンを数字の大小で上下の微調整をする
  5. 投稿したブログ記事のIDを指定して目次を表示させないことができる
  6. 固定ページもIDを指定して目次の表示をさせないことができる
  7. 目次を最初から表示させるか、閉じておくかの選択ができる
  8. 目次が閉じている時に開くためのボタンテキストの内容を設定
  9. 目次が開いている時に閉じるためのボタンテキストの内容を設定
  10. 自分オリジナルのCSSを適用させたい場合はチェックをいれる
カズマ
カズマ
痒いところにも手が届くのがRTOCの良いところ!

 

目次の場所を自由に決める方法

ショートコードを利用することで、任意の場所に目次を表示させることができますよ!

デフォルトの設定は最初の見出しの直前に目次がきます。
WordPressで目次をおしゃれに作るおすすめプラグインはRTOC一択!

【ショートコード】タブを選択して、「目次のショートコード」に記載されている赤枠の部分を全部コピーします。

記事作成の際にこのショートコードを貼り付ければ、貼り付けた場所に目次が作成できますよ!

 

目次をサイドメニューで追尾させる方法

PCで見た時に、サイドメニューで目次を追尾させたい!とそんな人も多いはず。

そんな時もRTOCなら簡単に追尾メニューバーを設置できます。

WordPressで目次をおしゃれに作るおすすめプラグインはRTOC一択!

WordPressのサイドメニューから「外観」→「ウィジット」を選択。

ウィジットの中から【テキスト】を選び、「サイドバー追尾【PC】」へドラッグ&ドロップ。

 

WordPressで目次をおしゃれに作るおすすめプラグインはRTOC一択!

タイトルを設定して、テキスト部分に [rtoc☆mokuji] と入力。
※☆の部分を「_」(アンダーバー)に変換してください。

あとは「完了」を押して終了です。

これでPC画面で見た時に目次が追尾してくれるようになります!

 

WordPressで目次が表示されない時の原因と対策

WordPressで目次をおしゃれに作るおすすめプラグインはRTOC一択!
めいこ
めいこ
RTOCで設定したのに目次が表示されないんだけど!!

最後に、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にインストールして使いこなしましょう!

カズマ
カズマ
おしゃれな目次の作り方や入れ方も、RTOCの使い方も全部が超簡単なのでホントおすすめ!
新しい働き方を今、あなたの手の中に

※1:登録直後に自動返信メール1通目似て登録者限定の特典をお届けしています。
※2:お預かりしたメールアドレスなどのプライバシー情報は当サイトのプライバシーポリシーに則り厳守します。
※3:メール最下部の解除リンクからいつでも登録を解除できます。

\1年後を変えるなら、いま!/
知識0経験0文章力0でも、初年度で年収100万円UPする方法。
無料特典を受け取る
\1年後を変えるなら、いま!/
知識0経験0文章力0でも、初年度で年収100万円UPする方法。
無料特典を受け取る