ブログ運営

【超簡単】WordPressで目次を作成|RTOCプラグインで解決

ディスカッション設定
WordPressってどうやって目次入れるんだろう

初心者でも簡単に目次を作る方法ってないかなぁ

悩んでる人

 

こんにちは、かわてるです!

今回はWordPressで簡単に目次を作成する方法について解説していきます。

はてなブログだと目次をワンクリックで挿入できますが、WordPressは初期状態では使えません。

僕が実際にWordPressで使用しているRTOCプラグインを使った方法になります。

WordPressでも目次を作成したいといった方は是非読んでいってください。

kawateru
それでは早速見ていきましょう!!

 

本記事のテーマ

【超簡単】WordPressで目次を作成|RTOCプラグインで解決

この記事でわかること

  • WordPressに目次を作る簡単な方法
  • RTOCプラグインの導入方法
  • RTOCプラグインの使い方
  • RTOCプラグインの設定方法

 

 

結論:Rich Table of Contents(RTOC)プラグインを導入しよう

目次とブログ

結論から言うとWordPressでは「Rich Table of Contents」

通称「RTOC」というプラグインをインストールすれば、初心者でも超簡単に目次を作成することができます!

のちほど使い方についても紹介します。

 

「Rich Table of Contents」RTOCプラグインとは?

RTOCプラグインは人気のWordPressテンプレート「JIN」を作ったひつじさんという方が作成された国産の目次作成プラグインで、初心者でも簡単に目次が作れる無料プラグインです。

少し前までは「Table of Contents Plus」「Easy Table of Contents」といったプラグインが人気でしたが、最近ではアップデートされていなかったりと不安が多かったです。

RTOCプラグインは項目に沿って選択していくだけで初心者でも簡単にWordPressに目次を設定でき、色合いも自分好みに作成することができます。

 

RTOC開発者ひつじ@JIN制作さんのツイート

これだけの機能があって無料で利用できるんですからすごいですよね。

【RTOCプラグインで解決】WordPressで目次が見つからない

WordPressのページ

これは僕がはてなブログからWordPressに乗り換えた時に実際につまづいた点です。

はてなブログになれてしまっていたのでワンクリックが当たり前だと思ってました。

はてなブログはワンクリックで目次が作成できる

はてなブログの目次作成ボタン

これは実際のはてなブログの記事を書く画面なのですが、上の赤い部分を押すと自動的にブログ記事内に目次を作成して挿入することができます。

はてなブログの中でもよく使う機能の一つですね。

しかしWordPressの場合はこう簡単にはいきません。

色々探したけど見つからない!

 

WordPressはプラグインを入れる必要がある

WordPressで目次を作成する方法はいくつかありますが、一番簡単なのは「Rich Table of Contents」というプラグインを入れる方法です。

RTOCプラグインは簡単な初期設定をするだけで自動的に記事の中に目次を作成して挿入してくれます。

 

 

RTOCプラグインの導入方法・使い方

RTOCプラグイン

まずはWordPressの管理画面からRTOCプラグインを導入しましょう。

プラグインの導入は下記の手順で簡単に行えます。

RTOCプラグインインストールの流れ

簡単な流れ

  1. WordPress管理画面
  2. プラグイン
  3. 新規追加
  4. 右上の検索ボックスにRTOCと入力して検索
  5. インストール
  6. 有効にする

 

ここまで完了すればあとは初期設定をするだけで使えます。

RTOCプラグインの初期設定方法

RTOCプラグインのインストールと有効化が完了すると、管理画面の左側にあるメニューに「RTOC設定」という項目が追加されていると思います。

また、作成中に右側にプレビューが表示されるので実際に確認しながら作成していきましょう!

RTOCプラグインの基本設定

RTOCの基本設定

RTOC設定画面を開いたらまずは基本設定を行っていきます。

基本設定

  • 目次のタイトル:目次やContentsといった目次のタイトル部分の文言です。
  • 目次を表示させるページ:表示させるページを投稿ページと固定ページから選択できます。
  • 表示させる見出し設定:H2やH3などどの見出しまで表示するかを設定できます。
  • 表示条件:目次を表示する条件を指定できます。
  • フォント設定:フォントの種類を3種類から選択できます。

RTOCプラグインのデザイン設定

RTOCのデザイン設定

デザイン設定

  • タイトル表示設定:RTOC目次のタイトルを左寄せか中央寄せから選択できます。
  • H2のリスト形式:RTOC目次内の大見出しの左側のデザインを変更できます。
  • H3のリスト形式:RTOC目次内の中見出しの左側のデザインを変更できます。
  • 枠のデザイン:目次の外枠のデザインを変更できます。
  • 表示アニメーション:目次を表示するときのアニメーションを設定できます。
  • スムーススクロールの設定:ONにするとスクロールが滑らかになります。

RTOCプラグインのプリセットカラー設定

RTOCのプリセットカラー設定

この項目ではRTOCプラグインで設定した目次の色合いを簡単に設定することができます。

自分のお好みの色に設定しましょう。

もしお気に入りの色合いが無かった場合は次の項目でオリジナルの目次カラーを設定できます。

RTOCプラグインのカラー設定(上級者向け)

RTOCのカラー設定

カラー設定では各項目ごとに色を変更することができます。

オリジナリティを出したいのであればぜひ設定してみて下さい。

赤枠部分に#から始まるカラーコードを入れても設定できるので、カラーパレットが使いにくいという人はここに入力しましょう。

カラーコードはこちらのサイトで探せます。

>>カラーコード大辞典

 

RTOCプラグインの応用設定

RTOCの応用設定

応用設定ではもう少し細かい設定ができます。

応用設定

  • 目次に戻るボタン:ボタンの表示と非表示の設定ができます。
  • 目次に戻るボタンの位置:ボタンを左・右どちらに表示するか設定できます。
  • 目次に戻るボタンの上下調整:目次に戻るボタンの上下位置を任意に設定することができます。
  • 除外する投稿ページID:目次を表示したくない記事がある場合はこちらにページのIDを入力します。
  • 除外する固定ページID:目次を表示したくない固定ページがある場合はこちらにページのIDを入力します。
  • 目次のデフォルト表示設定:目次を閉じた状態で表示したい場合に設定します。
  • プラグインのCSSを読み込まない:チェックするとRTOCのデザイン設定を無効にできます。独自にCSSなどでカスタマイズする人以外はチェックの必要はありません。

RTOCプラグインの目次をWordPressに反映する

ここまでの設定が終わったら変更を保存ボタンを押して設定を保存しましょう。

他にもショートコードというタブがありますが基本的には使わないのでスルーでOKです。

 

 

まとめ【WordPressで目次を簡単作成】

RTOCプラグインを使えば初心者でも簡単にWordPressに目次を作成できるので是非試してみて下さいね♪

もうWordPressの目次作成で悩む必要はありません!!

初心者向けアフィリエイトASP
【初心者ブロガー必見】初めに登録すべきアフィリエイトASP5社!

続きを見る

プログラミングスクール厳選3つ
【無料あり】現役エンジニアが選んだプログラミングスクール3選

続きを見る

 

  • この記事を書いた人
  • 最新記事

kawateru

【ブログ運営】×【Twitter運用】×【エンジニア】 3月からWordPressに移行しました。 4年間ブラック飲食→MGになるも28歳で退職→未経験から開発エンジニアに転職→最短でフリーランス目指す‼ ●大阪出身 ●28歳 ●1児のパパ

-ブログ運営

Copyright© Kawateru blog , 2020 All Rights Reserved Powered by AFFINGER5.