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

WordPressで目次を表示するのに有名なプラグインとして「Table of Contents Plus」があります。
自動で目次を表示してくれるので超便利。当ブログでも使用しています。

ただ、ちょっとデザインが味気ない。もっと可愛くしたーい!ということで、デザインをいじってみましたので参考までに紹介したいと思います。

スポンサーリンク



Table of Contents Plusとは

このプラグインは、記事の見出し(H1~H6)を使って見出しを自動生成してくれるプラグインです。
見出しの設定さえきちんと行っていれば、適切な目次を簡単に表示させることが出来ます。

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

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

 

目次のデザインをカスタマイズ

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

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

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

 

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

 

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

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

 

CSSの修正

以下のコードを追加し、カスタマイズを行いました。

 

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

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

 

終わりに

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

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

この記事をシェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です