「table of contents plus」の先頭の数字を非表示にしたい！特定の記事やページだけに適用するワザ

記事に自動的に目次をつけるプラグインとしては「table of contents plus」がとても便利です。

訪れた読者から見ると、目次をつけることで

記事全体の把握がすぐできる
求める情報がどこにあるかが分かりやすい
目次をクリックすると、すぐその場所に飛べる

といったことが自動で実現できるんですね。

そんなとても便利なプラグインですが、自動で目次が作成されることで以下の様なこともあります。

自動的に先頭に通し番号が振られるけど、
見出しに数字を手入力で入れたい場合があり、
自動的に先頭につく数字と、手入力の数字がかぶって
目次がとても見づらい！

目次が見づらくなる、ということは、分かりやすくするつもりでつけている目次が、逆にそれを阻害している、ということになり、そもそもの目次としての価値が激減する、ということから、ここではそんな場合の対処について解説します。

Contents

目次に対する具体的課題の例
見出し２の自動番号振りの非表示
見出し３の自動番号振りも非表示に！
今回のまとめ

目次に対する具体的課題の例

例えば簡単な例ですが、ワードプレスの「見出し２」を活用して、見出しを以下のように付けたとすると、

●目次を表示する
1) 目次の役割
2) 目次の課題とは
●プラグインの活用
1) プラグインのインストール
2) デザインカスタマイズ
今回のポイント

ここで目次の自動番号振りが有効になっていると、以下のようになってしまいます。

1 ●目次を表示する
2 1) 目次の役割
3 2) 目次の課題とは
4 ●プラグインの活用
5 1) プラグインのインストール
6 2) デザインカスタマイズ
7 今回のポイント

先頭の数字と続く目次の手入力の数字がかぶり、なにやらごちゃごちゃして見づらいですね。

こんな場合には、先頭に付く自動番号振りを非表示にすれば問題は一気に解決します。

見出し２の自動番号振りの非表示

自動番号振りの非表示は、プラグインの設定で行なうと「全ての記事の目次で番号振りが非表示になってしまう」ということになりますので、こではこの記事だけ、このページだけに特別にCSSを設定します。

記事やページ個別にCSSを適用するには、以下の記事を参照してみてください。

関連　特定の記事やページだけにCSSを設定する！

先頭に自動でつく数字を非表示にするには、以下のCSSを設定します。

span.toc_number.toc_depth_1 {
display: none;
}

span.toc_number.toc_depth_1 {

display: none;

}

表示としては先頭の数字が非表示になり、数字がかぶらずスッキリ表示。

見出し３の自動番号振りも非表示に！

また、以下の例のように、見出し２，見出し３を使って

目次を表示する（見出し２）
1) 目次の役割（見出し２）
1-1) 簡潔に表示する（見出し３）
1-2) 人目を引くタイトル付け（見出し３）
2) 見やすいデザイン（見出し２）
2-1）色の調整（見出し３）
2-2）幅の調整（見出し３）
今回のポイント（見出し２）

これが自動で番号振りがされると以下のようになります。

Contents
1 目次を表示する（見出し２）
2 1) 目次の役割（見出し２）
2.1 1-1) 簡潔に表示する（見出し３）
2.2 1-2) 人目を引くタイトル付け（見出し３）
3 2) 見やすいデザイン（見出し２）
3.1 2-1）色の調整（見出し３）
3.2 2-2）幅の調整（見出し３）
4 今回のポイント（見出し２）

これはちょっと数字がごちゃごちゃして見づらいです ^◇^)ゞ

ということで、先頭の数字を非表示にしてすっきりさせたい場合には、上で出てきたCSSに加えて、もう１段下に表示される「2.1」「2.2」や「3.2」「3.2」といった数字も非表示にする、ということで、以下のCSSを追加します。

span.toc_number.toc_depth_2 {
display: none;
}

span.toc_number.toc_depth_2 {

display: none;

}

こうすることで、先頭の自動でつく数字が全て非表示になり、スッキリとした見出しになりますね。

今回のまとめ

プラグイン「table of contents plus」を使うと、目次が自動的に付けられる
先頭の番号も自動で付けられて便利
先頭に自動でつけられる番号を非表示にしたい場合には、記事やページに個別にCSSを設定すればOK

目次は記事にどんなことが書いてあるのか一目で分かる、といった役割のほか、webページでは目次の中で見たいタイトルをクリックすればすぐその場所に飛べる！といった、とても便利な機能になります。

それでもここで解説しているように、見づらい目次となっては逆効果。

見づらい目次は本文に行くまでの障害物にもなりかねませんので、そうならないように工夫する必要がありますね。

目次の他にもデザインカスタマイズをすることで、より魅力的なブログやサイトになり、読者にとっても読みやすく引きつけられる記事にもなりますし、逆にそれを怠ることで、他のサイトに見劣りして読者離れとなる危険性も出てきます。

デザインカスタマイズは今後更に重要性を増しますが、更に収益化を含めて色々と知りたい、という場合には、是非以下のメルマガに登録してみてください。

早期退職して海外で奮闘する JIN のメールマガジン

無料メールマガジンの詳しい内容を見る！