MENU
カゲオ
管理人
陰ながらサイト運営を応援するブログ「カゲサイ」の管理人です。
WordPressやブログについてかゆいところに手が届く解説を心がけています。
→運営者情報をみる

WordPress

カスタマイズ
プラグイン
初期設定
エラー対処法
便利ツール
有料記事

その他

姉妹サイト
新着記事

新着記事をみる
もっと見る
人気記事をみる
もっと見る

運営中のサブブログ

主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。

サイトをみてみる
サブブログ｜デスク環境構築サイト運営中⇒見てみる

Easy Table of Contentsカスタマイズ｜目次用CSS

カスタマイズ
CSS 目次
当ページのリンクには広告が含まれています。
Easy Table of Contents目次カスタマイズ

前回は目次プラグインの設定について解説しました。

あわせて読みたい
Easy Table of Contentsの使い方を徹底解説｜目次プラグイン

ただデフォルトのデザインはあまりいただけないので、カスタマイズするCSSを解説します。
本文用の目次とウィジェット用目次それぞれ用意しました。

どれもコピペで使えます。

Easy Table of Contentsデフォルトデザイン

目次サイドバーBefore
Before
目次サイドバーAfter
After

こちらはウィジェット目次です。

その前に、当サイトで使用しているテーマでは、デフォルトで目次機能が用意されています。

SWELL 目次 ボックスデザイン
SWELL 目次 シンプルデザイン
SWELL 目次 上下ボーダーデザイン
SWELL 目次 ストライプデザイン
SWELL 目次 省略ボタン
SWELL 目次 リスト項目

4つのデザイン、2種類のリスト選択、長い目次用の省略ボタンなど選ぶだけのシンプル機能です。
超おすすめテーマですので、ぜひ一度ご覧になってみてください。

→詳細はこちら

管理人のデスク環境ブログも運営中です

在宅作業の参考になるアイテムがあるかもしれません。
デスク周りのアップデートを検討されている方はぜひ覗いてみてください。

サイトをみてみる
目次

管理人のデスク環境ブログも運営中です

在宅作業の参考になるアイテムがあるかもしれません。
デスク周りのアップデートを検討されている方はぜひ覗いてみてください。

サイトをみてみる

Easy Table of Contents目次カスタマイズ

まずは本文用の目次をカスタマイズしていきます。

Easy Table of Contents外観設定
easy-table-of-contents折りたたみボタン

大枠のデザインは、プラグインの外観設定から選択するだけで可能です。
目次の開閉ボタンは、折りたたみ表示にチェックをすると表示されます。

/* 目次枠線の太さ・角度・上下余白を調整 */
#ez-toc-container{
  border-width: 2px;
  border-radius:0; 	
  margin:30px 0;
}

/* 目次タイトルの背景色と余白調整 */	
#ez-toc-container .ez-toc-title-container, #ez-toc-container{
  background: #3d3d3d;
  margin:0;
  padding: 0;
}
/* 目次タイトルの余白とカラー */	
div#ez-toc-container .ez-toc-title {
  display:block;
  line-height:3;
  padding-left:3em;
  color:#fff!important;
}

/* 目次内の上下余白調整 */	
#ez-toc-container .ez-toc-list{
  margin:10px 0;
}

/* 見出しの下線 */	
#ez-toc-container .ez-toc-list li{
  display: block;	
  border-bottom:1px dashed #3d3d3d;				
}
#ez-toc-container .ez-toc-list li:last-child {
  border:0;
}

/* 目次開閉ボタン位置調整 */
.ez-toc-title-toggle{
  position:absolute;
  top:0;	
  left:-2%;	
}

/* 目次開閉ボタンデザイン */
#ez-toc-container .ez-toc-js-icon-con {
  border:none;
  background:#fff;
  border-radius:0;
  width:33px;
}

/* 目次開閉ボタン下にテキスト挿入 */
#ez-toc-container .ez-toc-title-toggle:after{
  position:absolute;
  content:"閉じる";
  top:2.5em;
  left:2em;	
  font-size:12px;	
  color:#fff;
  white-space: nowrap;
}

