シェアする

記事内に目次を入れる方法「Table of Contents Plus」

シェアする

thumb042
記事内に目次を入れる方法「Table of Contents Plus」
や、やっと目次が作れました…

前回、自動目次生成プラグイン「Table of Contents Plus」をインストールしてみましたが、中々目次が表示されなくて予想をはるかに超えて苦戦しておりました…こんな単純なミス…

ですが問題も解決しまして、いまはこのとおり目次のあるページを作れるようになりました。
その記事内で一番上にあるh2タブの真上に目次が表示するよう設定しています。

スポンサーリンク

設定画面

とりあえずインストールした「Table of Contents Plus」の設定画面を見ていきましょう。
設定画面は「設定」→「TOC+」です。
記事内に目次を入れる方法「Table of Contents Plus」01

「Table of Contents Plus」に限らず、ほとんど(全て?)プラグインの設定画面は英語表記です。がんばってまいりましょう。
記事内に目次を入れる方法「Table of Contents Plus」02

設定画面英語解説

Position

目次の場所(ポジション)を4箇所から選びます。

◎「Before first heading (default)」
最初の見出し(hタグ)を入れた行の真上に目次を持ってきます。

◎「After first heading」
「Before first heading (default)」の逆で、最初の見出し(hタグ)を入れた行の真下に目次を持ってきます。
このページもこの「After first heading」で設定してます。

◎「Top」
文章の一番上に目次を表示させます。タイトルの真下ですね。

◎「Bottom」
文章の末尾に目次を表示します。

Show when

目次が生成される見出し(hタグ)の最小数です。
「Table of Contents Plus」はhタグの付いた文を目次の項目と判断しているので、ページ内のhタグの数でそのページに目次を生成するかどうか決めることができます。

Auto insert for the following content types

「Table of Contents Plus」を適用する記事のタイプを設定します。
post(投稿ページ)
page(固定ページ)
日々投稿していく記事に目次をつけたい場合は「post」にチェックを入れておきましょう。

Heading text

◎「Show title on top of the table of contents」
表示する目次のタイトルを設定します。
また、ここのチェックを外すとタイトル文字が非表示になり、見出しだけの目次になります。

◎「Allow the user to toggle the visibility of the table of contents」
目次をクリックで表示・非表示させる設定です。

◎「Show text」
目次を表示させるボタンと、その文章。

◎「Hide text」
目次を非表示にするボタンと、その文章。

◎「Hide the table of contents initially 」
目次の最初の状態を設定します。
チェックを外すと最初に目次を非表示の状態にします。

Show hierarchy

目次に断層をつけるかどうかの設定です。
ここにチェックをいれると、このページの目次のようにh2より後ろに下がってh3の見出しが表示されるようになります。

Number list items

目次に順番を振るかどうかの設定です。
見出しに番号を入れなくても自動的に番号を振ってくれる機能ですね。

Enable smooth scroll effect

目次に並んだ項目をクリックした際に、スムーズなスクロールをさせるかどうかの設定です。
別ページに飛んだのではなく同ページで移動してますよーと感じてもらう意味ではつけておきたい機能ですね。

Width

目次の幅を決めるところです。

Wrapping

目次を右寄せ・左寄せ、もしくは自動で真ん中(None)にするかの設定です。

Font size

文字サイズ設定。

Presentation

目次のデザイン。

となっています。

Advancedでは

「Heading levels」をチェック。
記事内に目次を入れる方法「Table of Contents Plus」03

「Table of Contents Plus」は記事内のhタグを拾って目次を作っています。

「Heading levels」では拾って欲しくないhタグのチェックを外したりする設定箇所です。

このことから分かるとおり、目次を入れる肝心の記事でhタグを利用していない場合、目次が表示されませんのでご注意下さい。

設定が終わったら

画面の最下部の「Update Option」をクリックして忘れず更新します。

設定画面はほぼデフォルトでもOKでした。

単純なミスの解説

hタグの“h”を“H”と記入してたら「Table of Contents Plus」が反応してくれないというオチでした。
“H”でも文字の太さは変化するので、まったくノーマークでした…

こういうことが他のプラグインでも起こらないと限らないので、hタグは半角英数で記入した方が良いみたいですね。

スポンサーリンク

シェアする

コメントをどうぞ

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)