WordPressに自動で目次をつけるプラグイン「Table Of Contents Plus」の使い方

サムネイル プラグイン

WordPress記事に自動で目次をつけてくれる便利なプラグイン「Table Of Contents Plus」 (通称TOC+)を紹介します

多くのWordPressユーザーが使っており、設定も簡単なので目次をつけたい人におすすめのプラグインです。このサイトでも使っています。

 

スポンサーリンク

TOC+をインストール

ダッシュボード→プラグイン→新規追加からTable Of Contents Plusをインストールして有効化しましょう。

画像1

プラグイン→Table Of Contents Plusの設定へと進んでください。2分で設定を終わらせます。

 

TOC+の設定

基本設定

オススメの設定をまとめました。面倒な人はこの通りに設定してください。詳しい説明はこの後します。

位置最初の見出しの前(デフォルト)
表示条件2つ以上見出しがあるとき
以下のコンテンツタイプを自動挿入post
page
custom_css
constomize_changeset
oembed_cache
user_request
wp_block
見出しテキスト目次の下にタイトルを表示
目次
ユーザーによる表示・非表示の切り替えを許可
階層表示
番号振り
スムーズスクロール効果を有効化
外観
横幅100%
回り込みなし
文字サイズ95%
プレゼンテーションお好みでどうぞ
上級者向け
小文字
ハイフン
ホームページを含める
CSSファイルを除外
テーマの見出し記号を保持
見出しレベルheading1-h1
heading2-h2
heading3-h3
heading4-h4
heading5-h5
heading6-h6
除外する見出し
スムーズ・スクロール上部余白後述
パス限定
アンカーのデフォルト接頭辞i

それぞれを詳しく見ていきます。

といってもよくわからない設定も多いので、必要なところだけ取り上げて見てください。

 

位置

目次を表示する位置です。

ほとんどのサイトで「最初の見出しの前」になっています。

 

表示条件

記事中の見出しの個数によって目次を表示させないようにすることができます。

「2つ以上見出しがあるとき」と設定すると、記事に見出しが1つしかないときは目次が表示されなくなります。

 

以下のコンテンツタイプを自動挿入

それぞれの項目の意味は以下の通りです。

post投稿記事
page固定ページ

他はよくわからないのでチェックは外しておいていいでしょう。

 

見出しテキスト

目次の上にタイトルを表示するか選べます。

チェックを入れた場合、目次の名前を変更できます。好きな名前に変更しましょう。個人的には「目次」が無難でいいと思います。

また、ユーザーの操作で目次の表示・非表示を切り替え可能にするかを選択できます。

画像2

 

階層表示

見出しの種類によって階層を表示するかを選択できます。

階層表示があると大見出し、中見出し、小見出しが直感的にわかりやすくなります。

自分の好きな方を選びましょう。

画像3

 

番号振り

それぞれの見出しの前に番号を振るかどうかを決めます。

番号を振るのがおすすめ。

 

スムーズ・スクロール効果を有効化

スムーズスクロールとは、目的の見出しまでページがスルスルと移動するアレです。

チェックを入れない場合はページがパッと変わって移動します。

 

外観

横幅

目次の横幅をpxで指定できる他、自動にすると見出しの文字の長さで横幅が変わります。

最大幅で表示したい場合は100%を指定しましょう。

 

回り込み

目次を右や左に寄せて表示できます。

いらない機能なのでなしでいいでしょう。

 

文字サイズ

目次内の見出しの文字サイズを指定できます。

デフォルトのままで大丈夫です。

 

プレゼンテーション

目次の見た目を変更できます。気に入ったのを選びましょう。

CSSが書ける人は自分で見た目を編集することも可能です。

 

上級者向け

ちゃんとやらないといけないのは「見出しレベル」くらいで、他はよくわからない謎の設定が多いのでサッと流す程度にやります。

 

小文字、ハイフン、ホームページを含める

いずれもチェックはつけなくていいです。

 

CSSファイルを除外

TOC+にデフォルトで適用されているCSSスタイルを外すことができます。

自分でCSSによるデザインをしたい場合は外すといいでしょう。

 

テーマの見出し記号を保持

<li>タグのbackgroundプロパティに適用したスタイルと同じスタイルを目次にも適用します。

はい、いらない機能です。チェックは外しておきましょう。

 

見出しレベル

チェックを入れた見出しが目次に表示されます。

h1はチェックを外して構いません。h2にはチェックを入れ、他は自分の好きな加減でチェックを入れましょう。

このサイトではh2〜h4までにチェックを入れています。

 

除外する見出し

入力した文字を含む見出しは目次に表示されなくなります。

言うまでもなくいらない機能です。

 

スムーズ・スクロール上部余白

「スムーズスクロールを有効化」にチェックを入れると現れます。

これは少し難しいのですが、スティッキーヘッダー (ずっと上から付いてくるヘッダー)を使っているサイトは設定した方がいいです。使っていないサイトは無視で構いません。

目次からその見出しに飛んできたときに、スティッキーヘッダーと見出しが被らないために飛んでくる位置をずらす設定です。

数値はヘッダーのpadding-topと同じ値を入力するとうまくできると思います。

よくわからない場合はデフォルトのままでも構いません。

 

パス限定、アンカーのデフォルト接頭辞

これらも特にいじらなくて大丈夫です。

 

最後に設定を更新ボタンを押して保存しましょう!

 

TOC+の使い方

使い方と言っても設定が終わったら自動で見出しをつけてくれるので、使い方は特にありません。

なので、便利なショートコードを紹介します。

 

手動で設置/撤去する

「いつもの場所じゃなくて今回はここに目次を設置したい!」という場合は以下のショートコードを記事編集画面で入力します。ビジュアルモードでもテキストモードでもどちらでも構いません。

[toc]

 

逆に「今回の記事は目次を非表示にしたい!」という場合は以下のように入力します。

[no_toc]

これらのショートコードで目次の表示/非表示を簡単に操作することができます。

まとめ

目次はその記事を読んでくれる人の利便性に直結したり、SEO効果も多少なりともあると言われています。

TOC+は設定さえしておけば勝手に目次をつけてくれるのでとても便利なプラグインです。

まだ目次をつけていないという人はインストールしておくとすごく便利です。