WordPressテーマJINの目次プラグインをEasy Table of Contentsに変更！CSSでTOC+のJIN風レイアウトにも対応

しょっぱなから「あれ、このテーマJINじゃなくね・・・？」って思った皆さん、ごめんなさい。

このブログはテーマにCocoonを採用しているんですが、別サイトでJINを愛用しているので許して下さい・・・笑。

という訳で今日はJINが推奨しているTable of Contents Plus（TOC+）というプラグインからEasy Table of Contents（EToC）に切り替えると共に、レイアウトをJINが標準で搭載しているTOC+デザインそっくりに切り替えて行きましょう。

Easy Table of Contents（EToC）切り替え

EToCはTOC+を元に作られているっぽい
色の変更はちょっと面倒

JINにEasy Table of Contents（EToC）導入

TOC+の停止
EToCのインストール
EToCの設定

Easy Table of Contents（EToS）JIN風CSS設定

EToS用追加CSS
EToC用CSSの解説
それ以外のCSS変更

Easy Table of Contentsを簡単にJIN風レイアウトに！

Easy Table of Contents（EToC）切り替え

そもそも今回何故TOC+からEToCに切り替えたかというと、単純にTOC+の開発が止まっている為。

最後の更新から既に3年以上経過し、Wordpressそのものも4から5にアップデートされたり、Wordpressやプラグインを動かすPHPもバージョンアップが重ねられています。

特段今TOC+にセキュリティ上の脆弱性があったとかそういう話ではないんですが、やはり開発が3年以上ストップしているという事は今後の更新の可能性もあまり見込めません。

そういう背景から他のプラグインへの切り替えを迷っていたところ、フォロワーさんからEToCをオススメして頂いたのでこれを期に切り替えを試してみる事にしました。

私は最近TOC+の代わりにEasy Table of Contentsってプラグイン使い始めました！
TOC+と違って記事でH3・H4までとか指定できて便利です…?
— あいか?愛の不時着✈ (@AikaAimemo) May 28, 2019

（あいかさん、ご教示ありがとうございます！）

EToCはTOC+を元に作られているっぽい

Easy Table of Contents - 詳細 — Easy Table of Contents – 詳細

どうやらプラグインの詳細からクレジット欄を見てみるとEToCはTOC+を元に作られた（この説明ではfork＝分岐）みたいに謳っているのですが、設定画面やCSSのセレクタなんかを見れば一目瞭然。

ほぼTOC+だと思っていいと思います。

ただし、TOC+にはサイトマップ出力機能がありましたがEToCにはありません。

もしTOC+でサイトマップを使っている方は諦めるか、PS Auto Sitemap等に切り替えをして下さい（PS Auto Sitemapも4年以上更新されてないのでアレですが・・・笑）。

色の変更はちょっと面倒

JINをテーマに使用しTOC+を使う場合、JIN公式サイトの手順通り設定すればJIN側でCSSを用意してくれているデザインになります。

ちょうど上記の画像がそうなんですが、TOC+の場合はJINのテーマ側の編集画面から色の編集が可能。

しかし今回のEToCの場合JIN側ではCSSの用意が無いので、テーマの色やフォントを変更したい場合はCSSをいじってあげる必要があります。

基本的な変更点は下記に網羅しますが、標準機能を使ったスタイル変更からちょっとだけ不便になる事は覚えておいて下さい。

JINにEasy Table of Contents（EToC）導入

それでは作業を開始します。

TOC+の停止

まずはTOC+をプラグインページから停止させて下さい。

TOC+とEToCは両方共目次を出力するプラグインなので、併用すると両方の目次が表示されてしまいます。

EToCをしばらく使ってみてから問題なさそうならアンインストールで良いと思います。

EToCのインストール

EToCのインストールをしていきます。

Easy Table of Contents - インストール — Easy Table of Contents – インストール

