Table of contents plusの使い方、設定、カスタマイズの方法【プラグイン】

  • ブックマーク
  • Feedly

新しいテーマに変更したら、スノモンの目次が使えなくなったので、
急遽目次のプラグインを入れました。

これが結構設定でやる事が多かったので、
設定方法とCSSのカスタマイズ法をシェアさせていただきます( ˊᵕˋ )

完成図はこちら↓

インストールとワードプレスの設定

まずは管理画面の「プラグイン」 →「新規追加」で
「Table of contents plus」と検索しましょう。

↑インストールができたら、赤枠部分の「有効化」をクリック。

次に目次を表示させる為に、プラグインの設定をします。

管理画面の「設定」→ 「TOC+」をクリック。

「基本設定」タブで「位置」と「表示条件」「以下のコンテンツタイプを自動挿入」の設定をします。

位置

ここでは、記事のどこに目次を設置するかを決めます。
(デフォルトは「最初の見出しの前」になっています)

表示条件

見出しの数が何個以上で、目次を自動生成するかを設定します。

もしここを「3」で設定したら、
記事の中の見出しが「2つ」の場合、記事に目次は自動生成されません。

以下のコンテンツタイプを自動挿入

目次を自動挿入するには「post」にチェック。
固定ページに自動挿入するには「page」にチェックを入れましょう。

追加CSSの設定

このままでは、目次は左寄せなので、追加CSSで「中央寄せ」にします。

/* 目次の中央寄せ */
#toc_container {
margin: auto;
}

これをそのままコピペしていただければ大丈夫です!

目次のカスタマイズ

このままだと非常に味気ないので、CSSでカスタマイズしていきます。

「上級者向け」の設定

管理画面の「設定」→ 「TOC+」をクリック。

「基本設定」の下にある「上級者向け」をクリック。

設定項目が表示されたら、赤枠部分のチェックを入れましょう。

「カスタマイズ用」CSSの設定

今回はこちらのブログから、カスタマイズをそのままコピペしました。
「digipress(外部ページ)」

/* 目次TOC+*/
#toc_container{
margin:20px auto 30px;
background-color:rgba(44,153,181,.04); /* 目次全体の背景カラー */
border:3px solid rgba(64,105,144,.2); /* 目次全体の枠線 */
border-radius:3px;
box-sizing:border-box;
padding:38px 52px;
display:table;
min-width: 68%;
counter-reset:li;
}

/* テーマによるリストの装飾を一旦無効化 */
#toc_container ul.toc_list li::before{
content:none;
padding:0;
margin:0;
width:0;
height:0;
background:none;
box-shadow:none;
}

/* 目次の見出しタイトル */
#toc_container .toc_title{
text-align:center;
font-weight:bold;
font-size:118%;
padding:0;
}

/* 見出しタイトル左のアイコン */
#toc_container .toc_title::before{
position:relative;
font-size:28px;
content:”\2254″;
display:inline-block;
width:40px;
height:40px;
line-height:34px;
margin-right:8px;
border-radius:50%;
vertical-align:baseline;
speak:none;
-webkit-font-smoothing:antialiased;
color:#fff;
background-color:#5f7b96;
}

/* 表示/非表示トグル */
#toc_container .toc_toggle a{
font-size:13px;
font-weight:normal;
padding:2px 4px;
}

/* 目次エリア */
#toc_container p.toc_title + ul.toc_list{
padding:20px 0 0;
margin:20px 0 0;
border-top:1px solid rgba(0,0,0,.1);
}

/* リスト共通スタイル */
#toc_container ul.toc_list li{
position:relative;
padding:0;
margin:0;
}

/* 目次リンク共通スタイル */
#toc_container ul.toc_list li a{
position:relative;
font-size:94%;
font-weight:normal;
text-decoration:none;
display:inline-block;
line-height:1.6;
padding:3px 0;
margin:5px 0;
transition:all .3s ease;
}
#toc_container ul.toc_list a,
#toc_container ul.toc_list a:visited{
color:#5f7b96; /* リンクカラー */
}
/* マウスオーバー時 */
#toc_container ul.toc_list li a:hover{
text-decoration:none;
box-shadow:0 2px;
}

/* 親の目次 */
#toc_container ul.toc_list > li > a{
font-size:104%;
font-weight:bold;
margin-left:40px;
}

/* 親の目次(左側の連番) */
#toc_container ul.toc_list > li::before,
#toc_container ul.toc_list > li::after{
position:absolute;
top:3px;
left:0;
}
/* 連番背景 */
#toc_container ul.toc_list > li::before{
content:”;
display:inline-block;
vertical-align:bottom;
width:32px;
height:32px;
margin-right:7px;
border-radius:16px;
background-color:rgba(125,157,188,0.66);
}
/* 連番 */
#toc_container ul.toc_list > li::after{
counter-increment:li;
content:counter(li);
width:32px;
line-height:32px;
font-family:’Avenir Next’, ‘Helvetica Neue’, Arial, ‘Meiryo’,’Yu Gothic’, san-serif;
font-weight:400;
text-align:center;
color:#fff;
}

/* 子の目次 */
#toc_container ul.toc_list > li > ul{
margin-left:40px;
}

/* 子の目次の左側のアイコン */
#toc_container ul.toc_list > li ul li::before{
position:absolute;
top:3px;
left:0;
content:’\2023′;
display: inline-block;
width:14px;
height:28px;
line-height:28px;
font-size:18px;
color:#5f7b96;
}
#toc_container ul.toc_list > li ul li a{
font-weight: normal;
margin-left:16px;
}

/* レスポンシブ設定(667px幅以下) */
@media only screen and (max-width: 667px){
#toc_container{
padding:20px 3vw;
min-width:auto;
width:100%!important;
}
#toc_container p.toc_title + ul.toc_list{
padding:20px 0 0;
}
#toc_container ul.toc_list > li > ul{
margin-left:30px;
}
}

素晴らしい目次のカスタマイズが他にも沢山あるので、
ぜひ参考にされてください。

その他のワードプレスのプラグインの記事はこちら↓
【コピペ禁止にできるプラグイン「WP-Copy Protect」の使い方】

  • ブックマーク
  • Feedly

この記事を書いた人