＜wordPressプラグイン＞Table of Contents Plusで目次を簡単に設置できる| テクワク

1 Table of Contents Plus
2 インストール
3 Table of Contents Plus設定
4 Table of Contents Plus　カスタマイズ

Table of Contents Plus

Table of Contents Plusというプラグインはご存知でしょうか？

このプラグインをインストールすると目次を簡単に表示することができます。目次はユーザビリティを上げるために必要で、どの部分に何が書いているかを的確に伝えれます。

目次のクリック率は高く必須でしょう。

インストール

プラグインから新規追加をクリックします。

右上にあるキーワード検索に「Table of Contents Plus」と入力して「Table of Contents Plus」を探し「インストール」をクリックします。

「有効化」をクリックします。これでインストールは完了です。設定をクリックするとTOC＋となるプラグインが追加されているのがTable of Contents Plusです。

Table of Contents Plus設定

設定からTable of Contents Plusを開きます。

位置：デフォルトのままが最適です。

表示条件：h1～h6が何個以上使えば目次を表示するか決めれます。

以下のコンテンツタイプを自動挿入：目次は投稿ページに表示するので「post」を選択しましょう。

ここは基本的にデフォルトで問題ありません。ここでは目次に表示するタイトルを任意のタイトルに変更できます。

階層表示：目次の階層を付けることができます

番号振り：記事の見出し順に番号がふられます

スムーズ・スクロール効果を有効化：これにチェックを入れると目次をクリックした時にスクロールします。チェックを外せば一気に飛びます。

残りはデフォルトで問題ありません。

最後に上級者メニューを開きます。上級者メニューにある「見出しレベル」はh1～h3以外はチェックを外しましょう。基本的にこの３つにチェックすれば問題ありません。

※h4、h5、h6も使う方はチェックを入れたままでいいでしょう。

Table of Contents Plus　カスタマイズ

デフォルトはシンプルな表示でカスタマイズしないと少し見ずらいのでカスタマイズをおすすめします。

通常はこんな感じ

カスタマイズすると見やすくなります。

カスタマイズするには上級者向け設定の「CSS ファイルを除外」にチェックをいれます。これでプラグイン自体のCSSは反映されなくなります。

貼り付ける場所は「外観」→「カスタマイズ」→「追加CSS」に貼り付けて下さい。

/*目次デザインの変更設定*/
/* TOC 目次 */
#toc_container{
 margin-top:25px; /* 目次の上のスペースの幅*/
 margin-bottom:35px; /* 目次の下のスペースの幅*/
 border-radius: 0px; /*角を丸める場合は設定*/
 font-size: 16px; /*目次内の文字の大きさ*/
 padding-right: 20px; /*右端から20pxはなす */
 padding-left: 20px; /*左端から20pxはなす */
 background-color: #f5f5f5; /*目次ボックスの背景色*/
 border: 8px solid #b4b4b4; /*ボックスの外枠の設定*/
}
 
#toc_container .toc_title{
 font-size: 18px; /*目次タイトルの文字の大きさ*/
 color: #4A4A4A; /*目次タイトルの文字の色*/
 text-align: center;  /*目次タイトルを中央に配置*/
}
 
/*目次タイトルの前のファイルみたいな記号を入れる設定*/
#toc_container .toc_title:before{
 content: "\f0f6";
 font-family: FontAwesome;
 padding-right: 6px;
 color: #8A8A8A;
}
 
#toc_container .toc_toggle a{
 color: #7A7A7A; /*目次タイトルの横の閉じるマークの色*/
}
 
#toc_container ul{
 counter-reset:number; /*目次番号が増えるよう設定*/
 list-style:none; /*目次番号以外の記号は表示させない*/
}
 
#toc_container ul li{
 line-height: 1.25em; /*項目の高さ*/
 margin-bottom: 0.5em; /*項目間の幅*/
 margin-left:16px; /*目次の各項目の始まりを左端から離す*/
}
 
#toc_container ul li:before{
 counter-increment: number; /*項目の始めの数字をつける*/
 content: counter(number);
 font-weight: bold;
 color: #069;
 padding-right:12px; /*数字と目次項目の幅を広げたいときはここを調整*/
 margin-left:-20px;
}
 
#toc_container ul li a{
 font-weight: bold; /*目次項目の文字を太字に*/
 color: #069; /*目次項目の文字の色*/
}
 
#toc_container ul ul{
 margin-top: 0.5em; /*2レベル目の項目の上スペース幅の設定*/
}
 
#toc_container ul ul li{
 line-height: 1.25em; /*2レベル目の項目の高さ*/
 margin-bottom: 0.5em; /*2レベル目の項目の下の幅*/
}
#toc_container ul ul li:before{
 content: "\f0da"; /*三角マークを入れる*/
 font-family: FontAwesome;
 padding-right: 6px;
 margin-left:0px;
 color: #CCC;
 margin-left:-65px; /*2レベル目を左からどこに配置するのか*/
}
 
#toc_container ul ul li a{
 color: #3D3D3D; /*2レベル目の項目の文字色*/
 font-weight: normal; /*2レベル目の項目の文字は太字にしない*/
 padding-right:6px; /*2レベル目の項目を右端から離す*/
}

参考サイト

/*--------------------------------------
  TOC+
--------------------------------------*/
#toc_container {
	display: block !important;
	width: 80% !important;
	background: #fff;
	border: 1px solid #ccc;
	font-size: 95%;
	box-sizing: border-box;
	line-height: 1.4;
	margin: 36px auto;
	padding: 1em 2em;
}
 
#toc_container .toc_title {
	text-align: center;
	background: #eee;
	border-bottom: 2px solid #ddd;
	padding: 0.4em 0;
}
 
#toc_container ul {
    list-style: none;
    margin-bottom: 0;
}
 
#toc_container ul li {
    margin: 0;
    padding-left: 0;
    text-indent: 0;
}
 
#toc_container ul a {
	display: block;
	text-decoration: none;
	color: #444;
	border-bottom: 1px dotted #ccc;
}
 
#toc_container .toc_list > li > a {
	border-bottom: 2px solid #ccc;
	font-size: 110%;
}
 
#toc_container ul ul {
	padding: 1em 0 1em 1em;
}
 
#toc_container li {
	margin-bottom: 0.8em;
	padding-bottom: 0.2em;
}

参考サイト

CSSの色はお好みの色に変更してください。