新規追加をクリック
キーワード欄に「Easy Table of Contents」を入力
今すぐインストール、その後有効化

以上でインストールは完了しました。

EToCの設定

続いて設定です。

設定はJIN公式マニュアルにあるTOC+の設定とほぼ同じです。

目次の作り方｜JIN MANUAL > Table Of Contents Plusの基本設定

EToCもこれに準じた設定をして行きます。

Easy Table of Contents - 一般設定 — Easy Table of Contents – 一般設定

サポートを有効化欄の投稿にチェック
自動挿入の投稿、固定ページにチェック

（変更する場合）見出しラベルを変更

ちなみにJINで採用されているTOC+の標準はContentsという見出しなので、JIN完コピを目指すなら「Contents」と入れると良いと思います笑。

Easy Table of Contents - 高度設定 — Easy Table of Contents – 高度設定

CSS欄にチェック

ここにチェックを入れないとプラグイン側のCSSとバッティングしてデザインが崩れてしまうので、必ずチェックをつけて下さい（もちろんEToS標準のデザインが気に入ったらこのまま使ってもOKです）。

以上は設定で終わりなので、下部の「変更を保存」ボタンを押下して設定を完了させてましょう！

Easy Table of Contents（EToS）JIN風CSS設定

Easy Table of Contents - JIN風レイアウト実装 — Easy Table of Contents – JIN風レイアウト実装

続いてCSSを当ててEToSのレイアウトをJINのTOC+風に変更して行きましょう。

ちなみに以下のCSSをそのまま実装すると上記の画像のようになりますが、多分JINのTOC+そっくりで見分けがつかないと思います笑。

その前に、既に導入されている方は多いと思いますが必ずJINの子テーマにて設定を行って下さい。

子テーマで設定を行わないと、JIN本体のアップデートの度にこの作業をやり直す事になってしまいます。

子テーマについてはJIN公式の以下のページをご覧下さい。

WordPressテーマ「JIN」のアップデート情報｜JIN（ジン） > 子テーマを活用しよう

以下の手順はテーマのCSSファイルを編集する事になります。
既にJIN子テーマで何かCSSを追加している場合は、必ずバックアップをとって元に戻せるようにしてから作業を行って下さい。
手順として、既にjin-child内にあるstyle.cssをコピーし、そのファイル名をstyle_backup.cssに変更して保存しておく等があげられます。
当作業においていかなる場合も当サイトでは責任を負いかねますのでご承知おき下さい。

EToS用追加CSS

以下をjin-chile内のstyle.cssに追記します。

CSS

/* Easy Table of Contentsの外観をJIN標準のTOC+風に */

#ez-toc-container {
	background: #fff !important;
	border-radius: 2px;
	color: #666;
	font-family: 'Quicksand', 'ヒラギノ角ゴ ProN W3', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;
	overflow: hidden;
	letter-spacing: 1px;
	position: relative;
	padding: 0;
	margin-bottom: 40px;
	width: 100% !important;	
}

#ez-toc-container:before {
	position: absolute;
	content: "";
	border: 4px solid #e1eff4;
	width: 100%;
	height: 100%;
	max-width: 100%;
	box-sizing: border-box;
	opacity: 0.15;
}

#ez-toc-container .ez-toc-title-container {
	color: #3b4675!important;
	margin-bottom: 10px;
	margin-top: 45px;
	font-size: 1.65rem;
	text-align: center;
	position: relative;
	line-height: 2rem;
}

#ez-toc-container.contracted .ez-toc-title {
  padding: 0px 40px; }
  @media (max-width: 767px) {
    #ez-toc-container.contracted .ez-toc-title {
      margin-top: 35px !important;
      margin-bottom: 35px !important; } }
  @media (min-width: 768px) {
    #ez-toc-container.contracted .ez-toc-title {
      margin-top: 45px !important;
      margin-bottom: 45px !important; } }