/* スマホ向けのサイズと位置調整 */
@media(max-width:500px) {
/* 目次タイトル */
div#ez-toc-container .ez-toc-title {
  font-size:15px;		 
  text-align:center;
  padding-left:initial;
  padding:5px 0;
}
/* 開閉ボタンの位置 */
#ez-toc-container .ez-toc-title-toggle{
  left:-7%;	
}}

調整する場合やいらないカスタムは、/* コメント*/を参考に、変更するなり削除してください。
一応それぞれのコードを解説します。

目次枠線の太さ・角度・上下余白

Easy Table of Contents枠線CSS
#ez-toc-container{
  border-width: 2px;
  border-radius:0; 	
  margin:30px 0;
}

2行目：枠線の太さ
3行目：枠線の角度
4行目：目次の上下余白

目次タイトルカラー・背景色・余白

Easy Table of ContentsタイトルCSS
#ez-toc-container .ez-toc-title-container, #ez-toc-container{
  background: #3d3d3d;
  margin:0;
  padding: 0;
}	
div#ez-toc-container .ez-toc-title {
  display:block;
  line-height:3;
  padding-left:3em;
  color:#fff!important;
}

1行目と6行目を分けて書くのがコツです。
2行目：背景カラー
8行目：タイトルの高さ
9行目：開閉ボタン用のスペースを空けるため、タイトルを右側にズラす
10行目：タイトルカラー

目次内の上下余白調整

Easy Table of Contents目次内上下余白CSS
#ez-toc-container .ez-toc-list{
  margin:10px 0;
}

内側の余白は一般設定からも指定できますが、上下余白のみバランスが悪かったため、CSSで指定しました。

見出しに下線を引く

Easy Table of Contents見出し下線CSS
#ez-toc-container .ez-toc-list li{
  display: block;	
  border-bottom:1px dashed #3d3d3d;				
}
#ez-toc-container .ez-toc-list li:last-child {
  border:0;
}

一番下だけ線が消えるように指定しています。
下線の種類は、お好みで変更してください。

あわせて読みたい
border線の種類別｜HTML&CSSサンプル21選

目次開閉ボタンの位置調整

Easy Table of Contents開閉ボタン位置調整CSS
.ez-toc-title-toggle{
  position:absolute;
  top:0;	
  left:-2%;	
}

デフォルトは右側に設置してありますが、左側の方が実用的だと思いますので、位置を変更しています。

目次開閉ボタンデザイン変更

Easy Table of Contents開閉ボタンデザインCSS
#ez-toc-container .ez-toc-js-icon-con {
  border:none;
  background:#fff;
  border-radius:0;
  width:33px;
}

サイズや背景を指定しています。

目次開閉ボタンの下にテキスト追加

Easy Table of Contents開閉ボタン下テキスト追加CSS
#ez-toc-container .ez-toc-title-toggle:after{
  position:absolute;
  content:"閉じる";
  top:2.5em;
  left:2em;	
  font-size:12px;	
  color:#fff;
  white-space: nowrap;
}

デフォルトは開閉ボタンだと分かりづらいため、テキストを追加してクリックできることを示唆してみました。

スマホから見た目次の調整

Easy Table of Contentsスマホ表示用CSS
@media(max-width:500px) {
div#ez-toc-container .ez-toc-title {
  font-size:15px;		 
  text-align:center;
  padding-left:initial;
  padding:5px 0;
}
#ez-toc-container .ez-toc-title-toggle{
  left:-7%;	
}}

スマホでは、タイトルを真ん中にし、フォントサイズを少し小さくしています。
それにともない、開閉ボタンも位置調整しました。

タイトル前にアイコンを入れる

Easy Table of Contentsタイトル前アイコン挿入CSS
div#ez-toc-container .ez-toc-title {
  color:#fff!important;
  line-height:3;
  padding-left:2em;
  display:block;
}
#ez-toc-container .ez-toc-title::before{
   position:absolute;
   left:0.7em;
   font-family: "FontAwesome";
   content: "\f0ca";
}

番外編として、開閉ボタンを設置しない場合にアイコンを入れる方法を解説します。
4行目を2emに変更、7行目から先を追記してください。

easy-table-of-contents折りたたみボタン

アイコンを入れる場合は、プラグイン設定の折りたたみ表示のチェックを外してください。

アイコンは、Font Awesomeの最新バージョンを使用しています。
content:""内を変更すれば、お好きなアイコンを指定できます。
※.コードの前に「\」を入れるのを忘れずに。
サイト内で使えるようにするには、以下のコードを読み込んでください。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

