
目次に使うプラグインと言えばTable of Contents Plusですが、使い方がわからない!カスタマイズできない!という方は多いはず。
そこで今回は初心者の方も満足でき、簡単にできるカスタマイズ方法をご紹介したいと思います。
ちなみに完成例はこちら

スポンサーリンク
Table of Contents Plusを使える状態にしよう
まずはTTable of Contents Plusを導入します。
手順
・Table of Contents Plusをインストール
・有効化
プラグイン > 新規追加をクリック。
すると下のような画面に来ます。
右上の記入欄に「Table of Contents Plus」と打ち込みましょう。
赤枠で囲まれたプラグインの今すぐインストールをクリック。

すると有効化ボタンがあるのでクリック。
これでTable of Contents Plus(目次)の導入は完了しました。
カスタマイズ方法
カスタマイズには2か所で設定する必要があります。
・プラグイン設定
・オプションカラー設定
プラグイン設定では目次の構造を設定していき、オプションカラー設定では目次の色や枠の形を設定します。
プラグインTable of Contents Plusを設定
画像の①~⑧までの番号と合わせてみていきましょう。
①最初の見出しの前(デフォルト)に設定してください。
これが1番違和感なく、読者にも見やすい位置となっています。
➁僕は見出しをできるだけ付けたいので「2」に設定しています。
ここは好きなようにしてもOKですが、「3」が王道ですね。
➂とりあえず「post」「page」にチェックを入れておきましょう。
➃目次は英語が嫌な方は、「目次」に設定するといいと思います。
気にならなければ、デフォルトのままでも大丈夫ですよ。
➄チェックを入れておきましょう。
➅アンカーリンクにジャンプではなくスクロールするとは、目次をクリックしたときの移動の仕方の違いです。
個人的にはスクロールがおすすめなので、ここにもチェックを入れましょう。
⑦75%がベストなサイズだと思います。
スマホで見ても見切れすることはないので安心です。
スマホで見ると、100%は見切れしてしまいます
⑧透明を選択しましょう。
これからカラー設定をしていきますので、カラーを合わせやすくなります。
これでプラグイン設定はおしまいです。
カラー変更しなくてもいい方は、これでおしまいです。
オプションカラー設定
外観 > カスタマイズをクリック。
オプションカラーをクリックし、下にスクロールすると目次プラグイン(すごいもくじ)をがあるのでクリックしてください。
すると次の画面に来ます。
僕が設定しているのは、赤枠の部分のみです。
基本(目次色/リスト数字/アイコン)、第1リンク文字色、ボーダー色、ボーダーの太さ(px)の4つのカラーを設定していきます。

HTMLカラーコード:Web色見本 原色大辞典でカラーを選ぶと、簡単ですよ。
最後に僕が使用しているカラーコードを載せておきます。
基本(目次色/リスト数字/アイコン)
#2288d6
第1リンク文字色
#f4e727
ボーダー色
#3579e8
このカラーコードをコピペすれば、僕と同じ目次の完成です。
今回はここまで。