サイトでよく目にするのがユーザーに簡潔に記事内容を伝えることができる「目次」です。今回はその目次を「Easy Table of Contents」というプラグインを使って誰でも簡単に実装できる方法をご紹介します。またコピペで試せる目次のCSSも最後に載せてるので是非試してみてください！
有名なプラグインは2つ
実はWordPressの目次を自動で生成できる有名なプラグインは2つあります。「Table of Contents Plus」と「Easy Table of Contents」があります。それぞれ特徴がありますが僕のおすすめとしては「Easy Table of Contents」がおすすめです！
理由としては「Table of Contents Plus」は更新日が3年前になっていてアップデートが行われておらず、今後何かしらの不具合が発生した際に解決できない可能性があるからです。
その点「Table of Contents Plus」はアップデートが頻繁に行われており今記事を書いているWordPress5.x系の対応もしています。また今後不具合がおきても修正される可能性が非常に高いです。ですのでプラグインを選ぶにあたって特に理由がない場合は「Easy Table of Contents」を選んだほうが無難と言えます。
以上のことからこれから解説するプラグインは更新頻度が高い「Easy Table of Contents」を主体としてインストールや設定のお話を進めていきますのでご了承ください！
Easy Table of Contentsのインストール方法
早速Easy Table of Contentsをインストールしていきましょう。
1.WordPress管理画面の左サイドバーの「プラグイン」→「新規追加」をクリックします。
2.画右の検索欄に「Easy Table of Contents」を入力します。
3.「いますぐインストール」をクリックします。
4.「有効化」をクリックします。
ここまででEasy Table of Contentsのインストールが完了しました。続いて使い方を解説していきます！
Easy Table of Contentsの使い方
まずはEasy Table of Contentsの基本的な使い方をみていきましょう。
プラグインの一覧画面が表示されているのでEasy Table of Contentsの「設定」をクリックします。
ズラズラーっといろんな項目がありますが、重要な項目を１つずつ解説していくので安心してくださいね！
一般
一般はEasy Table of Contentsの基本的な設定を行う項目が並んでいます。
| サポートを有効化 | 目次を有効化するページ種類を選びます。（ここで有効にしないと自動挿入でチェックを入れても自動生成されないので注意してください！） |
|---|---|
| 自動挿入 | 目次を自動で導入するページ種類を選びます。 |
| 位置 | 見出しを挿入する位置を選びます。 |
| 表示条件 | 見出しの件数に応じて挿入するタイミングを変更します。 |
| 見出しラベルを表示 | １つ下で設定するテキストを表示するか選択します。 |
| 見出しラベル | 見出しのはじめに表示するテキストの内容を設定します。 |
| 折りたたみ表示 | 目次を折りたたみできるアイコンを表示します。 |
| 初期状態 | 目次の最初に表示される状態を選択します。（チェックで非表示） |
| ツリー表示 | 目次の入れ子を選択します。（チェックで入れ子許可） |
| カウンター | 見出しの先頭に表示する数字の種類を選択します。 |
| スクロールを滑らかにする | 見出しをクリックした際にスクロールする表示を滑らかにします。 |
外観
外観はCSS（見出しの装飾）の設定を行います。CSSを編集したり貼り付けたりするのに自身がなければこちらで設定することをおすすめします！また自分でCSSを書く場合、こちらは設定不要です。
| 幅 | 目次コンテンツの全体幅の指定をします。 |
|---|---|
| カスタム幅 | 自分で数値と単位を入力したい場合は上記の幅項目で「ユーザー定義」を指定し、こちらの入力欄で数値と単位を入力します。 |
| 回り込み | 目次を周り込ませるかの設定をします（左右どちらかを選ぶと記事内容と目次が2列になり表示されます。） |
| タイトル文字サイズ | 見出しラベルの文字サイズを指定します。 |
| タイトル文字の太さ | 見出しラベルの文字太さを指定します。 |
| 文字サイズ | 目次に表示されている見出しの文字サイズを指定します。 |
| テーマ | あらかじめ決められているテーマを適用する場合はこちらで色を選択します。またこれより以下の色を指定するにはここで「カスタム」を選択します。 |
| 背景色 | 背景色をパレットor16進数（#○○○○○○）で選択します。 |
| 枠線色 | 枠線の色をパレットor16進数（#○○○○○○）で選択します。 |
| タイトル色 | タイトルの文字色をパレットor16進数（#○○○○○○）で選択します。 |
| リンク色 | リンクの色をパレットor16進数（#○○○○○○）で選択します。 |
| ホバー時のリンク色 | リンクをホバー（マウスカーソルが乗っている状態）時の色をパレットor16進数（#○○○○○○）で選択します。 |
| 訪問済みリンク色 | すでにクリック済みの色をパレットor16進数（#○○○○○○）で選択します。 |
高度
特殊な設定（特定の要素を除外したり等）をする際にこちらの項目を設定します。
僕のオススメの設定は見出しをh2のみに絞って表示する方法です。理由としてh3やh4を含めてしまうと目次がとても長くなってしまうからです。この辺りはサイトの見出しをどの様に扱っているかで変わってくるかと思いますが、目次の長さに余裕があればh3を含めることを検討して良いんじゃないかなーと思います。
| 小文字 | チェックをすると見出しが英文の場合、先頭の文字を全て小文字に変換します。 |
|---|---|
| ハイフネーション | チェックをすると英単語を改行した際に-が使われます。 |
| ホームページ | チェックをするとホームページに記述している項目で目次を表示します。 |
| CSS | チェックを入れることでCSSの読み込みを禁止します。 |
| 見出し | 目次に表示する見出しのレベルを選択します。 |
| 除外する見出し | 目次から特定の見出しを除外する場合に使用します。|を使うと複数の単語をセットできます。*を使うとそれ以降は全ての文字が含まれます、また*は単語の前後どちらでもつけることができます。（記述例：*メロン|グレープ*|*リンゴ*）これで「メロンで終わる」、「グレープで始まる」、「リンゴが含まれる」見出しが除外されます。 |
| スムーズスクロールのオフセット | スクロールする際の余白を設定します。デフォルトの30pxはWordPressの上部に表示されている黒いバーの幅を設定しています。 |
| モバイルのスムーズスクロールのオフセット | 閲覧してる端末がモバイルの場合上記のオフセットと同様の余白を設定できます。 |
| パス制限 | URLで見出し表示の除外を行う場合はここに先頭に/を含めたスラッグを入力します。（記述例：/wordpress） これで/wordpressが含まれている記事には見出しは表示されなくなります。 |
| デフォルトのアンカー接頭辞 | リンクのhrefの先頭文字が英数字以外だった場合、ここで指定した文字に置きかわります。 |
| ウィジェットの固定セレクタ | ウィジェットと呼ばれる機能を使っている場合、目次のウィジェットに指定するセレクタを指定します。 |
以上で設定が完了しました。少し長いですが、自分のサイトに合わせてカスタムしちゃいましょう！結構内容が複雑なのでわからない場合はTwitterかお問い合わせで聞いていただければ自分のわかる範囲でしたらお答えします！
デフォルトの目次
デフォルトの目次は以下の様になります。
カスタム例
以下の目次は僕のサイトで実際に使っている目次です。今回はこれのCSSを公開します。
僕はCSSのフレームワークを使っていてmarginやpaddingなどの設定が打ち消されてしまうので!importantを記述していますが、特に使っていない場合、!importantは不要です。この辺りは状況に応じて修正して下さい！
/* 全体の設定 */
#ez-toc-container {
width: 100%;
margin-bottom: 3rem !important;
padding: 1.2rem !important;
border: #417394 2px dashed;
background: #f4fbff;
}
/* タイトルの設定 */
#ez-toc-container .ez-toc-title {
margin: 0 !important;
text-align: center;
}
/* 見出し（親）の設定 */
#ez-toc-container .ez-toc-list {
list-style: none;
margin: 0 !important;
padding: 0 !important;
}
/* 見出し（子）の場合の設定 */
#ez-toc-container .ez-toc-list li ul {
list-style: none;
margin: 0 0 0 1.4rem !important;
padding: 0 !important;
}
/* リンクの設定 */
#ez-toc-container .ez-toc-list li a {
color: #464646 !important;
}まとめ
「Easy Table of Contents」プラグインを使って簡単にWordPressに目次を実装する方法をご紹介しました。CSSを書けない人でも画面から簡単に装飾を変更できますし、CSSを自作する方はデフォルトのCSSを読み込まなくすることも出来るので初心者の方から上級者の方までどんな方にもおすすめできる目次プラグインです。
