更新日: 2022 / 09 / 14

Wordpressにおしゃれな目次を表示できるEasyTOCの使い方とCSSコードサンプル

カテゴリー: wordpress

Wordpressにおしゃれな目次を追加できるEasyTOCの使い方と設定方法をサンプルコード付きで解説します。

自分のブログに目次入れたいけどCSSとかPHPとかわかんない!という場合でも簡単に導入できるのが魅力。

EasyTOCの使い方だけでなく、さらにおしゃれにするためのCSSコード例を紹介します。

  1. EasyTOCプラグインの使い方と設定方法

    1. Easy Table of Contents の一般設定
    2. Easy Table of Contents の外観設定
    3. Easy Table of Contents の高度な設定
  2. EasyTOCのCSSカスタムコード例

    1. シンプルでクールなどこでも使える目次スタイル
    2. おしゃれでかわいいピンクの目次スタイル
    3. 落ち着いた色合いのフラットなスタイル
  3. まとめ

EasyTOCプラグインの使い方と設定方法

EasyTOCプラグインの使い方と設定方法

Wordpressでよく使われる目次プラグインは「Table of Contents Plus」ですが、こちらは更新がストップしています。

Wordpressの最新版(6.x)で使うなら「Easy Table of Contents(EasyTOC)」がおすすめ。

プラグインの新規追加ページで「table of content」検索すると出て来るのでインストールして有効化しておいてください。

EasyTOCのインストール

EasyTOCの設定は、Wordpress管理画面メニューの「設定」にある「目次」をクリックして開きます。

Easy Table of Contents の一般設定

一般設定で変更できるのは次の通り。

項目内容
サポートを有効化目次の対応をする投稿タイプの選択。自動挿入と同じでOK
自動挿入目次を自動挿入したい投稿タイプの選択
位置目次の表示位置を選択(詳細は後述)
表示条件見出しが最低何個あれば目次を表示するかを設定
見出しラベルを表示目次の上に表示する見出しのON/OFF
見出しラベル目次の上に表示する見出しのテキストを入力
折りたたみ表示目次を折りたたみできるかどうか設定
初期状態初期状態で目次が折りたたまれた状態にするかどうか設定
ツリー表示目次をツリー(階層)表示にするかどうかを選択
カウンター目次の前に表示する数字の設定
スクロールを滑らかにする目次をクリックした時のスクロールをなめらかにする

EasyTOCの一般設定

基本的にはデフォルト設定でOKですが、変更しておきたいところがあるのでそこだけ解説しておきます。

目次を表示する投稿タイプの選択は忘れずにやっておきましょう。通常の記事で目次を出すには「投稿」にチェックを入れます。

自動挿入の位置は見出しの前後とコンテンツの前後から選べます。「上部」を選ぶとコンテンツの前(タイトルのすぐ下)に目次が表示されます。

目次の前に記事の抜粋やイントロを表示したい場合は、「最初の見出しの前」を選べばOK。

Easy Table of Contents の外観設定

次は外観設定。ここでは目次のスタイルの設定を行うことができます。

項目内容
目次の幅を設定、横幅いっぱいにする場合は100%を選択
カスタム幅幅設定で選択肢がない場合にここで細かく設定します
回りこみ左右にテキストを回り込ませたい時に設定
タイトル文字サイズ目次の見出しラベルの文字サイズを設定
タイトル文字の太さ目次の見出しラベルの太さを設定
文字サイズ目次の文字サイズ
テーマデフォルトで用意されたスタイルから選択
カスタムテーマカスタム設定にしている場合に有効になる

EasyTOCの外観設定

幅の設定と見出しラベルの設定をやっておけばあとはデフォルトでもOKです。

この記事の下の方に見た目をさらにオシャレにするCSSコード例を載せてるのでそちらも参考にしてみてください。

Easy Table of Contents の高度な設定

最後はEasyTOCの高度な設定です。

いくつか日本語では使えない設定があります。ここでは見出しの設定だけやっておけば問題ありません。

