見出し(Hタグ)で目次を自動生成するWordPressプラグインTable of Contents Plusの使い方

今回は、記事の見出しのタグから目次を自動生成してくれるWordPressのプラグイン「Table of Contents Plus」のインストール方法と使い方を紹介します。

ブログの記事が長い場合などは、記事の冒頭に目次を設置することで、読者が記事を読み進めやすくなります。

Table of Contents Plusプラグインを使うことによって、記事の目次を自動的に生成してくれるので、すごく簡単に記事を設置することができます。

ぜひご参考ください。

Table of Contents Plusのインストール

WordPressのダッシュボードの「プラグイン」→「新規追加」をクリックします。

プラグインの検索ボックスに「Table of Contents Plus」と入力して検索すると、キーワードに合致したり類似するプラグインが全て表示されます。

その中で上記画像のプラグインの「今すぐインストール」ボタンをクリックします。

インストールが終わると、ボタンが「有効化」に変わるので、青くなったボタンをクリックします。

WordPressプラグインの詳しいインストール方法については、「WordPressプラグインについての基礎とインストール方法」を参照してください。

Table of Contents Plusの設定方法

基本設定

Table of Contents Plusを設定する為に、まずはダッシュボードの[設定]から[TOC+]を選択して設定画面へ行くと以下のような画面になります。

また、プラグインメニューからも設定画面を開くことができます。

基本設定画面が開くと、詳細な設定項目が表示されます。
この画面で設定することで、自動生成される目次の内容を変更することができます。

①位置

ページ内に表示する目次の場所を選択することができます。

最初の見出しの前
最初の見出しの後
上
下

②表示条件

見出し（Hタグ）が一定以上の数だった場合のみに目次を設定することができます。

２～１０の数値を設定することができます。

（見出しが１つ以下の場合は設定できません）

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

作成したコンテンツ（ページや投稿など）の種類を指定します。

post

→通常のブログや記事を投稿するコンテンツ

page

→固定ページのコンテンツ

custom_css

→カスタムCSS

customize_changeset

→カスタマイズチェンジセット

wpcf7_contact_form

→お問合わせ用フォーム（contactform7で作成したコンテンツ）

④見出しテキスト

目次に表示される見出しテキストの編集ができます。

また、表示・非表示を制御するテキストリンクの文言も変更することができます。

⑤階層表示

目次の階層を表示するかを設定します。目次は階層を表示させた方が見やすくなるので、チェックを入れておいた方が良いです。

⑥番号振り

目次に自動的に番号を表示させることができます。

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

Table of Contents Plusで作られた目次をクリックすると、ページ内をゆっくりと移動する「スムーススクロール」をして見出しの位置まで移動させることができます。

チェックを外すとゆっくり移動するスムーススクロールではなく、見出しの位置へ一瞬でジャンプする移動となります。

どちらにするかは好みですが「スクロール形式」であれば、目次からどの程度移動して見出しに到着したかがわかりやすいため、私は「スクロール形式」（チェックをつける）がおすすめです。

⑧横幅

目次の横幅を調整することができます。

任意のサイズを選択しましょう。

⑨回り込み

目次の位置を右側もしくは左側に回り込ますことができます。

⑩文字サイズ

文字サイズを任意の大きさに調整することができます。

⑪プレゼンテーション

目次のデザインを選択します。好みですが、デフォルトのままが良いです。

上級者設定

基本的に上級者設定の設定項目としては、デフォルトのままでOKです。

上級者向け設定で変更が必要な項目は、見出しレベルの変更だけです。

おすすめの設定は「h2とh3」の表示設定です。h4まで表示すると目次が大きくなりすぎるため、あまりおすすめできません。

任意の記事のみに目次を入れる方法

通常は目次を自動生成しない設定にしておき、任意の記事のみに表示させたい場合は、下記の手順で行うことができます。

１．基本設定の「以下のコンテンツタイプを自動挿入」から全てのチェックを外す

２．目次を挿入したい記事の中に[ toc ]タグを記述する

目次のデザイン変更

デフォルトの目次のデザインでもいいのですが、サイトの雰囲気に合わせたかったり、もうちょっとおしゃれに目次を表示したい！！という場合は、CSSをいじります。

目次のデザイン変更のための事前準備

①管理画面から「設定→TOC+」を選択します

②TOC＋設定画面の「上級者向け」をクリックして、上級者向け設定を表示します。

③「CSSファイルを除外」にチェックを入れて、設定を保存します。

CSSファイルの変更

①管理画面から「外観→テーマの編集」を選択します．

②「style.css」をクリックすると、CSSの編集画面が表示されるので、一番最後の行に以下のコードを貼り付けます．

/*目次デザインの変更設定*/
/* TOC 目次 */
#toc_container{
 margin-top:25px; /* 目次の上のスペースの幅*/
 margin-bottom:35px; /* 目次の下のスペースの幅*/
 border-radius: 0px; /*角を丸める場合は設定*/
 font-size: 16px; /*目次内の文字の大きさ*/
 padding-right: 20px; /*右端から20pxはなす */
 padding-left: 20px; /*左端から20pxはなす */
 background-color: #f5f5f5; /*目次ボックスの背景色*/
 border: 8px solid #b4b4b4; /*ボックスの外枠の設定*/
}
 
