Table of Contents Plusの設定方法＆CSSデザイン

Table of Contents Plus（通称：TOC＋）というプラグインをご存知ですか？

TOC＋は、自動で記事に目次を追加してくれるプラグインです。以下のような便利な目次が、誰でも簡単に利用できるようになる便利なプラグインなんですね。

おおかみくん

この見出し、読みやすくていいな！

ひつじくん

僕のサイトでも使ってるけど、みんな結構見出しを見てくれているみたいだね。

この目次は実際に僕も導入をしておりますが、利用してくれているユーザーの数も多く、SEO上の効果もそれなりに期待できるものだと思っています。導入する価値はありですね！

そこで当記事では、TOC＋の導入方法・デザイン方法をサクッと解説させていただこうかと思います。まずは初期設定の方法から見ていくことにしましょう。

Table of Contents Plusのインストール方法

WordPress管理画面からプラグイン新規追加

まずはTable of Contents Plusをインストールするために、WordPress管理画面>プラグイン>新規追加と進んでください。

Table of Contents Plusを検索する

そして、検索窓で「Table of Contents Plus」と入力して、検索をしましょう。そうするとプラグインが見つかるはずです。

Table of Contents Plusをインストール

Table of Contents Plusが見つかったら、「今すぐインストール」のボタンを押しましょう。インストールは10秒ほどで完了します。

Table of Contents Plusを有効化

インストールが完了したら、そのまま「有効化」のボタンを押しましょう。

これで各記事に見出しが表示されるようになります。…が、細かな初期設定がまだ終わっていないので、続いて設定を始めていくことにしましょうか！

Table of Contents Plusの初期設定方法

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

WordPress管理画面の「設定」>「TOC＋」という項目を探してクリックしてください！ ここから設定を始めていきますね。

僕の使っている設定

設定を始めると言ったものの、Table of Contents Plusはほとんど設定が必要ありません。

僕が使っている設定は上の写真の通りです（赤枠が変更点）。

必要があるとすれば、「次の投稿タイプの時に表示」「上級者設定」という部分に関してのみだと思います。これについて詳しく見ていきましょう。

次の投稿タイプの時に表示

僕はpost・pageのところにチェックをしています。こうすることで投稿ページ/固定ページともに目次を表示させることができます。

このあたりは自分のスタイルに合わせてチェックを入れるようにしてもらえればいいかと思います。たとえば固定ページには見出しを表示したくないという人なら、pageのチェックを外しておきましょう。

「上級者向け」の設定

さらに「基本設定」の下にある上級者向けというところをクリックすれば、以下のような設定が出てきます。

ここはオプションですが、僕は以下のように設定しています。

トップページへの表示

トップページに見出しを表示したい場合には、ここにチェックを入れておきましょう。

当サイトのようにトップページに記事を入れている場合には、ここにはチェックを入れておいたほうがユーザーにとってもわかりやすくていいかもしれませんね！

見出しレベル

目次に表示する見出しも指定できます。

デフォルトではh1〜h6まですべて表示されるようになっていますが、これはh1〜h3(h4)くらいまででもいいかもしれませんね。あんまり表示させてもうるさいくなってしまうので、絞ってあげたほうが良いでしょう。

Table of Contents Plusのデザインカスタマイズ

ここまででTable of Contents Plusは実装できましたが、まだデザインカスタマイズは終わっていません。

現状では上写真のようなデザインです。左寄せで簡素なデザインになっていますので、これを変更していきたいと思います。

デザインそのままで、中央寄せに変更する

デザインはそのままでいいから、中央寄せに変更したいなら以下のようなコードをスタイルシート(style.css)の最下部に書き込んでください。

#toc_container {
   margin:auto;
}

さらなるTOC＋のデザインカスタマイズ

また、デザインを大幅にカスタマイズをしたいなら以下を試して見てください。

これは以下のCSSコードを、「カスタマイズ」>「追加CSS」に貼り付けてもらうだけで実装できます！

なお、このコードはnaifix様のブログが紹介しているものを参考に、改変させていただいております。

#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;
background: #4C9CF5;
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 #ddd;
font-size: 100%;
}
 
#toc_container .toc_list > li > a {
border-bottom: 2px solid #4C9CF5;
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;}
}

まとめ

Table of Contents Plusの導入方法＆設定方法のまとめでした。いかがでしたでしょうか？

やはり目次があると読者としては記事の内容が一目瞭然になり嬉しいものです。実際ヒートマップで確認しても、目次は結構クリックされていますので、SEO上の効果も見込めますね。

Table of Contents Plusを使えば、とっても簡単に便利な見出しを導入できますので、ぜひ利用して見てくださいませ！

X