記事の目次を自動で作るプラグインTable of Contents Plusの使い方

Table of Contents Plusは、記事に自動で目次を作ってくれる便利なプラグインです。
目次があるとユーザーにとっても記事が見やすくなります。ブログの見た目もよくなり、
SEO(検索エンジン対策)にも効果があるので一石三鳥ですね。 

Table of Contents Plusは、h1~h6の見出しを引用して目次を作成します。
ですから、記事を作るときは見出しを適切につけていく必要があります。

Table of Contents Plusのインストールと有効化

まずはTable of Contents Plusをインストール、有効化してください。

プラグインのインストール・有効化はこちらを参考にしてください。

 

Table of Contents Plusの簡単設定

WordPress管理画面>設定>TOC+をクリックします。

Table of Contents Plus 目次自動作成 設定

 

この記事の上にあるような目次であれば赤い字の箇所だけを設定だけすれば
記事ごとにいちいち設定しなくても自動で作成してくれます。

Main Option

Table of Contents Plus 目次自動作成 設定

Position

ページ内の目次の位置を設定します。ここは変更しません。

  • Before first heading(default)
    記事の最初の見出しのすぐ上です。
  • After first heading
    記事の最初の見出しのすぐ下です。
  • Top
    記事ページの一番上です。
  • Bottom
    記事ページの一番下です。

 

Show when

目次を作る場合の条件を設定します。
見出しが4つ以上あれば目次を表示するようになっています。

 

Auto insert for the following content types

目次を設置する投稿タイプ〔post(投稿)・page(固定ページ)〕を設定します。
「post(投稿)」のみにチェックします。
※Contact Form 7などのプラグインを導入していると選択肢として表示されます。

 

Table of Contents Plus 目次自動作成 設定

Heading text

□Show title on top of the table of contents
目次そのものにタイトルをつける場合はチェックしたままにします。
下の入力欄の「Contents」はタイトル名ですので、「目次」などに変更します。

□Allow the user to toggle the visibility of the table of contents
ユーザーが目次を表示したり非表示にしたりできるようにする場合はチェックします。
「show text」の「show」は「表示」、「Hide text」の「hide」は「非表示」に変更します。
表示される文字を日本語にするだけです。

□Hide the table of contents initially
チェックを入れると、記事ページを開いた時、目次が非表示になります。
「表示」をクリックしないと目次が表示されません。
こんな感じです↓

Table of Contents Plus 目次非表示

 

 

 

Show hierarchy

目次に階層をつけるかどうかです。

<階層あり>

Table of Contents Plus 目次 階層あり

<階層なし>

Table of Contents Plus 目次 階層なし

 

Number list items

目次に番号をつける場合はチェックしておきます。

 

Enable smooth scroll effect

目次をクリックしたときに該当箇所までジャンプするかスクロールするかです。

□Scroll rather than jump to the anchor link
スクロールさせたい場合はチェックします。

 

Apprearance

Table of Contents Plus 目次自動作成 設定

Width

目次を囲っている枠の幅を設定します。px(ピクセル)か%で設定できますが
「Auto(default)」(自動)のままでいいでしょう。

 

Wrapping

表示位置を右にするか左にするかです。デフォルト(初期設定)のままでも通常は左になります。

 

Font size

文字の大きさを設定します。

 

Presentation

目次のデザインを選べます。
Customをチェックすると自分で作成できます。

 

Advanced (show)

「show」をクリックすると、Advancedの設定画面が開きます。
ここは設定の必要な個所だけ説明します。

Table of Contents Plus 目次自動作成 設定 

Heading levels

目次にどこまでの階層を表示させるかを設定します。

賢威を使用している場合、記事タイトルがh2で、記事中の見出しはh3~6になります。
2階層までならh3とh4に、3階層までならh3~h5にチェックがあればいいので、
他はチェックをはずします。

 

Exclude headings

指定した文字が含まれる見出しを目次から除外します。

このサイトの場合、ページの下の方に「関連記事」を表示しています。
「こちらの記事も参考になります」という箇所ですが、ここがh3になっていますので、
初期設定のままですと目次に含まれてしまいます。

そこで入力欄に「こちらの記事も参考になります」と入力しておけば
目次から除外されます。

 

目次の位置を微調整する

このサイトでは、ページ内での目次の位置は、記事の最初の見出しの
すぐ上に設定しています。

初期設定のままですと、見出しに近すぎるので少し離すように設定しなおしました。
その方法を紹介します。

<before>

Table of Contents Plus 目次 余白

<after>

Table of Contents Plus 目次 余白

 

WordPress管理画面>プラグイン>プラグイン編集をクリックします。

Table of Contents Plus 目次 位置調整

 

「編集するプラグインを選択する」から「Table of Contents Plus」を選び「選択」ボタンを押します。

Table of Contents Plus 目次 位置調整

 

画面右の「able-of-contents-plus/screen.css」をクリックします。

Table of Contents Plus 目次 位置調整

 

「margin-bottom:1em」の箇所の1emを好きな幅に変更します。
このサイトは3emに変更しています。

Table of Contents Plus 目次 位置調整

 

「ファイルを更新する」をクリックして設定完了です。

 

特定の記事だけ目次を表示しない

例えば見出しを使って〇〇ベスト10などのランキング記事を作った場合、
1位〇〇などのランクが目次になるとおかしいですよね。

他にもこれと似たケースが出てくるかもしれません。

こんな風に見出しをたくさん使ったけど、目次がない方がいいというときに、
その記事だけ目次を表示しない方法を紹介します。

やり方は簡単です。

投稿の編集」画面のテキストのどこでもいいのでを記述するだけです。
※[  ](カッコ)も必ずつけてください。

Table of Contents Plus 目次 表示しない

 

こちらの記事も参考になります

コメントを残す

サブコンテンツ

このページの先頭へ