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

2024年3月21日

当ページのリンクには広告が含まれています。

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

あわせて読みたい

Easy Table of Contentsの使い方を徹底解説｜目次プラグイン

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

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

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

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

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

→詳細はこちら

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

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

サイトをみてみる

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%;	
}}

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

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

#ez-toc-container{
  border-width: 2px;
  border-radius:0; 	
  margin:30px 0;
}

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

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

#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行目：タイトルカラー

目次内の上下余白調整

#ez-toc-container .ez-toc-list{
  margin:10px 0;
}

内側の余白は一般設定からも指定できますが、上下余白のみバランスが悪かったため、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選

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

.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%;	
}}

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

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

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行目から先を追記してください。

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

アイコンは、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から読み込む方法

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も、すべてのページに適用されます。

→詳細はこちら

ちなみに、当サイトテーマSWELLでは、最初から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;
}

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

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

.ez-toc .ez-toc-title::before{
   font-family: "FontAwesome";
   content: "\f0ca";
   padding-right: 6px;	
}

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

タイトルを調整

.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〜h4見出しの調整

/* 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;
}

デフォルトは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選

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

#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;/* スクロールバーのカラー */
}

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

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

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

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

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

あわせて読みたい

Easy Table of Contentsの使い方を徹底解説｜目次プラグイン

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

Follow @kagenodesk

シェアしていただけると励みになります

URLをコピーしました！

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

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

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

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

目次内の上下余白調整

見出しに下線を引く

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

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

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

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

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

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

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

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

タイトルを調整

目次内の背景カラー

目次内フォントカラー

h2〜h4見出しの調整

目次内の行間調整

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

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

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

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

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

コメントフォームコメントをキャンセル

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

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

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

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

目次内の上下余白調整

見出しに下線を引く

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

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

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

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

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

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

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

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

タイトルを調整

目次内の背景カラー

目次内フォントカラー

h2〜h4見出しの調整

目次内の行間調整

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

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

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

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

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

コメントフォーム コメントをキャンセル

コメントフォームコメントをキャンセル