#ez-toc-container .ez-toc-title {
  text-align: center;
  position: relative;
  line-height: 2rem; }
  @media (max-width: 767px) {
    #ez-toc-container .ez-toc-title {
      margin-bottom: 0px;
      margin-top: 35px;
      font-size: 1.45rem; } }
  @media (min-width: 768px) {
    #ez-toc-container .ez-toc-title {
      margin-bottom: 10px;
      margin-top: 45px;
      font-size: 1.65rem; } }

#ez-toc-container ul:not([class]) li:before {
  display: none; }

#ez-toc-container .ez-toc-list {
  list-style-type: none !important;
  counter-reset: li; }
  @media (max-width: 767px) {
    #ez-toc-container .ez-toc-list {
      padding: 0 25px;
      padding-bottom: 30px; } }
  @media (min-width: 768px) {
    #ez-toc-container .ez-toc-list {
      padding: 0 60px;
      padding-bottom: 40px; } }

#ez-toc-container .ez-toc-list > li {
  list-style-type: none !important;
  position: relative;
  margin-left: 6px;
  padding-left: 40px;
  margin-bottom: 5px;
  padding-bottom: 4px;
  line-height: 1.35rem; }

#ez-toc-container .ez-toc-list > li:after {
  counter-increment: li;
  content: counter(li);
  position: absolute;
  left: 5px;
  top: -1px !important;
  background: none;
  font-family: 'Quicksand',  sans-serif;
  letter-spacing: 2px;
  font-size: 1.2rem;
  letter-spacing: -1px; }

#ez-toc-container .ez-toc-list > li:first-child:after {
  left: 8px; }

#ez-toc-container .ez-toc-list > li:nth-child(3):after {
  left: 6px; }

#ez-toc-container .ez-toc-list > li:nth-child(11):after {
  letter-spacing: 0.15rem; }

#ez-toc-container .ez-toc-list > li > a {
  text-decoration: none !important;
  font-size: 0.95rem;
  line-height: 1.35rem; }

#ez-toc-container .ez-toc-list li a {
  color: #3b4675 !important;
  display: block; }

#ez-toc-container .ez-toc-list > li a:hover {
  text-decoration: underline !important; }

#ez-toc-container .ez-toc-list > li ul {
  margin-top: 10px;
  padding-left: 0px;
  margin-bottom: 18px; }

#ez-toc-container .ez-toc-list > li > ul > li {
  margin-bottom: 5px;
  padding-left: 33px; }

#ez-toc-container .ez-toc-list > li > ul > li a {
  position: relative;
  text-decoration: none !important; }
  @media (max-width: 767px) {
    #ez-toc-container .ez-toc-list > li > ul > li a {
      line-height: 1.15rem;
      font-size: 0.8rem; } }
  @media (min-width: 768px) {
    #ez-toc-container .ez-toc-list > li > ul > li a {
      line-height: 1.25rem;
      font-size: 0.85rem; } }

#ez-toc-container .ez-toc-list > li > ul li a:before {
  position: absolute;
  content: "・";
  font-size: 2rem;
  left: -25px;
  top: 0px; }

#ez-toc-container .ez-toc-list > li > ul > li > ul {
  margin-top: 5px; }

#ez-toc-container .ez-toc-list > li > ul > li > ul > li a {
  font-size: 0.75rem; }

#ez-toc-container .ez-toc-title a {
  text-decoration: none;
  font-size: 0.75rem; }

.ez-toc-number {
  display: none; }
  
 
#ez-toc-container .ez-toc-title {
	display:inline-block;
	vertical-align: middle;
}

#ez-toc-container .ez-toc-title-toggle:before {
	content: '[';
 }
 
#ez-toc-container .ez-toc-title-toggle:after {
 content: ']';
 }
 
#ez-toc-container .ez-toc-title-toggle {
	display: inline;
	vertical-align: middle;
}

#ez-toc-container .ez-toc-title-toggle > a {
	text-decoration: none;
}

