この間このブログでのカスタマイズを色々まとめた記事を載せましたが、今年も引き続きカスタマイズを続けています！
そんなひとつが目次欄の設置です。
「Table of Contents Plus」、通称”TOC+”というプラグインでとっても簡単に設置・設定できるので軽く紹介します！
このプラグインを入れると自動的にHタグを目次にしてまとめてくれます。ボクが変更を加えない限りちょうどこの下にその目次欄が出ていると思われます。
MoKuJi
TOC+で作る目次欄はこんな感じ
有効化させるだけで初期設定状態の目次欄（ボックス）が出現します。ブログを読むことが多い人は間違いなくこんなやつを目にしたことがあるでしょう。
それではこの目次欄の手に入れ方を紹介しましょう。
「Table of Contents Plus」をインストール
10万以上のインストールがある人気プラグイン。星も4以上。「Table of Contents Plus」と検索すればすぐに出てきます。
インストール→有効化。
「Table of Contents Plus」を設定
有効化したら、設定します。
設定ページは「設定」の中に自動的に登場します。
上から、表示位置の設定、何項目以上で出現させるか、などそんなに複雑じゃない設定項目が並びます。
表示位置とは、目次欄をどこに載せるかですが、多くの人が最初のH2タグ後に設定していると思います。これは初期設定でそうなりますので特に変えたい人以外は触らないでOK。
次ですが、例えばHタグが1つや2つという短い記事で目次欄を載せてもあまり意味がないですよね？なので、Hタグを何個以上使っている記事に目次欄を出すかの設定です。
これはブログの書き方で人によっても違ってきますが、Hタグ使いが上手い人はいい感じの目次構成にできると思いますし、下手だと、目次欄にずらーーーっと項目が並んでしまうことになるので、その辺はHタグの使い方について勉強が必要かもしれません。
おそらく多くの人は3以上で表示にしていると思います。
続いては表示内容の設定ですが、「目次」と出すか、ひらがなで「もくじ」にするかとか、任意で指定できます。利便性を考えると目次のままでいいと思います。
目次欄は「隠す」ことができる様になっていますが、ページに来た時点でボックスが展開されているか、最小サイズになっているかも指定できます。ボクは「隠す」状態になる様指定しています。
この先もこだわりがなければデフォルトのままでいいと思いますが、ボクは上スクショの通り、H2タグまでしかリストさせず、項目に番号を振り、スムーススクロールエフェクトをONにしています。
ボックスのサイズやフォントサイズも指定可能。
色の指定もできます。
デフォルトで5種類用意されているのでここもこだわりがなければどれかを選べばシンプルで簡単。
ボクはスクショの通りカスタムで設定しています。
CSSでカスタマイズ
ボクはこのプラグインが持っている設定項目の範囲では満足できなかったため、CSSをテーマ内スタイルシートに指定項目を追加してさらにカスタマイズしています。
ちょいとCSSで指定を加えたらこんな感じに進化します。
求めたポイントは「見やすさ」。そのために項目の間に薄い点線を入れました。また、左に寄っていたボックスをセンタリング。角も少し丸めました。
それをさらに背景を暗く変更。全体にメリハリをつけました。
これで閉じた状態（このブログでは初期状態）での見え方が美しくなったかなーと思います。
目次を表示させたくないページにはショートコードで
ブログでもそうでないサイトでも、目次を表示させたくない記事（コンテンツ）がたまにあるかと思います。
例えば、「○○ランキング！」みたいな記事だったら、目次があると目次欄でネタバレしてしまう様な記事がそれです。
去年末に書いた2016年10大ニュースをカウントダウン式でランキングで紹介した記事では、この懸念から、H2タグを飛ばしてH3タグで見出しをつけました。
しかし、これだとSEO的によろしくないという説もあるし、サイト内のデザインに統制が取れないという問題もありますので、解決したい。
そんな時にはこのショートコードを記事のどこでもいいので挿入すればOK（この記事の目次が消えると困るので上の文字列は画像です）。
10大ニュースの記事を見ていただければちゃんとそうなっていることがわかると思います。
まとめ
- 目次欄設定はプラグインで楽勝
- 設定は簡単だけどCSSでさらにカスタマイズ可
- 目次がいらない（表示されたくない）記事はショートコードで非表示に
デフォルトでもカッコよく、使いやすい「Simplicity」テーマですが、ボクは色々カスタマイズを続けています。
その最中他のブログで好きなデザインや装備を参考にすることは多いですが、今回紹介の目次設定も同じく多くのブログで見かける欲しかった装備です。
ただ、設置したままでは100%満足できなかったので今回紹介の様に少し手を加えた次第です。
プラグインを増やすとサイトの速度が遅くなるという意見もありますが、プラグインで簡単にユーザビリティが向上したり、デザインが良くなるのはWordpressのいいところだと思いますので今後もさらなるカスタマイズを続けていきたいと思います。