バージョン6.5.1は2024年3月時点で最新のものです。
アップデートがあった際は、この数値を変更すれば新しいアイコンを使えます。

headタグに読み込ませる

SWELLカスタマイザー

当サイトテーマのように、テーマ側のカスタマイザーにhead項目があればそちらに貼り付けてください。
テーマ側にない方はFTPソフトなどで、親テーマから「header.php」ファイルを子テーマへコピーする必要があります。

headに読み込ませると、すべてのページに適用されます。

あわせて読みたい
Cyberduckの使い方｜WordPressの子テーマを分かりやすく解説

functions.phpから読み込む方法

functions.php編集
function enqueue_scripts(){
	wp_enqueue_style('fontawesome','https://use.fontawesome.com/releases/v6.5.1/css/all.css');
}
add_action('wp_enqueue_scripts','enqueue_scripts');

functions.phpも、すべてのページに適用されます。

→詳細はこちら

ちなみに、当サイトテーマでは、最初からFont Awesomeを使用できます。
以下で目次に使えそうなアイコンをピックアップしました。

アイコンコード
f0c9
f03a
f0ca
f0cb
f0ae
f00b
f022

Easy Table of Contentsウィジェット目次用CSS

/* サイドバーの折りたたみボタンを消す */
.ez-toc-toggle{
   display: none;
}

/* 目次タイトル前にアイコン */
.ez-toc .ez-toc-title::before{
   font-family: "FontAwesome";
   content: "\f0ca";
   padding-right: 6px;	
}

/* タイトルの調整 */
.ez-toc .ez-toc-title {
   text-align: center;/* タイトルを真ん中へ   */
   padding: 2px;/* 内側の余白を調整   */
}

/* ウィジェット目次内の背景カラー */
#ez-toc-widget-container .ez-toc-list{
   background: #f1f1f1;
}

/* ウィジェット目次内フォントカラー */
#ez-toc-widget-container .ez-toc-list a{
   color: #fff;
}

/* h2見出しの調整 */
#ez-toc-widget-container .ez-toc-heading-level-2 a {
   font-size: 15px;
}
/* h3見出しの調整 */
#ez-toc-widget-container .ez-toc-heading-level-3 a{
   font-size: 14px;
}
/* h4見出しの調整 */
#ez-toc-widget-container .ez-toc-heading-level-4 a {
   font-size: 13px;
}

/* 見出しの行間調整 */
#ez-toc-widget-container li{
   line-height: 1.4;
}

/* 各見出しに下線を引く */
#ez-toc-widget-container li{
   border-bottom: 1px solid #bbb;	
}
#ez-toc-widget-container li:last-child {
   border:0;
}

/* 見出しマウスホバー時のカラー変更 */
#ez-toc-widget-container .ez-toc-list a:hover{
   color: #4285f4;
   background: #efefef;
}

/* 目次サイズ固定&スクロールバーを表示 */
.ez-toc.widget h4+*{
   max-height: 300px;/* 目次の高さ */
   overflow-y:scroll;
   padding:5px 0;	
   white-space: normal;	
}
.ez-toc.widget h4+*::-webkit-scrollbar {
   -webkit-appearance: none;
   width:10px;/* スクロールバーの横幅 */
   border-left:solid 1px #eee;/* スクロールバーの左側に線を引く */
}
.ez-toc.widget h4+*::-webkit-scrollbar-thumb {
   background-color: #aaa;/* スクロールバーのカラー */
}

これくらいあれば、だいたい思い通りの目次ウィジェットになるかなと思います。
わかる方は/* コメント */を参考に調整してみてください。
一応それぞれのコードの意味を解説します。

サイドバーの折りたたみボタンを消す

固定目次折りたたみボタン
.ez-toc-toggle {
	display: none;
}
easy-table-of-contents折りたたみボタン
目次の折りたたみボタン設定

プラグイン側の一般設定で、折りたたみ表示にチェックすると、サイドバーにも表示されてしまうため、上記コードで消しています。

タイトル前にアイコンを入れる

Easy Table of Contentsウィジェットタイトルアイコン
.ez-toc .ez-toc-title::before{
   font-family: "FontAwesome";
   content: "\f0ca";
   padding-right: 6px;	
}

