目次プラグイン【Table of Contents Plus（TOC+）】

ワードプレスで目次を作るプラグイン1つ目を見ていきます。

その前に一般的にプラグインを入れる場合の注意点を知っておきましょう。

有名なプラグインですが更新が4年前と言うのが気になります。

ほとんど人気テーマで使用されているので、解説していきたいと思います。

→ 目次プラグインはほかにもある！

目次プラグイン【Easy Table of Contents】こんにちは！かーこ( @kaaaa_co)です。 ワードプレスで目次を作るプラグイン「Table of Contents ...

Table of Contents Plusをインストールする

ログインして「プラグイン」→「新規追加」で「Table of Contents Plus」を検索。

「今すぐインストール」をクリックし、「有効化」しましょう。

 

Table of Contents Plusの基本設定

管理画面の「設定」から「TOC＋」をクリックします。
設定は簡単です。

 

1.目次の表示場所・条件を決める

位置	デフォルトで。
表示条件	見出しが２つ以上で。
以下のコンテンツタイプを自動挿入	post（「投稿」ページ ）のこと。ここだけチェックを入れる。page（固定ページに基本的に見出しは不要）
見出しテキスト	「目次」「Contents」「INDEX」など適宜入れる。 目次を開け締めするなら切り替え許可にもチェックを。

 

階層表示	h2やh3タグを階層表示させる。
番号振り	タイトルの頭に番号がふられる。チェックは不要。
スムーズ・スクロール効果を有効化	チェックをいれると、そこまでぬるーっとすべっていきます。

2.目次の外観の設定

基本設定の外観を設定します。

横幅	そのまま自動（デフォルト）で。
回り込み	そのままなし（デフォルト）で。
文字サイズ	そのまま95%で。
プレゼンテーション	お好みで。

 

 

3.CSSでTable of Contents Plusの外観を整える

ノーマルでは少しさみしいですね。

ここから、CSSで外観を整えてみましょう。

1. 「上級者向け」→プラグインのCSS設定をオフ
2. 「外観」→「カスタマイズ」→「追加CSS」に下記コードをコピペします。

 

#toc_container {
 background: #eee;
 padding: 10px 10px 30px;
}

.entry-content p.toc_title {
 font-size: 26px;
 text-align: center !important;
 border-bottom:1px solid #ccc;
 margin-bottom:15px;
}

.toc_list {
 width: 80%;
 display: block;
 margin: 0 auto;
 line-height:1.5;
}

.toc_list li {
 font-size: 16px;
}

でひとまず整形したのがこちら。（後ほどもっといいのを追加します）

 

 

テーマ「COCOON」を使用している場合

目次プラグインは不要です。

「COCOON」設定から「目次」タブをクリックして設定するだけ

 

目次の表示	サイト記事に目次をつけたいのでチェックする
表示ページ	投稿ページをチェックする。基本的に固定ページは長くない限り不要かなと思います。お好みで。
目次タイトル	見出しテキスト「目次」「Contents」「INDEX」など適宜入れる。
目次切り替え	目次を開け締めするなら切り替え許可にもチェックを。

 

表示条件	2つにします
目次表示の深さ	そのままで
目次ナンバーの表示	「表示しない」設定がおすすめ
目次の中央表示	チェックする
目次の表示順	お好みで
見出し内タグ	お好みで

「COCOON」テーマで選択しているデザインが適用される

最初からきれいにサイトにマッチした配色で出力されます。

 

Table of Contents Plusを使用して感じたこと

かずかずの有名テーマで使用されていて、目次といえばこのプラグインですね。
更新がされてないのが気になるので、後日もう一つの目次プラグインについて検証し記事を追加します。