プラグイン「Easy Table of Contents」の目次デザインをカスタマイズ

先日、WordPressのプラグイン「Easy Table of Contents」で目次の作成方法をご紹介しましたが、デフォルト表示のデザインが自分的にいまいちだったので、目次デザインをカスタマイズしてみました。

この記事でカスタマイズしたデザインサンプルはそのままコピペで使ってもらってOKです。気に入ればの話ですが。。。（笑）また、気に入らなくても、背景色・文字色・タイトル文字色・枠線などは、あなたオリジナルのカスタマイズも可能なので良かったら是非ご活用ください。

カスタマイズ後のデザインサンプル

「Easy Table of Contents」デフォルト目次デザインは下記のようになっていました。

このままだと文字間隔がせまく窮屈なので、目次全体の横幅を広げ、文字間隔も少し広げました。また、見出しにアンダーラインを引き、文字色も変えてみました。こんな感じです。

【カスタマイズ後のデザインサンプル】

冒頭にも書いたように、背景色や枠線、文字色、タイトル文字色などのカスタマイズ方法をご紹介しますので、自分好みにカスタマイズしてみて下さい。

では、カスタマイズしていきましょう。

手順①コードを書く場所をチェック！

まずはカスタマイズ用のCSSコードを書く場所を確認しましょう。WordPressには、「追加CSS」という便利な機能があるので、今回はそこにコードを書きていきます。※こういったブログパーツのデザインは「CSS」というコードを書くことで変更や修正をします。

WordPressの管理画面から「外観」にカーソルを当てて「カスタマイズ」をクリック。

「追加CSS」をクリック。

下記画像の緑枠内にCSSコードを記載することでデザインを変更・修正していきます。

手順②目次デザインをカスタマイズ

今回作成した目次デザインのサンプルコードを載せておくので、カスタマイズが面倒！という方はそのままコピーして使ってください。

文字色のカスタマイズ

文字色はサンプルコードの43行目で変更できます。下記画像の緑枠部分を修正します。

色は、こちらのサイトさんで好みの色を選べますよ。⇒　WEB色見本 原色大辞典さん

今回は例として、グレー：#808080に変えてみましょう。こんな感じになりました。

タイトル色のカスタマイズ

タイトル（Contents部分)の文字色は、サンプルコード16～18行目のいずれかに「color: #〇〇〇〇〇〇」と文字色を指定するコードを追加します。

今回はタイトル色をこのように変えてみました。

追加したコードは次の通りです。

背景色のカスタマイズ

背景色はサンプルコード6行目で指定します。

背景色を薄い水色（#e0ffff）にするとこんな感じですね。

枠線のカスタマイズ

枠線はサンプルコード7行目で指定します。

線を少し太くして色を変えるとこんな感じになります。（コード「border: 2px solid #6495ed;」）

お疲れ様でした！以上が「Easy Table of Contents」の目次デザインのカスタマイズとなります。

それでは今日も最後までお読みいただきありがとうございました！