項目内容
小文字アンカーを小文字で表示(日本語非対応)
ハイフネーション目次が改行される場合単語をハイフンでつなぐ(日本語非対応?)
ホームページホームページに掲載されている項目で目次を表示
CSSプラグインで使用されているCSSスタイルを無視する
見出し目次として表示されるHタグを選択、h3まで表示したいならh4以降のチェックを外す
除外する見出し目次として表示したくない文字を設定(日本語非対応)
スムーズスクロールのオフセット目次をクリックした時に、見出しがブラウザの上部とどれくらい離れてるかを入力
モバイルのスムーズスクロールのオフセット上の設定のスマホ版
パス制限目次を表示したくないページをURLで指定
デフォルトのアンカー接頭辞リンクのidに使用する接頭辞を指定
ウィジェットの固定セレクタウィジェットで目次を使用している場合に固定したい位置を指定

EasyTOCの外観設定

EasyTOCのCSSカスタムコード例

ここからは目次をさらにオシャレに見せるためのCSSカスタマイズの例をいくつか紹介します。

ここで紹介するCSSコードは、「外観」 > 「カスタマイズ」にある「追加CSS」にコピペしてください。

EasyTOCのCSSカスタマムコード例

テーマによっては「追加CSS」の項目がない場合があります。その場合は外観 > テーマ編集でstyle.cssの下部にコピペしてください。

シンプルでクールなどこでも使える目次スタイル

どんなタイプのサイトにも使えるシンプルでクールなスタイルがこちら。

枠線の色や見出しの色はプラグインの設定から変更できるので配色だけ変えればいろんなところで使いまわせます。

EasyTOCのCSSカスタムコード例 シンプルな目次スタイル

#ez-toc-container {
  border-width: 2px !important;
  border-radius: 0;
}
#ez-toc-container ul.ez-toc-list a {
  display: block;
  border-bottom: 1px solid #eee;
  padding: 8px;
}
.ez-toc-title-container {
  display: block;
  width: 100%;
}
#ez-toc-container p.ez-toc-title {
  display: block;
  text-align: center;
  margin-bottom: 5px;
}
.ez-toc-title-toggle {
  position: absolute;
  top: 13px;
  right: 15px;
}

おしゃれでかわいいピンクの目次スタイル

2つ目はこちら。女性向けサイトやブログでよくみるスタイルです。

EasyTOCのCSSカスタムコード例 おしゃれでかわいいピンクの目次スタイル

  • タイトルの色: #ff9b9a
  • 背景色: #fff
  • 枠の色: #ffd2d2
  • リンクの色: #65574a
#ez-toc-container {
  border-width: 2px !important;
  border-radius: 0;
}
#ez-toc-container ul.ez-toc-list a {
  display: block;
  padding: 6px;
  font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ゴシックM-PRO","HGMaruGothicMPRO";
}
.ez-toc-title-container {
  display: block;
  width: 100%;
}
#ez-toc-container p.ez-toc-title {
  display: block;
  text-align: center;
  margin-bottom: 5px;
}
.ez-toc-title-toggle {
  position: absolute;
  top: 13px;
  right: 15px;
}
#ez-toc-container.counter-decimal ul.ez-toc-list li a::before, .ez-toc-widget-container.counter-decimal ul.ez-toc-list li a::before {
  color: #f98886;
}

落ち着いた色合いのフラットなスタイル

3つ目は落ち着いた感じのフラットなスタイルです。背景色を変更することで印象をガラッと変えることも可能。

EasyTOCのCSSカスタムコード例 落ち着いた色合いのフラットなスタイル

  • タイトルの色: #65574a
  • 背景色: #f5f5f5
  • 枠の色: #f5f5f5
  • リンクの色: #65574a
#ez-toc-container {
  border-width: 2px !important;
  border-radius: 0;
}
#ez-toc-container ul.ez-toc-list a {
  display: block;
  padding: 6px;
}
.ez-toc-title-container {
  display: block;
  width: 100%;
}
#ez-toc-container p.ez-toc-title {
  display: block;
  text-align: center;
  margin-bottom: 5px;
  font-weight: bold !important;
}
.ez-toc-title-toggle {
  position: absolute;
  top: 13px;
  right: 15px;
}
#ez-toc-container.counter-decimal ul.ez-toc-list li a::before, .ez-toc-widget-container.counter-decimal ul.ez-toc-list li a::before {
  color: #ff855d;
  margin-right: 8px;
}

まとめ

コンテンツが長くなるとページ全体を確認するのが面倒なので、UX的にも目次は必須。

ただ、目次は設置してあってもスタイルがデフォルトのままだと、見た目がどうしてもよく見るアフィサイトっぽくなります。

ここで紹介したサンプルコードのように少し変更するだけでかなり印象が変わるので、ぜひスタイルカスタマイズに挑戦してみてください。