しょっぱなから「あれ、このテーマJINじゃなくね・・・？」って思った皆さん、ごめんなさい。
このブログはテーマにCocoonを採用しているんですが、別サイトでJINを愛用しているので許して下さい・・・笑。
という訳で今日はJINが推奨しているTable of Contents Plus（TOC+）というプラグインからEasy Table of Contents（EToC）に切り替えると共に、レイアウトをJINが標準で搭載しているTOC+デザインそっくりに切り替えて行きましょう。
Easy Table of Contents（EToC）切り替え
そもそも今回何故TOC+からEToCに切り替えたかというと、単純にTOC+の開発が止まっている為。
最後の更新から既に3年以上経過し、Wordpressそのものも4から5にアップデートされたり、Wordpressやプラグインを動かすPHPもバージョンアップが重ねられています。
特段今TOC+にセキュリティ上の脆弱性があったとかそういう話ではないんですが、やはり開発が3年以上ストップしているという事は今後の更新の可能性もあまり見込めません。
そういう背景から他のプラグインへの切り替えを迷っていたところ、フォロワーさんからEToCをオススメして頂いたのでこれを期に切り替えを試してみる事にしました。
（あいかさん、ご教示ありがとうございます！）
EToCはTOC+を元に作られているっぽい
どうやらプラグインの詳細からクレジット欄を見てみると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」を入力
- 今すぐインストール、その後有効化
以上でインストールは完了しました。
EToCの設定
続いて設定です。
設定はJIN公式マニュアルにあるTOC+の設定とほぼ同じです。
EToCもこれに準じた設定をして行きます。
- サポートを有効化欄の投稿にチェック
- 自動挿入の投稿、固定ページにチェック
- （変更する場合）見出しラベルを変更
- CSS欄にチェック
ここにチェックを入れないとプラグイン側のCSSとバッティングしてデザインが崩れてしまうので、必ずチェックをつけて下さい（もちろんEToS標準のデザインが気に入ったらこのまま使ってもOKです）。
以上は設定で終わりなので、下部の「変更を保存」ボタンを押下して設定を完了させてましょう！
Easy Table of Contents（EToS）JIN風CSS設定
続いてCSSを当ててEToSのレイアウトをJINのTOC+風に変更して行きましょう。
ちなみに以下のCSSをそのまま実装すると上記の画像のようになりますが、多分JINのTOC+そっくりで見分けがつかないと思います笑。
その前に、既に導入されている方は多いと思いますが必ずJINの子テーマにて設定を行って下さい。
子テーマで設定を行わないと、JIN本体のアップデートの度にこの作業をやり直す事になってしまいます。
子テーマについてはJIN公式の以下のページをご覧下さい。
EToS用追加CSS
以下をjin-chile内のstyle.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のテーマエディターを使っている場合は保存をして、レイアウトが反映されているか確認して下さい。
EToC用CSSの解説
EToCとTOC+のセレクタ（classやid）がほぼ似ていた為、簡単な置換のみで同じレイアウトを実現しています。
と言うかほとんど同じようなセレクタだったので、ほぼセレクタ名だけ置換しただけです・・・笑。
枠線の色を変えたい
#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;
}
目次全体の枠線を変更したい場合はここの#以降をカラーコード等で好きな色に変更ができます。
見出しの色を変えたい
#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;
}
見出しの色を変更したい場合はここの#以降をカラーコード等で好きな色に変更ができます。
階層の数字色を変更したい
#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タグへのリンク色を変更したい
#ez-toc-container .ez-toc-list li a {
color: #3b4675 !important; /* #3b4675がカラーコード */
display: block; }
目次に実際に表示される見出し（H2～H6）へのリンク色を変更したい場合はここの#以降をカラーコード等で好きな色に変更ができます。
サイドバー追従ウィジェットのアクティブ背景色を変えたい
#ezw_tco-3 .ez-toc-widget-container ul.ez-toc-list li.active {
background-color: #f5f5f5; /* #f5f5f5がカラーコード */
}
サイドバーの追尾エリアにEToCを設定した時、今読んでいる所（アクティブ）の背景色を変更したい場合はここの#以降をカラーコード等で好きな色に変更ができます。
それ以外のCSS変更
基本的にJINのテーマ側でカラー等を変えた場合変更されるのはこの辺の項目だけかな？と思います。
ちょっと込み入った話になりますが、基本的にEToSから吐かれるHTMLはTOC+のHTMLと非常に酷似しているんですが、トグル（hide部分、目次のオープン/クローズ）部分だけ結構違います。
CSSをいじる場合はその点に注意していじって下さい（最低限JIN風に似せる為にしかいじってないので、一部無効なCSSがそのままになってるかも知れません）。
Easy Table of Contentsを簡単にJIN風レイアウトに！
2018年3月にリリースされたJINも既に1年以上経過し、様々なアップデートが日々行われているようです。
JINカスタマイズの記事をリリースされている方も多いですし、この機会に是非カスタマイズして見て下さい！
コメント