table-of-contents-plus-img

WordPressプラグインでページ内の目次を自動で作る「Table of Contents Plus」

Table of Contents Plusイメージブログページ内の目次を自動作成してくれるWordPressプラグイン「Table of Contents Plus」をご紹介します。

右画像のようなページ内の目次を自動で作成してくれます。目次を挿入する位置も自動で判別してくれますので、手間いらずで、過去のブログにも適用されますので、とても良いですね。

Table of Contents Plus プラグインのインストール

プラグインをダウンロードしてインストールする方法

  1. WordPressの「Table of Contents Plus」プラグインページからZIPファイルをダウンロードします。
  2. ダウンロードしたZIPファイルを解凍します。
  3. 「table-of-contents-plus」フォルダーをプラグインディレクトリ “/wp-content/plugins/” にアップロードします。
  4. WordPress管理メニュー「プラグイン」で「Table of Contents Plus」を有効化します。

プラグイン画面からインストールする方法

  1. WordPressの管理メニュー「プラグイン > 新規追加」から「Table of Contents Plus」で検索します。
  2. 「Table of Contents Plus」を今すぐインストールして有効化します。

Table of Contents Plus プラグインの設定方法

プラグインの日本語化

英語が苦手な方は、「Table of Contents Plus」の日本語化をしましょう。

  1. 「Table of Contents Plus」の日本語化ファイルのダウンロードをします。
  2. すると、「toc+-ja.mo」ファイルがダウンロードされます
  3. サーバーの「~/wp-content/plugins/table-of-contents-plus/languages/」ディレクトリにファイルをアップロードしましょう。
  4. WordPress管理メニューの「設定 > TOC+」を表示すると日本語化されています。
Table of Contents Plusプラグインの管理画面の日本語化
Table of Contents Plusプラグインの管理画面の日本語化

プラグインの一般設定方法

Table of Contents Plusプラグインの設定
Table of Contents Plusプラグインの設定

日本語化したので説明なしで良さそうですが、補足程度に説明しておきます。
上記画像は、このブログの設定値です。

  • 表示位置
    「最初の見出し要素の前」は、記事中に最初に出てきた「Hx」タグの直前に目次を表示。これがデフォルトだし自然な位置ではないでしょうか。
  • 表示の振り分け
    ページ中に「Hx」タグが何個以上あったときに目次を表示するかを設定。
  • コンテンツの種類での自動挿入
    post 投稿のページで目次を表示する。
    page 固定ページのページで目次を表示する。
  • 目次の見出し文
    そのままの意味です。
  • 階層を表示する
    ここは必須でチェックを入れた方が良さそうです。
  • リスト項目に番号を振る
    番号を自動で振ってくれます。「1」「2」「2.1」「2.2」「3」・・・こんな感じです。
  • スムーズスクロール効果の有効化
    そのままの意味です。

プラグインの外観設定方法

  • 横幅
    「自動幅」か「相対100%」が良いようです。このブログは「自動幅」設定にしています。
  • ラッピング
    目次を左寄せ、右寄せにするかの設定。
  • フォントサイズ
    フォントサイズを「pt」「%」「em」で設定。
  • 背景色
    背景色を複数から選べます。カスタム設定も有り。

プラグインのカスタマイズ

Table of Contents Plusイメージ

リスト項目に番号振りたいのですが、上画像のようになります。リスト番号にもリンクが張られて、ぶら下げインデントもされない。
これでは少し不格好なので、CSSを追加してみました。

テーマのCSSを追加しますので、修正は自己責任でお願いいたします。

table-of-contents-plus-image2

screen.css を修正する手順

  1. CSSを修正する前に「~/wp-content/plugins/table-of-contents-plus/screen.css」のコピーと取っておきましょう。
  2. 「~/wp-content/plugins/table-of-contents-plus/screen.css」の最後に下記コードを追加します。
  3. Table of Contents Plusプラグインの設定で、「リスト項目に番号を張る」のチェックを外します。
  4. このCSSは3階層までしか対応していませんので、Table of Contents Plusプラグインの設定で、「詳細設定 > 適用する見出しレベル」で3階層までチェックを入れてください。

screen.css のCSS追加コード

#toc_container ul.toc_list { 
	margin-left:5px;
	counter-reset:section; 
}
#toc_container ul.toc_list li {
	text-indent: -1.2em;
	margin-left:1.2em;
	padding-top: 0.3em;
}
#toc_container ul.toc_list li ul { 
	counter-reset:subsection; 
}
#toc_container ul.toc_list li ul li { 
	text-indent: -1.8em;
	margin-left:1em;
}
#toc_container ul.toc_list li ul li ul { 
	counter-reset:sub2section; 
}
#toc_container ul.toc_list li ul li ul li { 
	text-indent: -2.5em;
	margin-left:1em;
}
#toc_container ul.toc_list li:before{
    counter-increment:section;
    content:counter(section) ". ";
}
#toc_container ul.toc_list li ul li:before {
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}
#toc_container ul.toc_list li ul li ul li:before {
    counter-increment:sub2section;
    content:counter(section) "." counter(subsection) "." counter(sub2section) "  ";
}

これで、リスト番号にもリンクが張られなくなり、ぶら下げインデントされています。


「WordPressプラグインでページ内の目次を自動で作る「Table of Contents Plus」」への2件のフィードバック

コメントを残す