WordPressブログに目次を導入・設定して、見た目をおしゃれにカスタマイズしていく方法をご紹介します。 すでにプラグインを導入済みの方は、「見た目をカスタマイズ」からお読みください。
目次
プラグインTable of Contents Plusのインストール
目次を導入するには、プラグインTable of Contents Plusを使うのが一番簡単です。 ダッシュボードから、「プラグイン」をクリックし、「キーワード」のところに「Table of Contents Plus」と入力します。 似たような名前のプラグインがあるので注意してください。 右上の「インストール」→「有効化」と順にクリックします。
Table of Contents Plusの設定
有効化できたら、次はプラグインの設定を済ませます。 ダッシュボードから、「設定」→「TOC＋」と順にクリックします。
今回は目次を導入するだけなので、「基本設定」の部分だけとりあえず設定します。
項目をひとつづつ設定していきます。
位置
お好みで良いかと思います。「最初の見出しの前」にしている方が多いようです。
表示条件
僕はあまり短い記事なら目次はいらないかなーと思っているので、「２つ以上見出しがあるとき」にしています。
以下のコンテンツタイプを自動挿入
通常の記事だけに目次を入れる場合は「post」だけにチェックを入れます。 固定ページ（自己紹介やお問い合わせページなど）にも目次を入れたい場合は「page」にもチェックを入れましょう。 僕は「post」だけにしています。
見出しテキスト
こちらは「目次」のタイトルになります。 僕はデフォルトのままですが、「この記事の目次」とか「クリックで読みたい部分にジャンプできます」とかの方がユーザーにとってわかりやすいかもしれません。 下で紹介する方法と同じようにカスタマイズしたい方は、上の画像と同じようにチェックを入れておいてください。（タイトルの文章や、「テキストを表示」「テキストを非表示」の中身はお好きなように書き換えていただいて大丈夫です。）
階層表示
こちらは見やすくするためにチェックを入れておいた方が良いでしょう。
番号振り
チェックを入れると、目次の各見出しの前に番号が表示されます。こちらも、今回の方法でカスタマイズする場合はチェックを入れておいてください。
スムーズ・スクロール効果を有効化
僕はチェックを入れていませんが、こちらにチェックすると「トップへ戻る」ボタンを押したときみたいになめらかに該当箇所へ移動します。
横幅
こちらはお好みで。今回の方法でカスタマイズする場合は、表示が崩れる場合があるので「自動（デフォルト）」にしておいてください。
回り込み
「なし（デフォルト）」が一番見やすいかと思います。
文字サイズ
95～100%くらいが見やすいかと思います。このブログと同じ見た目にしたい方は「99%」にしておいてください。
プレゼンテーション
こちらで背景色を変えることができます。このブログと同じようにしたい場合は「水色」を選んでおいてください。
「上級者向け」設定
今回紹介するカスタマイズ方法の場合は、こちらはほとんどデフォルトのままでOKです。 「見出しレベル」と「除外する見出し」のみ、必要があれば設定します。
「見出しレベル」は見出しをどこまで細かく目次に表示するかということです。
h4以下も良く使う場合で、細かく目次に表示したければ全てチェックを、逆に「目次はざっくりh3くらいまででいい」という方はh4以下のチェックを外してください。 そもそもh4以下はあまり使わないという方であれば気にしなくていいかと思います。 ちなみに、今回のカスタマイズではh3部分の見た目までしかいじっていないので、あらかじめご了承ください。
「除外する見出し」は、目次に表示させたくないものがある場合に設定します。 テーマやプラグインによっては「関連記事」などのタイトルがh3見出しになっていることがあります。 この「関連記事」も見出しに反映させる場合は問題ないのですが、「関連記事」は見出しに反映させたくないという方もいらっしゃるかと思います。 その場合はここに「関連記事」と入力しておけば、Table of Contents Plusが「関連記事」を見出しとして拾わなくなります。
とりあえずここまで設定しておけば大丈夫です。 設定し終わったら、左下の「設定を更新」をクリックして保存してください。
見た目をカスタマイズ
Table of Contents Plusの設定を済ませただけだと、見た目はこんな感じです。 
悪くはないのですが、文字が詰まりすぎていてちょっと見づらいですよね。 もう少しオリジナリティを出したいという方もいるでしょう。 せっかくなので、見やすく、おしゃれにカスタマイズしていきたいと思います。 以下で紹介していくコード（CSS）を、ダッシュボードの「外観」→「テーマの編集」の「スタイルシート（style.css）」に追記してください。
余白を調整&枠のデザイン
まずは適度な余白をつけていきます。ついでに外枠をなくし、角丸をつけたデザインにしました。
#toc_container p.toc_title+ul.toc_list>li {
margin-bottom: 0.1em;
padding-bottom: 0.4em;
}
#toc_container p.toc_title+ul.toc_list {
margin-top: 1em;
margin-right: 0.4em;
}
#toc_container {
border: none !important;
border-radius: 9px;
margin-top: 30px;
}
#toc_container li {
padding-left: 1em !important;
line-height: 1.8em;
}
#toc_container ul ul {
margin-bottom: 10px;
}
h2同士を離し、h2見出しとその中の入れ子になっているh3見出しは少しくっつけています。こうすることで、より見出し同士の関連性がわかりやくなるかと思います。
h3見出しを小さく
次に、小見出し（h3）の文字を少し小さくします。
#toc_container ul>li>ul>li {
font-size: 94% !important;
}
これでh2とh3で少しメリハリがつきます。「94%」の部分はお好みで変えてください。
数字部分の余白とフォントを変更
数字と見出しがちょっと近すぎるので、もう少し余白を空けます。ついでに数字部分のフォントも変えています。
.toc_number {
margin-left: -0.5em;
margin-right: 0.5em;
font-family: 'Dynalight', cursive;
}
こちらのフォントはGoogle Fontsを使っています。 Google Fontsの使い方はこちらのサイトがとてもわかりやすいので参考にしてみてください。
参考 【2017年版】ゼロから分かるGoogle Fontsの使い方
ただ、デフォルトのフォントのままでも十分良い感じになりますので、「めんどくさい」という方はそのままでも良いと思います笑。
タイトルの文字間を調整
目次タイトルの「Contents」の文字が少し窮屈に感じたので、文字間を広げています。特に気にならなければ、こちらのコードは追記しなくても大丈夫です。
#toc_container p.toc_title {
text-align: center;
font-weight: 700;
margin: 0;
padding: 0;
letter-spacing: 0.05em;
}
これでだいぶ見やすくなったかと思います。
もし文字（リンク）の色も同じにしたい場合は、以下のコードも追加してください。
/*リンクの色など*/
#toc_container a {
text-decoration: none;
text-shadow: none;
color: #4394de !important;
}
まとめたコードはこちらです。僕と同じ見た目で良ければこちらのコードをまるっとコピペしちゃってください。
/*目次のスタイル */
#toc_container p.toc_title+ul.toc_list>li {
margin-bottom: 0.1em;
padding-bottom: 0.4em;
}
#toc_container p.toc_title+ul.toc_list {
margin-top: 1em;
margin-right: 0.4em;
}
#toc_container {
border: none !important;
border-radius: 9px;
margin-top: 30px;
}
#toc_container li {
padding-left: 1em !important;
line-height: 1.8em;
}
#toc_container ul ul {
margin-bottom: 10px;
}
.toc_number {
margin-left: -0.5em;
margin-right: 0.5em;
font-family: 'Dynalight', cursive;
}
#toc_container p.toc_title {
text-align: center;
font-weight: 700;
margin: 0;
padding: 0;
letter-spacing: 0.05em;
}
/*リンクの色など*/
#toc_container a {
text-decoration: none;
text-shadow: none;
color: #4394de !important;
}
僕はやっていないのですが、Table of Contents Plus全体を中央寄せにしたい場合は以下のコードを追加してください。
#toc_container {
margin: auto;
}
デザイン・サンプル集
せっかくなのでTable of Contents Plusのデザインのサンプルを何パターンか作ってみました。 気に入ったものがあればコードをコピペしてお使いください。
背景色を変えて大見出し（ｈ２）のみに下線
こちらはリンクの色はそのままで背景色を変えただけです。 それでもだいぶ印象は変わりますね。 h2見出しのみに下線をつけ、より大きな見出しがわかりやすいようにしてみました。
#toc_container p.toc_title+ul.toc_list>li {
margin-bottom: 0.1em;
padding-bottom: 0.4em;
}
#toc_container p.toc_title+ul.toc_list {
margin-top: 1em;
margin-right: 0.4em;
}
#toc_container {
border: none !important;
border-radius: 9px;
margin-top: 30px;
background: antiquewhite;/*背景色*/
}
#toc_container li {
padding-left: 1em !important;
line-height: 1.8em;
}
#toc_container ul ul {
margin-bottom: 10px;
}
.toc_number {
margin-left: -0.5em;
margin-right: 0.5em;
font-family: 'Dynalight', cursive;/*数字のフォント*/
}
#toc_container p.toc_title {
text-align: center;
font-weight: 700;
margin: 0;
padding: 0;
letter-spacing: 0.05em;
}
#toc_container ul>li>ul>li {
font-size: 94% !important;/*小見出しの文字サイズ*/
}
#toc_container p.toc_title+ul.toc_list>li>a {
border-bottom: 1px solid;/*大見出しのみに下線*/
}
/*リンクの色など*/
#toc_container a {
text-decoration: none;
text-shadow: none;
color: #4394de !important;
}
ガーリー＆シックに
外枠の内側に破線をつけ、可愛らしい雰囲気にしてみました。 border: dashed 2px #98605e !important;/*内側に破線*/ という部分のpxや#～の部分を変えれば、破線のスタイルを変更できます。
#toc_container p.toc_title+ul.toc_list>li {
margin-bottom: 0.1em;
padding-bottom: 0.4em;
}
#toc_container p.toc_title+ul.toc_list {
margin-top: 1em;
margin-right: 0.4em;
}
#toc_container li {
padding-left: 1em !important;
line-height: 1.8em;
}
#toc_container ul ul {
margin-bottom: 10px;
}
.toc_number {
margin-left: -0.5em;
margin-right: 0.5em;
font-family: 'Dynalight', cursive;/*数字のフォント*/
}
#toc_container p.toc_title {
text-align: center;
font-weight: 700;
margin: 0;
padding: 0;
letter-spacing: 0.05em;
}
#toc_container ul>li>ul>li {
font-size: 94% !important;/*小見出しの文字サイズ*/
}
#toc_container {
background: #fce4d6 !important;/*背景色*/
padding: 10px;
margin-bottom: 1em;
width: auto;
display: table;
box-shadow: 0 0 0 10px #fce4d6 !important;
border: dashed 2px #98605e !important;/*内側に破線*/
border-radius: 9px;
margin-top: 30px;
}
#toc_container a {
text-decoration: none;
text-shadow: none;
color: #98605e !important;/*リンクの色*/
}
タイトルにアイコンをつけて可愛らしく
外枠を破線にし、タイトルの横にアイコンをつけてみました。 こちらのアイコンはFont Awesomeを使っています。 すでにFont Awesome導入済みであれば、 content: ‘\〇〇’;/*アイコンのコード*/ の〇〇の部分に好きなアイコンのコードを入れれば、アイコンを変えることができます。 Font Awesomeの使い方はこちらにわかりやすく書かれています。
参考【保存版】Font Awesomeの使い方まとめ：Webアイコンフォントを使おう
#toc_container p.toc_title+ul.toc_list>li {
margin-bottom: 0.1em;
padding-bottom: 0.4em;
}
#toc_container p.toc_title+ul.toc_list {
margin-top: 1em;
margin-right: 0.4em;
}
#toc_container li {
padding-left: 1em !important;
line-height: 1.8em;
}
#toc_container ul ul {
margin-bottom: 10px;
}
.toc_number {
margin-left: -0.5em;
margin-right: 0.5em;
font-family: 'Dynalight', cursive;/*数字のフォント*/
}
#toc_container p.toc_title {
text-align: center;
font-weight: 700;
margin: 0;
padding: 0;
letter-spacing: 0.05em;
}
#toc_container ul>li>ul>li {
font-size: 94% !important;/*小見出しの文字サイズ*/
}
#toc_container p.toc_title {
text-align: center;
font-weight: 700;
margin: 0;
padding: 0;
color: brown !important;/*タイトルの色*/
margin: 0 25% auto;
position: relative;
}
#toc_container {
background: #fef9fb !important;/*背景色*/
padding: 10px;
margin-bottom: 1em;
width: auto;
display: table;
border: dashed 1px rosybrown !important;/*枠線*/
border-radius: 9px;
margin-top: 30px;
}
/*リンクの色など*/
#toc_container a {
text-decoration: none;
text-shadow: none;
color: #ef857d !important;
}
/*アイコンのスタイル*/
#toc_container span.toc_toggle a:before {
position: absolute;
font-family: FontAwesome;
content: '\f004';/*アイコンのコード*/
left: -8em;
color: #ef857d;
}
#toc_container span.toc_toggle {
position: relative;
}
モノトーンでスマートに
シンプルですが見やすく、どんなサイトにも合いやすいのではないかと思います。 タイトル部分に下線をつけてみました。
#toc_container p.toc_title+ul.toc_list>li {
margin-bottom: 0.1em;
padding-bottom: 0.4em;
}
#toc_container p.toc_title+ul.toc_list {
margin-top: 1em;
margin-right: 0.4em;
}
#toc_container li {
padding-left: 1em !important;
line-height: 1.8em;
}
#toc_container ul ul {
margin-bottom: 10px;
}
.toc_number {
margin-left: -0.5em;
margin-right: 0.5em;
font-family: 'Dynalight', cursive;/*数字のフォント*/
}
#toc_container p.toc_title {
text-align: center;
font-weight: 700;
margin: 0 25%;/*25%の部分を変えれば下線の長さを変更できます*/
padding: 0;
letter-spacing: 0.05em;
border-bottom: solid #454545 1px;/*下線のスタイル*/
}
#toc_container ul>li>ul>li {
font-size: 94% !important;/*小見出しの文字サイズ*/
}
#toc_container {
background: #fff !important;
padding: 10px;
margin-bottom: 1em;
width: auto;
display: table;
border: solid 1px #454545;
margin-top: 30px;
}
/*リンクの色など*/
#toc_container a {
text-decoration: none;
text-shadow: none;
color: #454545 !important;
}
影をつけて立体的に
影をつけてカードっぽくしてみました。 さらに、タイトル部分に背景色をつけて目立つようにしています。 外枠をなくして、背景全体に色をつけても良いかもしれません。 外枠をなくす場合は、/*外枠*/の左側に書いてあるコードをまるっと削除してしまってください。
#toc_container p.toc_title+ul.toc_list>li {
margin-bottom: 0.1em;
padding-bottom: 0.4em;
}
#toc_container p.toc_title+ul.toc_list {
margin-top: 1em;
margin-right: 0.4em;
}
#toc_container li {
padding-left: 1em !important;
line-height: 1.8em;
}
#toc_container ul ul {
margin-bottom: 10px;
}
.toc_number {
margin-left: -0.5em;
margin-right: 0.5em;
font-family: 'Dynalight', cursive;/*数字のフォント*/
}
#toc_container ul>li>ul>li {
font-size: 94% !important;/*小見出しの文字サイズ*/
}
#toc_container p.toc_title {
text-align: center;
font-weight: 700;
padding: 0;
color: #4d4398;/*文字の色*/
margin: 0 30% auto !important;
border-radius: 25px;/*背景の角丸*/
background-color: rgba(164,168,212,0.4);/*タイトルの背景色*/
letter-spacing: 0.05em;
}
#toc_container {
background: #fff !important;/*背景色*/
padding: 10px;
margin-bottom: 1em;
width: auto;
display: table;
box-shadow: 10px 10px 10px #a4a8d4;/*影*/
border: solid 1px #4d4398;/*外枠*/
border-radius: 9px;
margin-top: 30px;
}
/*リンクの色など*/
#toc_container a {
text-decoration: none;
text-shadow: none;
color: #4394de !important;
}
タイトル部分に横幅いっぱいの背景＆タイトルを左寄せ
タイトルを左寄せして、タイトル部分に横幅いっぱいの背景をつけてみました。 あまりやっているサイトは見たことがないので、他の人と被りたくない方は是非。
#toc_container p.toc_title+ul.toc_list>li {
margin-bottom: 0.1em;
padding-bottom: 0.4em;
}
#toc_container p.toc_title+ul.toc_list {
margin-top: 1em;
margin-right: 0.4em;
}
#toc_container li {
padding-left: 1em !important;
line-height: 1.8em;
}
#toc_container ul ul {
margin-bottom: 10px;
}
.toc_number {
margin-left: -0.5em;
margin-right: 0.5em;
font-family: 'Dynalight', cursive;/*数字のフォント*/
}
#toc_container ul>li>ul>li {
font-size: 94% !important;/*小見出しの文字サイズ*/
}
#toc_container p.toc_title {
text-align: left !important;/*左寄せ*/
font-weight: 700;
margin: 0;
padding: 0 60% 0% 5% !important;
color: #915da3;/*文字の色*/
background-color: rgba(145,93,163,0.3);/*タイトルのラベルの色*/
letter-spacing: 0.05em;
}
#toc_container {
background: #fff!important;
margin-bottom: 1em;
width: auto;
display: table;
border: solid 1px #915da3 !important;
margin-top: 30px;
padding: 0 !important;
}
/*リストの外側の余白*/
#toc_container p.toc_title+ul.toc_list {
margin: 1em;
}
/*リンクの色など*/
#toc_container a {
text-decoration: none;
text-shadow: none;
color: #915da3 !important;
}
タイトル部分をラベルっぽく＆タイトルを白抜きに
ファイルを買ったときについてくるインデックスシートのような印象。 こちらもタイトルを左に寄せていますが、「目次」のタイトル部分と「hide」の部分を白抜きにしてみました。 個人的に気に入っているデザイン。
#toc_container p.toc_title+ul.toc_list>li {
margin-bottom: 0.1em;
padding-bottom: 0.4em;
}
#toc_container p.toc_title+ul.toc_list {
margin-top: 1em;
margin-right: 0.4em;
}
#toc_container li {
padding-left: 1em !important;
line-height: 1.8em;
}
#toc_container ul ul {
margin-bottom: 10px;
}
.toc_number {
margin-left: -0.5em;
margin-right: 0.5em;
font-family: 'Dynalight', cursive;/*数字のフォント*/
}
#toc_container ul>li>ul>li {
font-size: 94% !important;/*小見出しの文字サイズ*/
}
#toc_container .toc_toggle > a {
color: #fff !important;/*［hide］の文字色*/
letter-spacing: 0.1em;/*文字間の余白*/
}
/*リンクの色など*/
#toc_container a {
text-decoration: none;
text-shadow: none;
color: #409ecc !important;
}
#toc_container {
background-color: #fff !important;/*背景色*/
margin-bottom: 1em;
width: auto;
display: table;
border: solid 3px #008db7 !important;/*外枠*/
position: relative;
border-radius: 0 7px 7px;/*角丸*/
margin-top: 60px;
}
#toc_container p.toc_title {
text-align: left;
font-weight: 700;
padding: 0 5% !important;
color: #fff !important;/*文字色*/
margin: 0 60% 0 0;
border-radius: 7px 7px 0 0;/*角丸*/
background-color: #008db7 !important;/*背景色*/
position: absolute;
top: -1.9em;
left: -0.2em;
letter-spacing: 0.05em;
display: inline-block
}
配色などは、ご自身のサイトに合わせて変えていただくと、より馴染むのではないかと思います。
追記：マイナーチェンジしました（2017/8/27)
目次のタイトル部分の色とフォントを変え、数字部分のフォントも変えました。 数字部分のフォントは通常のフォントを使い、「Contents」の部分にgoogle fontsを使用しています。
/*目次のスタイル */
#toc_container ul>li>ul>li {
font-size: 94% !important;
}
#toc_container p.toc_title+ul.toc_list>li {
margin-bottom: 0.1em;
padding-bottom: 0.4em;
}
#toc_container p.toc_title+ul.toc_list {
margin-top: 1em;
margin-right: 0.4em;
}
#toc_container {
border: none !important;
border-radius: 9px;
margin-top: 30px;
}
#toc_container li {
padding-left: 1em !important;
line-height: 1.8em;
}
#toc_container ul ul {
margin-bottom: 10px;
}
.toc_number {
margin-left: -0.5em;
margin-right: 0.5em;
font-family: 'Didot', "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝体", "Yu Mincho", YuMincho, serif;
font-style: italic;
font-weight: 200;
}
#toc_container p.toc_title {
text-align: center;
font-weight: 700;
margin: 0;
padding: 0;
letter-spacing: 0.07em;
color: #256198;
font-family: 'Open Sans';
}
まとめ
Table of Contents Plusのカスタマイズはゼロからやろうとすると少し難易度が高いのですが、余白を調整するだけでもだいぶ見やすくなります。 目を惹くデザインにすればより目次に注目してもらえるようになるかもしれませんね。
カスタマイズのデザイン・サンプルは、気が向いたらまた追加していくかもしれません。 ちなみに、今回の画像で使っている見出しの記事はこちらです。
参考Simplicityに人気記事ランキングを導入＆順位ごとに色を変えるカスタマイズ方法。
プラグインの設定方法はSimplicityを前提にしていますが、人気記事ランキングのカスタマイズ方法はどのテーマでも共通です。興味がある方はこちらも覗いてみてください。
サービスメニュー
＼本を出版しました／
＼セルフマガジン無料送付／