アイコンは、Font Awesomeの最新バージョンを使用しています。
種類や読み込み方法は、先ほどの解説を参考にしてください。

タイトルを調整

Easy Table of Contentsウィジェットタイトル調整
.ez-toc .ez-toc-title {
   text-align: center;/* タイトルを真ん中へ   */
   padding: 2px;/* 内側の余白を調整   */
}

タイトルの位置と余白を調整しました。
フォントカラー、サイズ、太さはウィジェット設定から指定できます。

Easy Table of Contentsサイドバー設定

目次内の背景カラー

Easy Table of Contentsウィジェット背景色CSS
#ez-toc-widget-container .ez-toc-list{
   background: #f1f1f1;
}

目次内の背景を変更する場合、次のフォントカラーと合わせると良いかと思います。

目次内フォントカラー

Easy Table of ContentsウィジェットフォントカラーCSS
#ez-toc-widget-container .ez-toc-list a{
   color: #fff;
}

先ほどの背景カラーと合わせて変更すると、良いでしょう。

h2〜h4見出しの調整

Easy Table of Contentsウィジェット見出しCSS
/* h2見出しの調整 */
#ez-toc-widget-container .ez-toc-heading-level-2 a {
   font-size: 15px;
}
/* h3見出しの調整 */
#ez-toc-widget-container .ez-toc-heading-level-3 a{
   font-size: 14px;
}
/* h4見出しの調整 */
#ez-toc-widget-container .ez-toc-heading-level-4 a {
   font-size: 13px;
}

階層ごとにフォントを小さくしています。
そのほか、カラーや太さ、背景なども指定できます。

目次内の行間調整

Easy Table of Contentsウィジェット行間CSS
#ez-toc-widget-container li{
   line-height: 1.4;
}

デフォルトは1.6です。
私は少し狭くしていますが、このへんはお好みでどうぞ。

目次の見出しに下線を引く

Easy Table of Contentsウィジェット見出しborderCSS
#ez-toc-widget-container li{
   border-bottom: 1px solid #bbb;	
}
#ez-toc-widget-container li:last-child {
   border:0;
}

一番下の見出しだけ下線を消しています。
サンプルでは1本線ですが、他のborderタグを指定することもできます。

あわせて読みたい
border線の種類別｜HTML&CSSサンプル21選

目次のマウスホバー時の挙動

Easy Table of ContentsウィジェットマウスホバーCSS
#ez-toc-widget-container .ez-toc-list a:hover{
   color: #4285f4;
   background: #efefef;
}

マウスを乗せたときの挙動です。
サンプルは背景とフォントカラーを変更しています。

目次にスクロールバーを指定

Easy Table of ContentsウィジェットスクロールバーCSS
.ez-toc.widget h4+*{
   max-height: 300px;/* 目次の高さ */
   overflow-y:scroll;
   padding:5px 0;/* 目次内の余白 */
   white-space: normal;	
}
.ez-toc.widget h4+*::-webkit-scrollbar {
   -webkit-appearance: none;
   width:10px;/* スクロールバーの横幅 */
   border-left:solid 1px #eee;/* スクロールバーの左側に線を引く */
}
.ez-toc.widget h4+*::-webkit-scrollbar-thumb {
   background-color: #aaa;/* スクロールバーのカラー */
}

1行目のコードだけでもスクロール設定はできます。
7行目以降は、スクロールバー自体を微調整しました。

結論：Easy Table of Contents目次はカスタマイズ必須

以上、Easy Table of Contentsの目次CSSを解説しました。

見出しの多い記事は、自然と目次も長くなるため、スクロールバーの設置は必須かなと思います。

以下では、設定方法も書きました。

あわせて読みたい
Easy Table of Contentsの使い方を徹底解説｜目次プラグイン
カスタマイズ
CSS 目次
Easy Table of Contents目次カスタマイズ

この記事が気に入ったら
フォローしてね！

シェアしていただけると励みになります
  • URLをコピーしました！

記事への質問等はこちらからどうぞ

コメントフォーム

※日本語が含まれない内容は投稿できません。

  1. HOME
  2. WordPress
  3. カスタマイズ
  4. Easy Table of Contentsカスタマイズ｜目次用CSS
目次