プラグイン

Table of Contents Plusの目次をカスタマイズ!コピペでOK!

将軍
将軍
こんにちは!将軍と言います!

『Table of Contents Plus』はワードプレスに目次を自動生成してくれるプラグインです。機能は申し分ないですが、何か物足りないと感じるところもあると思います。しかし、プラグインの設定にはカスタマイズをする画面がありません。

なので今回は、スタイルシート (style.css)を使って縁の色を変えたり、目次を中央に寄せたりとカスタマイズをしていきたいと思います。

目次は、とても重要な部分なので読んでくださる方に良い印象を与えるような目次にしていきたいですね!

カスタマイズをする前に

プラグインTable of Contents Plusのカスタマイズ作業は、子テーマ(Child)のスタイルシート(style.css)で行います。CSSコードの編集作業の前には、必ずバックアップを取っておきましょう。



バックアップ作業が終わったら、オリジナルのものにするためには『Table of Contents Plus』のCSSコードが邪魔をしているので、上書きされないように設定をする必要があります。WordPressの管理画面→設定→TOC+に向かい設定をします。

『基本設定』の上級者向けの欄を開いてCSSファイルを除外にチェックを入れます。これでカスタマイズの準備ができました!

  • バックアップを必ずとる!
  • TOC+の設定で『CSSファイルを除外』にチェックを入れる!

目次を中央に配置するカスタマイズコード

『Table of Contents Plus』はデフォルトだと目次が左寄せになっていますが、中央に配置したいという方はこちらのコードを貼り付けましょう!

貼り付けてもCSSコードがうまく反映されない場合は、キャッシュを削除をしてからもう一度、更新をしてみてください。

  • CSSコードがうまく反映されない場合は、『キャッシュを削除』してみてください

目次のデザインをカスタマイズするコード

個人的におすすめのCSSコードを集めてみました。CSSコードは難しく感じるかもしれませんが、下のコードをスタイルシート (style.css)に貼り付けるだけで反映されるので大丈夫です。

貼り付けてもCSSコードがうまく反映されない場合は、キャッシュを削除をしてからもう一度、更新をしてみてください。

  • CSSコードがうまく反映されない場合は、『キャッシュを削除』してみてください

上のコードのcolorの部分のコードは原色大辞典を見ると、自分の好みの色に変更させることができます。

他にも%と表記のある部分をいじることによって、幅や高さ、ボックスの角の丸みなども調節することができます。

まとめ

『Table of Contents Plus』は目次を設置するのに便利なプラグインです。さらにそこに、CSSコードを編集することによって、目次の見やすさに磨きがかかります。

コード内の色は原色大辞典を使って、%部分は自分なりに調節をしてオリジナルの目次を作ってみましょう。

ただ、カスタマイズをする前にバックアップ、TOC+の設定で『CSSファイルを除外』にチェックを入れることを忘れないようにしてください。また、うまく反映されないという場合は『キャッシュを削除』してもう一度更新をしてみてください。