【初心者でもわかる】Table of Contents Plusの導入からカスタマイズまで紹介【目次設定】

こんにちは、れのる（@Blog624renoru）です

目次に使うプラグインと言えばTable of Contents Plusですが、使い方がわからない！カスタマイズできない！という方は多いはず。

そこで今回は初心者の方も満足でき、簡単にできるカスタマイズ方法をご紹介したいと思います。

ちなみに完成例はこちら

マネするだけなので、好印象の方は参考にしてみてね！

スポンサーリンク

Table of Contents Plusを使える状態にしよう

まずはTTable of Contents Plusを導入します。

手順

プラグイン ＞ 新規追加をクリック。

すると下のような画面に来ます。

右上の記入欄に「Table of Contents Plus」と打ち込みましょう。

赤枠で囲まれたプラグインの今すぐインストールをクリック。

僕はインストールしたため、画像に表示されていません！

すると有効化ボタンがあるのでクリック。

これでTable of Contents Plus（目次）の導入は完了しました。

カスタマイズ方法

カスタマイズには２か所で設定する必要があります。

プラグイン設定では目次の構造を設定していき、オプションカラー設定では目次の色や枠の形を設定します。

プラグインTable of Contents Plusを設定

画像の①～⑧までの番号と合わせてみていきましょう。

①最初の見出しの前（デフォルト）に設定してください。
これが１番違和感なく、読者にも見やすい位置となっています。

➁僕は見出しをできるだけ付けたいので「２」に設定しています。
ここは好きなようにしてもOKですが、「３」が王道ですね。

➂とりあえず「post」「page」にチェックを入れておきましょう。

➃目次は英語が嫌な方は、「目次」に設定するといいと思います。
気にならなければ、デフォルトのままでも大丈夫ですよ。

➄チェックを入れておきましょう。

➅アンカーリンクにジャンプではなくスクロールするとは、目次をクリックしたときの移動の仕方の違いです。
個人的にはスクロールがおすすめなので、ここにもチェックを入れましょう。

⑦７５％がベストなサイズだと思います。
スマホで見ても見切れすることはないので安心です。

⑧透明を選択しましょう。
これからカラー設定をしていきますので、カラーを合わせやすくなります。

これでプラグイン設定はおしまいです。
カラー変更しなくてもいい方は、これでおしまいです。

オプションカラー設定

外観 ＞ カスタマイズをクリック。

オプションカラーをクリックし、下にスクロールすると目次プラグイン（すごいもくじ）をがあるのでクリックしてください。

すると次の画面に来ます。

僕が設定しているのは、赤枠の部分のみです。

基本（目次色/リスト数字/アイコン）、第１リンク文字色、ボーダー色、ボーダーの太さ（px）の４つのカラーを設定していきます。

好きなカラーを設定して、プレビューしてみてね！

HTMLカラーコード：Web色見本 原色大辞典でカラーを選ぶと、簡単ですよ。

最後に僕が使用しているカラーコードを載せておきます。

このカラーコードをコピペすれば、僕と同じ目次の完成です。

今回はここまで。