記事の目次を表示するTable of Contents Plusの使い方と設定方法

このブログでは、↓このように記事の目次を表示しています。

この目次の表示には、Table of Contents Plusというプラグインを使っています。
今回はTable of Contents Plusの基本的な使い方と設定方法を説明します。

スポンサーリンク

Table of Contents Plusとは

Table of Contents Plusは、ブログ記事の目次を表示するプラグインです。

プラグインを導入するだけで目次を利用することはできますが、自分で設定をすると、好きな見出し階層(H2、H3など)のみの目次を表示したり、目次のデザインを変更することもできます。

プラグインの導入方法

WordPress管理画面左側のメニューから[プラグイン]→[新規追加]をクリックします。

[プラグインを追加]画面が表示されるので、右上の[プラグインの検索]にTable of Contents Plusと入力します。

Table of Contents Plusが表示されたら、[今すぐインストール]をクリックしてプラグインのインストールをします。

この画像では既にインストール済みのため、[有効]と表示されています。

インストールが済んだら有効化してください。

使い方

目次が自動挿入になっている場合は、指定の場所に自動で挿入されます(何も設定していなければ自動になっています)。
ここでは手動で挿入する場合の使い方を説明します。

自動挿入をやめる方法は後述しています。以下のコンテンツタイプを自動挿入の項目を確認して下さい。

任意の位置に目次を挿入する方法

記事の投稿画面で、任意の位置にショートコード[ toc ]を入力します。(コピペする場合はtocの両側のスペースを削除してください。)

これで、基本の目次が表示されます。
▼今回の記事の見出し

H2(見出し2)のみ表示する

ショートコードに要素を追加することで、目次を変更することができます。

[ toc heading_levels=2 ]

目次のタイトルを変更する

[ toc label=”もくじ” ]

基本設定

WordPress管理画面左側の[設定]ー[TOC+]をクリックします。

Table of Contents Plusの設定画面が表示されます。

1つずつ説明していきます。

位置

目次を表示する位置を設定します。

この設定は、Table of Contents Plusの目次を自動で表示する場合のみ、有効です。

表示条件

見出しがいくつ以上あるときに目次を表示するかを設定します。

例えば、3に設定したとき、見出しが2つ以下しかない記事には目次は表示されません。

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

ここでチェックを入れたコンテンツタイプでは、自動で目次が表示されます。

例えば、「post」にチェックを入れると、記事ページでは自動で目次が表示されます。
その際には、「位置」で選択した位置に表示されます。

僕は手動でショートコードを使って挿入しているため、チェックを外しています。

見出しテキスト

目次タイトルを表示するか、表紙する場合は表示名を設定します。

「ユーザーによる目次の表示・非表示を切り替えを許可」にチェックを入れると、ユーザー(読者)が目次の表示・非表示を切り替えられるようになります。

「最初は目次を非表示」にチェックを入れると、記事の読み込み時は目次が非表示になります(読者が自分で表示させることができます)。

階層表示、番号振り、スムーズ・スクロール効果を有効化

「階層表示」にチェックを入れると、H2、H3などの階層に合わせて目次がインデントされます。

チェックを外すと階層表示がされなくなります。

「番号振り」にチェックを入れると、目次に自動で番号が振られます。

横幅

「横幅」では目次の横幅を設定します。

▼自動(デフォルト)

▼100%

プレゼンテーション

目次の見た目を設定します。

「カスタム」を選択すると、色を自分で設定することができます。

上級者向け設定

上級者向け設定は色々ありますが、使いそうなものを説明します。

CSSファイルを除外

「CSSファイルを除外」にチェックを入れると、Table of ContentsのCSSを読み込まない設定になります。

自分でスタイル指定をする場合などに使います。

▼チェックを入れた場合。何も装飾しないと番号なしリストの表示になります。

見出しレベル

ここで設定したレベルの見出しのみ表示されます。
ショートコードを利用して見出しを挿入する場合、ショートコードで個別に指定することもできます。

▼H2、H3

▼H2のみ

さいごに

Table of Contents Plusはとても便利なプラグインで、多くのブログで利用されています。
カスタマイズもしやすくて良いと思います。

Comments

タイトルとURLをコピーしました