記事内に目次を自動で追加してくれるプラグイン【Table of Contents Plus】

記事を書いていると区切りがわからなくなってダラダラしてしまう人は多いと思います。

僕は、そうならないために小見出しをたくさん入れるようにしているのですが、後から見直してみると意味なく小見出しを付けている時があります。

しかし、今回紹介する【Table of Contents Plus】を使えば、記事の中に小見出しを自動で目次にしてくれるため、後から見たときに小見出しがおかしい場合すぐに気が付いて修正することができます。

また、読み手に取っても目次があることで記事の内容が理解しやすくなります。

使用イメージ

Table of Contents Plus イメージ

このように小見出し(h1~h6)に使用したキーワードが自動で目次として表示されます。

表示位置は編集することができます。

基本設定

下記は設定画面です。

TOC 設定

Advancedをクリックするとさらに詳細を設定することができます。

TOC 詳細設定

Position

Before first heading : 一番初めの小見出しの前に目次が表示されます。

After first heading : 一番最後の小見出しの後に目次が表示されます。

Top : 記事の一番最初に表示されます。

Bottom : 記事の一番最後に表示されます。

Show when

小見出しが1つの記事なら目次を出す必要は無いように、小見出しが少ない場合は目次を表示させないように設定できます。

ここを『4』に設定すれば、小見出しが3つまでは表示されません。

Auto insert for the following content types

どのページに目次を表示させるかを選択できます。

post : 投稿記事

page : 固定ページ

Heading text

目次の前に表示する文字を編集できます。素直に『目次』と入力してください。

Show hierarchy

目次を段落で表示させるかどうかを選択できます。

Number list items

項目に番号をふるかどうがを選択できます。

Enable smooth scroll effect

目次の項目をクリックしたときに、スクロールするか、一瞬で飛ぶかを選択できます。

チェックを入れておけば、スムーズに移動するようになります。

Appearance

目次のビジュアルを編集できます。

Width

目次の横幅を編集できます。

Wrapping

項目を左寄せ・右寄せにすることができます。

Font size

文字の大きさを編集できます。

Presentation

デザインの色などを選択できます。

以上が基本設定です。

詳細設定

ちなみに詳細設定では一つだけ紹介します。

Heading levels

小見出しのレベルどこまで目次にするかを選択できます。

僕の場合は、H5はまとめ用のデザインにしているので、目次に表示させないようにしています。

1 個のコメント

  • すごいですね!!

    こんな細かなことを勉強していかないといけないんですね~@@

    とても参考になりました!

  • コメントを残す

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

    ABOUTこの記事をかいた人

    タロウ

    1990年3月9日神戸生まれ。 webが好きです、でもラーメンはもっと好きです。SEOには自信があります。最近太ってきたせいで着る服がありませんが、太ってきたのであったかいです。 Twitter(@syuty)・Facebookから友達申請よろ!