かっこいい目次デザインへ！Table of Contents Plusの設定とカスタマイズ方法

本記事では上画像のようにTable of Contents plusで自動作成される目次のデザインをかっこよくする方法について紹介します．WordPressの管理画面からTable of Contents plusの設定画面でいくつか設定をした後に，スタイルシートでデザインを指定するという流れになります．

本記事の内容

Table of Contents plusの概要
スタイルシートをカスタマイズする

Table of Contents plusの概要

Table of Contents plusは記事から自動で目次を作成してくれるプラグインです．非常に便利です．

本サイトで参考にしている「沈黙のWebライティング」でも，記事内にどんな情報が書かれているかが訪問者に分かるように「目次」を設置することがお勧めされています．

参考「沈黙のWebライティング」の内容レビュー

インストール方法

Table of Contents plusの導入方法については以前の記事に書いたのでご覧ください．

3.2 Simplicity2に入れておきたいプラグイン

本記事ではSimplicity2を使用するにあたり，最低限入れておきたいプラグインの紹介と，特に記事を書くのに便利になるプラグインを...

www.how-to-make-affiliate-blog.com

設定方法１（固定ページと投稿ページの設定）

通常の投稿ページには目次を入れるが，固定ページには目次を入れたくない場合の設定方法です．

①WordPress管理画面から，「設定→TOC+」を選択します．

②「以下のコンテンツタイプを自動挿入」の部分に「post」とあります．postとは通常の投稿記事ページです．ここにはチェックを入れておきます．その下の「page」とは固定ページです．固定ページには目次を作らない場合はここのチェックを外しておきます．

またその下の「見出しテキスト」の部分を編集することで，目次のタイトル部分に表示される文字を変えることができます．

設定方法２（見出しレベルの選択方法）

目次の見出しは記事のhタグを使用して自動生成されます．

Simplicity2の場合は記事内の一番大きな見出しがh2になっています．

h2からh4までを目次に並べると項目数が多くなりすぎるので，h2とh3を目次に反映させるのがおすすめです．

その設定は

①管理画面から「設定→TOC+」を選択します．

②設定画面の下の方の「上級者向け(hide)」をクリックして，上級者向け設定を表示します．

③見出しレベルがあるので，heading2, heading3にチェックを入れます．ここにチェックを入れたものが目次に挿入されます．

設定方法３（非表示にする条件の設定）

見出しが2つほどしかない短い記事に，いちいち目次が作成されるのは不要なので，ある程度記事が長いときだけ目次を作成したいと思います．

そこで見出し項目数が一定数以上の場合だけ，目次を自動生成するように設定します．

①管理画面から「設定→TOC+」を選択します．

②「表示条件」で見出しの数を設定します．本サイトでは4つ以上にしています．

設定方法４（目次の位置を中央に設定する方法）

デフォルトでは目次の位置が左寄せになってしまいます．目次の位置を中央そろえにしたい場合もあると思います．

残念なことに，TOC＋の設定画面では配置位置の設定ができないので，以下のコードをスタイルシートに書き込むことで設定します．

①管理画面から「外観→テーマの編集」を選択します．

②「Simplicity2 child: スタイルシート (style.css)」に以下のコードを貼り付けます．

#toc_container {
  margin-left: auto;
  margin-right: auto;
}

#toc_container {

margin-left: auto;

margin-right: auto;

}

スタイルシートをカスタマイズする

スタイルシートを編集して，自動生成される目次のデザインを変更する方法を説明します．

デザインカスタマイズ用の事前設定

まずTOC+の設定が上書きされないように，以下の設定をします．

①管理画面から「設定→TOC+」を選択します．

②設定画面の下の方の「上級者向け(hide)」をクリックして，上級者向け設定を表示します．

③「CSSファイルを除外」という設定があるので，ここをチェックします．

スタイルシートに以下のCSSを貼り付ける

①管理画面から「外観→テーマの編集」を選択します．

②「Simplicity2 child: スタイルシート (style.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{

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レベル目の項目を右端から離す*/

}

各行の説明を全部コメントに書きましたので参考にしてください．

あまり難しいカスタマイズをしないで簡単にそのまま使いたい場合は，10行目のbackground-colorと11行目のborderの二つの色を，自分のサイトの雰囲気に合わせて変えるのがお勧めです．

設定が反映されない，目次が表示されない不具合への対処法

以上の操作をしてもTable of Contents plusの設定変更が反映されない場合は，次の3つの可能性が考えられます．

コードに全角スペースが入っている or ｛｝がきちんと閉じていない
ブラウザのキャッシュが残っていて，新しい設定が反映されたページが表示されていない
サーバーのセキュリティでWAFが引っかかっている

このあたりの修正方法は以前の記事に書きましたのでご覧ください．

今回次のサイトも設定時に参考にさせていただきました．

以上，Table Contents plusの目次デザインをかっこよくする方法でした．

ご一読いただきありがとうございます．