#toc_container .toc_title{
 font-size: 18px; /*目次タイトルの文字の大きさ*/
 color: #4A4A4A; /*目次タイトルの文字の色*/
 text-align: center;  /*目次タイトルを中央に配置*/
}
 
/*目次タイトルの前のファイルみたいな記号を入れる設定*/
#toc_container .toc_title:before{
 content: "\f0f6";
 font-family: FontAwesome;
 padding-right: 6px;
 color: #8A8A8A;
}
 
#toc_container .toc_toggle a{
 color: #7A7A7A; /*目次タイトルの横の閉じるマークの色*/
}
 
#toc_container ul{
 counter-reset:number; /*目次番号が増えるよう設定*/
 list-style:none; /*目次番号以外の記号は表示させない*/
}
 
#toc_container ul li{
 line-height: 1.25em; /*項目の高さ*/
 margin-bottom: 0.5em; /*項目間の幅*/
 margin-left:16px; /*目次の各項目の始まりを左端から離す*/
}
 
#toc_container ul li:before{
 counter-increment: number; /*項目の始めの数字をつける*/
 content: counter(number);
 font-weight: bold;
 color: #069;
 padding-right:12px; /*数字と目次項目の幅を広げたいときはここを調整*/
 margin-left:-20px;
}
 
#toc_container ul li a{
 font-weight: bold; /*目次項目の文字を太字に*/
 color: #069; /*目次項目の文字の色*/
}
 
#toc_container ul ul{
 margin-top: 0.5em; /*2レベル目の項目の上スペース幅の設定*/
}
 
#toc_container ul ul li{
 line-height: 1.25em; /*2レベル目の項目の高さ*/
 margin-bottom: 0.5em; /*2レベル目の項目の下の幅*/
}
#toc_container ul ul li:before{
 content: "\f0da"; /*三角マークを入れる*/
 font-family: FontAwesome;
 padding-right: 6px;
 margin-left:0px;
 color: #CCC;
 margin-left:-65px; /*2レベル目を左からどこに配置するのか*/
}
 
#toc_container ul ul li a{
 color: #3D3D3D; /*2レベル目の項目の文字色*/
 font-weight: normal; /*2レベル目の項目の文字は太字にしない*/
 padding-right:6px; /*2レベル目の項目を右端から離す*/
}

/*目次デザインの変更設定*/

/* TOC 目次 */

#toc_container{

margin-top:25px; /* 目次の上のスペースの幅*/

margin-bottom:35px; /* 目次の下のスペースの幅*/

border-radius: 0px; /*角を丸める場合は設定*/

font-size: 16px; /*目次内の文字の大きさ*/

padding-right: 20px; /*右端から20pxはなす */

padding-left: 20px; /*左端から20pxはなす */

background-color: #f5f5f5; /*目次ボックスの背景色*/

border: 8px solid #b4b4b4; /*ボックスの外枠の設定*/

}

#toc_container .toc_title{

font-size: 18px; /*目次タイトルの文字の大きさ*/

color: #4A4A4A; /*目次タイトルの文字の色*/

text-align: center; /*目次タイトルを中央に配置*/

}

/*目次タイトルの前のファイルみたいな記号を入れる設定*/

#toc_container .toc_title:before{

content: "\f0f6";

font-family: FontAwesome;

padding-right: 6px;

color: #8A8A8A;

}

#toc_container .toc_toggle a{

color: #7A7A7A; /*目次タイトルの横の閉じるマークの色*/

}

#toc_container ul{

counter-reset:number; /*目次番号が増えるよう設定*/

list-style:none; /*目次番号以外の記号は表示させない*/

}

#toc_container ul li{

line-height: 1.25em; /*項目の高さ*/

margin-bottom: 0.5em; /*項目間の幅*/

margin-left:16px; /*目次の各項目の始まりを左端から離す*/

}

#toc_container ul li:before{

counter-increment: number; /*項目の始めの数字をつける*/

content: counter(number);

font-weight: bold;

color: #069;

padding-right:12px; /*数字と目次項目の幅を広げたいときはここを調整*/

margin-left:-20px;

}

#toc_container ul li a{

font-weight: bold; /*目次項目の文字を太字に*/

color: #069; /*目次項目の文字の色*/

}

#toc_container ul ul{

margin-top: 0.5em; /*2レベル目の項目の上スペース幅の設定*/

}

#toc_container ul ul li{

line-height: 1.25em; /*2レベル目の項目の高さ*/

margin-bottom: 0.5em; /*2レベル目の項目の下の幅*/

}

#toc_container ul ul li:before{

content: "\f0da"; /*三角マークを入れる*/

font-family: FontAwesome;

padding-right: 6px;

margin-left:0px;

color: #CCC;

margin-left:-65px; /*2レベル目を左からどこに配置するのか*/

}

#toc_container ul ul li a{

color: #3D3D3D; /*2レベル目の項目の文字色*/

font-weight: normal; /*2レベル目の項目の文字は太字にしない*/

padding-right:6px; /*2レベル目の項目を右端から離す*/

}

まとめ

WordPressのプラグイン「Table of Contents Plus」を使うことで、各記事への目次が自動的に生成でき、サイトを見る側にとってもすごく見やすくなります。

特に、記事が長くなってしまうようなコンテンツが多い場合や、ノウハウ系のブログにはオススメのプラグインです。

ITワークdeスローライフ

Main Menu