WordPress

WordPressで目次を表示するおすすめのプラグイン「Table of Contents Plus」とデザインのカスタマイズ

こんにちは!「だちたま」です。

WordPressで目次を表示するのに有名なプラグインとして「Table of Contents Plus」があります。

自動で目次を表示してくれるので超便利。当ブログでも使用しています。

だちたま
だちたま
でも、ちょっとデザインが味気ない。もっと可愛くしたーい!

ということで、今回は目次のデザインをカスタマイズしてみましたので参考までに紹介したいと思います。

  • 本記事で紹介するカスタマイズはテーマ「Twenty seventeen」でカスタマイズを行いました。
  • 本記事を参考にカスタマイズをする場合は、自己責任でお願いします。
  • カスタマイズをするときは、データのバックアップと、子テーマを設定することをおすすめします。

Table of Contents Plusとはそもそも何?

このプラグインは、記事の見出し(H1~H6)を使って、目次を自動生成してくれるプラグインです。

見出しの設定さえきちんと行っていれば、適切な目次を簡単に表示させることができます。

このプラグインについては、私が一から説明するより、以下のブログでわかりやすく説明されていますので、ご覧ください。

Table of Contents Plus – 記事の目次を自動生成できるWordPressプラグイン

目次「Table of Contents Plus」のデザインをカスタマイズ

さて、プラグインのインストールと設定が完了すると、初期状態では以下のように目次が表示されます。

こちらのデザインをCSSを修正して変更していきましょう。

修正するファイルはstyle.css。このファイルは以下のフォルダに格納されています。

style.cssの格納フォルダ
public_html/wp-content/themes/子テーマ

デザイン案は、以下の「サルワカさん」のサイトを参考にさせていただきました。
可愛いデザインが豊富にあって、とても参考になります。

コピペで使えるリストデザイン34選:CSSで箇条書きをおしゃれに

CSSの修正

以下のコードをstyle.cssの最後に追加し、カスタマイズを行いました。

 

このコードを追加すると、以下のように目次が表示されます。

だちたま
だちたま
やわらかいデザインの目次ができました。満足満足♪

目次を表示するおすすめのプラグイン「Table of Contents Plus」とデザインのカスタマイズ

今回は、Wordpressのプラグイン「Table of Contents Plus」のデザインを自分の好みに編集してみました。

今回載せたコードをちょっと修正するだけで別のデザインにも変更することができますので、良かったら参考にしてみてください。