【目次プラグインTOC+】Table of Contents Plusの使い方とカスタマイズ方法【WordPress】

table of contents plus WordPress

WordPressの記事に自動で目次を追加するプラグイン『Table of Contents Plus』(TOC+)の使い方とカスタマイズの方法について解説します。

Table of Contents Plusを使うと、以下のように記事の見出しをまとめた形で目次を自動で追加することができます。

table of contents plus_07_完成

 

目次があると、これを見るだけで記事全体の内容を大まかに把握することができるようになるので、読者の利便性も向上しますよ。

Table of Contents Plusをインストールする方法

まずはじめにTable of Contents Plusをインストールします。

 

◆WordPress管理画面>プラグイン>新規追加>「table of contents plus」で検索>「今すぐインストール」

table of contents plus_01_インストール

インストールは10秒くらいで完了します。

 

◆「有効化」

table of contents plus_02_有効化

有効化が完了すれば、各記事の見出しが目次として表示されるようになります。

 

ただ、細かい設定ができますので、続けてTable of Contents Plusの設定をしていきましょう。

また、サイトのデザインに合わせてTable of Contents Plusのデザインもカスタマイズすると、より見やすい目次になりますよ。

Table of Contents Plusの設定方法

それではTable of Contents Plusの設定をしていきましょう。

次の手順で設定画面を開いてください。

 

◆WordPress管理画面>設定>TOC+

table of contents plus_03_設定

基本の設定

まずは基本の設定です。

例として、当ブログで使っている設定をご紹介します。赤枠の部分が変更点です。

table of contents plus_04_設定

上記のうち、変更をおすすめしたいのは「以下のコンテンツタイプを自動挿入」の箇所です。

「post」と「page」にチェックをすることで、投稿ページと固定ページに目次を表示することができます。

 

ほかはお好みで変更してもらえればOKです。

「上級者向け」の設定

「基本設定」の下にある「上級者向け」をクリックすると、次のように追加の設定が表示されます。

ここでも例として、当ブログで使っている設定をご紹介します。赤枠の部分が変更点です。

table of contents plus_05_上級設定

「CSSファイルを除外」にチェックをつけています。これは後でご紹介するデザインのカスタマイズをするためです。デザインのカスタマイズをしないのであれば、チェックを外したままでOKです。

「見出しレベル」で目次に表示する見出しを設定します。初期状態では全部チェックがついていますが、個人的にはh3までが良いかと思います。あまり細かい見出しまで含めてしまうと目次がごちゃごちゃして見にくくなってしまいます。

Table of Contents Plusをカスタマイズする方法

ここまでの設定が完了すると、次のような目次が記事に自動で追加されるようになります。

table of contents plus_07_中央化前後共通

目次の位置は左寄せでデザインもかなりシンプルです。このままでももちろん良いのですが、少し見にくい感じもしますので、目次の位置とデザインを変更したいと思います。

目次の位置を中央に変更する方法

左寄せだった目次の位置を中央に変更します。

やり方はとても簡単で、スタイルシート(style.css)に次のコードをコピペするだけです。

/* Table of Contents Plus(目次)を中央に表示させる */
#toc_container {
   margin:auto;
}

 

これで目次が中央に表示されるようになりました。

table of contents plus_07_中央化前後共通

目次のデザインを変更する方法

かなり簡素だったデザインを見やすくカスタマイズします。

こちらもスタイルシート(style.css)に次のコードをコピペするだけです。

/* Table of Contents Plus(目次)のデザインカスタマイズ */
#toc_container {
display: block !important;
background: #fff;
border: 2px solid #ccc;
font-size: 95%;
box-sizing: border-box;
line-height: 1.4;
margin-top: 20px;
margin-bottom: 20px;
padding: 1em 2em;
}
  
#toc_container .toc_title {
text-align: center;
color: #fff; /* 「目次」の文字色 */
background: #57B196; /* 背景色 */
border-bottom: 2px solid #ddd; /* 下線 */
padding: 0.4em 0;
}

#toc_container .toc_toggle {
color: #fff;
}
  
#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 #57B196; /* 下線 */
font-size: 100%;
}
  
#toc_container .toc_list > li > a {
border-bottom: 2px solid #57B196; /* 大見出しの下線 */
font-size: 110%; /* 大見出しのフォントサイズ */
}
  
#toc_container ul ul {
padding: 5px 0px 5px 10px;
}
  
#toc_container li {
margin-bottom: 0.8em;
padding-bottom: 0.2em;
}
 
/*スマホ対応*/
@media screen and (max-width: 413px)
{
#toc_container ul a  {
font-size: 80%;}
#toc_container .toc_list > li > a {
font-size:95%;}
#toc_container {
padding:1em 1em;}
}
 
@media screen and (min-width: 414px) and (max-width: 500px)
{
#toc_container ul a  {
font-size: 80%;}
#toc_container .toc_list > li > a {
font-size:95%;}
#toc_container {
padding:1em 1em;}
}

なお、上記のコードはNaifixさんひつじアフィリエイトさんで紹介されているコードを参考に、色などを当ブログにあうように変更して使わせていただいています。

 

これで目次のデザインが変更できました。

table of contents plus_07_完成

おまけ:スタイルシート(style.css)へのコピペの方法

念のため、スタイルシート(style.css)にコードをコピペする方法をご紹介しておきます。

 

◆WordPress管理画面>外観>テーマの編集>スタイルシート(style.css)>コードをコピペ>ファイルを更新

table of contents plus_08_スタイルシート

まとめ

table of contents plus_まとめ

WordPressの記事に自動で目次を追加するプラグイン『Table of Contents Plus』(TOC+)の使い方とカスタマイズの方法について解説しました。

冒頭でもお話したように、目次があることで記事全体の内容を大まかに把握することができるようになるので、読者の利便性も向上します。

Table of Contents Plusは設定もカスタマイズもとても簡単ですので、まだ利用されていない方はぜひ導入することをおすすめします!

コメント