#ez-toc-container .ez-toc-btn-default {
	background-image: none;
}

#ez-toc-container .ez-toc-icon-toggle {
	font-size: 0.75rem;
}

#ez-toc-container .ez-toc-icon-toggle:before {
	content: 'hide';
}

#ezw_tco-3 .ez-toc-widget-container ul.ez-toc-list li.active {
    background-color: #f5f5f5;
}

コピー＆ペーストしたら保存しFTPでのアップロード、Wordpressのテーマエディターを使っている場合は保存をして、レイアウトが反映されているか確認して下さい。

レイアウトの変更が反映されない場合、ブラウザのキャッシュが残っている可能性があります。
その場合スーパーリロード（キャッシュを強制的に無視しサーバーから情報を得る）を試して見て下さい。
Windowsのほとんどのブラウザでは「Shiftキー+F5キー」
Macは「Commandキー+Rキー」
これでも反映されない場合、キャッシュ系プラグインのキャッシュ破棄や一時停止をして様子を見てみて下さい。

EToC用CSSの解説

EToCとTOC+のセレクタ（classやid）がほぼ似ていた為、簡単な置換のみで同じレイアウトを実現しています。

と言うかほとんど同じようなセレクタだったので、ほぼセレクタ名だけ置換しただけです・・・笑。

枠線の色を変えたい

CSS

#ez-toc-container:before {
	position: absolute;
	content: "";
	border: 4px solid #e1eff4; /* #e1eff4がカラーコード */
	width: 100%;
	height: 100%;
	max-width: 100%;
	box-sizing: border-box;
	opacity: 0.15;
}

目次全体の枠線を変更したい場合はここの#以降をカラーコード等で好きな色に変更ができます。

見出しの色を変えたい

CSS

#ez-toc-container .ez-toc-title-container {
	color: #3b4675!important; /* #3b4675がカラーコード */
	margin-bottom: 10px;
	margin-top: 45px;
	font-size: 1.65rem;
	text-align: center;
	position: relative;
	line-height: 2rem;
}

見出しの色を変更したい場合はここの#以降をカラーコード等で好きな色に変更ができます。

階層の数字色を変更したい

CSS

#ez-toc-container {
	background: #fff !important;
	border-radius: 2px;
	color: #666; /* #666がカラーコード */
	font-family: 'Quicksand', 'ヒラギノ角ゴ ProN W3', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;
	overflow: hidden;
	letter-spacing: 1px;
	position: relative;
	padding: 0;
	margin-bottom: 40px;
	width: 100% !important;	
}

階層のH2タグ前に表示される数字の色を変更したい場合はここの#以降をカラーコード等で好きな色に変更ができます。

目次のH2～H6タグへのリンク色を変更したい

CSS

#ez-toc-container .ez-toc-list li a {
  color: #3b4675 !important; /* #3b4675がカラーコード */
  display: block; }

目次に実際に表示される見出し（H2～H6）へのリンク色を変更したい場合はここの#以降をカラーコード等で好きな色に変更ができます。

サイドバー追従ウィジェットのアクティブ背景色を変えたい

CSS

#ezw_tco-3 .ez-toc-widget-container ul.ez-toc-list li.active {
    background-color: #f5f5f5; /* #f5f5f5がカラーコード */
}

サイドバーの追尾エリアにEToCを設定した時、今読んでいる所（アクティブ）の背景色を変更したい場合はここの#以降をカラーコード等で好きな色に変更ができます。

これはJINとTOC+には無かった機能なんですが、EToCには標準でサイドバー追尾ウィジェット設定時に見出しタグがアクティブの時その部分の背景色が変わるという機能があります。
ユーザビリティも上がるので良かったら使って下さい。
不要な場合はこの部分をセレクタ毎削除、文字色も変えたい場合は「color: #カラーコード」みたいに設定してあげても良いと思います。