つまづき体験記:目次プラグインを導入したら表示されない?

スポンサーリンク


以前からサイトに目次がほしいと思っていたので、Wordpressのプラグイン「Table of Contents Plus」を導入しました。簡単な設定で大変使いやすいプラグインなのですが、サイトのページを試しに閲覧したら目次が表示されていません。なぜこのような事態が発生したのでしょうか。

Table of Contents Plusをダウンロード、TOC+で設定

まず、Wordpress経由でTable of Contents Plusをダウンロード。ダッシュボードで設定、そして「TOC+」を選ぶと詳細設定画面に移ります。

表示条件で設定以上の見出しの数を置かないと目次は表示されない

私が最初、戸惑ってしまったのはプラグインを導入したにもかかわらず目次が表示されなかったことです。ただ、設定画面をよく見ると「表示条件」という項目があります。目次を表示させるための条件として、設定以上の見出しの数を置かなければならないという意味です。たまたま見出し数が少ないページを選んでしまったため、目次がないと勘違いしたのです。

目次が表示されない時は「表示条件」に注意

目次が表示されない時は「表示条件」に注意

表示条件で設定以上の見出しの数を置かないと目次は表示されない

表示場所の設定も注意してみよう

他にも注意したいのは「表示する場所」です。最初の見出しの前、後、トップだと比較的わかりやすいのですが、手違いでボトムを選ぶと、記事の最後に表示されてしまうのでパッと見るだけではわかりづらいです。

postはブログ記事、pageは固定ページ

また「次の投稿タイプのときに表示」のチェックのつけ忘れにも気をつけましょう。当サイトの場合、「post」「page」「contact_form」の3つのチェックボックスがあります。postは「ブログ記事の投稿」、pageは「固定ページ」、contact_formは「問い合わせフォーム」を意味しています。pageが投稿と勘違いをする可能性も十分ありますから、ブログページに目次を付けたい場合はpostにチェックを入れましょう。

postは「投稿」、pageは「固定ページ」を意味するので、チェックボックスをつける場所を間違えないようにしましょう

リストアイコンを独自設定していると、数字とアイコンがかぶる

また、番号なしリストのアイコンをFontAwesomeなどでカスタマイズ装飾している場合、見出しに振られている番号に対してアイコンがかぶってしまいます。私も独自のアイコンを設定していたため、見事に番号ががぶってしまいました。上級者向けの設定では「テーマのCSS」という項目があって、リストタグに背景が設定されている場合はチェックをつけると、数字よりも手前に装飾が表示されます。クラス分けをすれば表示は回避できそうなのですが面倒に感じたため、独自アイコンを設定していたCSSを解除しました。

スポンサーリンク

独自にリストアイコンを設定していると数字にかぶってしまう

独自にリストアイコンを設定していると数字にかぶってしまう

リストアイコンを独自に設定していると、目次の番号とかぶっておかしくなります

目次の中央置きはCSSクラス「toc_container」を指定してmarginを入れる

ちなみに、目次を取り入れた段階では、最初は左端に置かれます。できれば目次は中央に置いたほうがスマートでしょうが、TOC+の設定では横幅や「回り込み」の指定しかできません。そこで、CSSで中央置きができるように指定しましょう。

では、具体的にどのクラスにCSSを設定すればよいのでしょうか。サイトを右クリック(Macの場合はcontrol+クリック)して「ページのソースを表示」を選択します。サイトを構成しているhtmlコードが長々と表示されますが、目次を設定しているCSSクラス

目次につくクラス「toc_container」

目次につくクラス「toc_container」(青色に反転表示している部分)

テーマ以外に外観を設定しているstyle.cssを開いて、#toc_containerにおける左右のmarginをautoにすればよいのです。以下のコードを貼り付けましょう。


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

設定画面をよく見れば防げる初歩的ミス、気をつけましょう

Table of Contents Plusを導入しても、私と同じように目次が表示されなくて困っている方は、これらの3項目に注意してみると表示に成功するのではないでしょうか。Wordpressの場合、プラグインは何もしなくても稼働してくれるものもあるので、見出しの数が目次の表示に影響するとは考えていませんでした。設定画面をよく見れば理解できる初歩的なミスなので、みなさんも気をつけましょう。

スポンサーリンク


目次が表示されない時は「表示条件」に注意

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUTこの記事をかいた人

新聞社の記者をしています。仲間との起業を夢見て、これまでに学んできたノウハウを記しておきます。現在、主に結婚新聞や企業・団体向けの広報紙を制作していますが「こんな紙面をつくってほしい」とのご要望にも随時お応えしています。