「Table of Contents Plus」記事の目次を自動表示するWordPressプラグインの設定方法と使い方

※当ブログではサービス・商品のリンク先にプロモーションを含みます。

WordPress

「Table of Contents Plus」記事の目次を自動表示するWordPressプラグインの設定方法と使い方

「Table of Contents Plus」記事の目次を自動表示するWordPressプラグインの設定方法と使い方 

◆ブログ記事の「目次」を自動で作成して表示するWordPressプラグイン、「Table of Contents Plus」の設定方法と使い方、について詳しく解説をしていきます。

プラグインの概要は、記事の最初に「目次」を簡単に自動で表示してくれるプラグインです。

この、「Table of Contents Plus」は、ブログを運営する管理者にとっても、非常に簡単で使いやすく便利ですし、購読者側の人にとっても、記事(ページ)の内容を事前に把握する事が出来ますので、ユーザーの気持ちを第一に考えられている上に、WordPressプログを導入している人にとっては、WordPressを効率良く活用する為にも、オススメの必須のプラグイン、と言えるかもしれません。

しかも、Google や、Yahoo 等の検索エンジンから、目次」がある事によって、記事の信頼性や評価も高まり、サイト自体のSEO的な効果への期待も、非常に大きく高まります

スポンサーリンク

「Table of Contents Plus」のインストール方法

Table_of_Contents_Plus_inst_01

※画像クリックで拡大イメージが見れます

まずは、プラグインのインストールを行う為に、WordPressの管理サイドのメニューより、プラグイン新規追加を選択して下さい。

その後、検索キーワードの窓に「Table of Contents Plus」と入力し、表示された該当のプラグインを、今すぐインストールをクリックして、インストールが完了した後に、プラグインを有効化を行って、プラグインがすぐに使用できる状態にします。

尚、上記記載の内容でプラグインのインストール方法が分からない方は、

WordPressプラグインのインストール方法~WordPressの基礎編

の記事を参考にしてください。

「Table of Contents Plus」の初期設定方法

WordPressの「管理サイド・メニュー」より、設定TOC+ を選択します。

(「Table of Contents Plus」の頭文字の略=「TOC+」です)

最新のバージョンでは、メニューの表示が「目次+」となっている場合があります

Table_of_Contents_Plus_02

※画像クリックで拡大イメージが見れます

すると以下の画面になりますので、設定内容を上から順番に解説していきます。

wordpress_plugin_tocplus_03_02

※画像クリックで拡大イメージが見れます

※上記写真の文字やボックスのチェックは、私が使用中の設定になっていますので、

参考にしてみて下さい。

表示する場所 ⇒ 目次を表示する「位置」を選択できます。

表示条件 ⇒ 見出しが何個以上ある時に目次を表示させるかを、数字で選択できます。

次の投稿タイプの時に表示

post = 記事

page = 固定ページ

(写真の「wpcf7_contact_form」と「ml-slider」は、お問合わせのコンタクトフォームと、

画像などのショウ・スライダーですので、一般的には使用しません。)

見出しテキスト ⇒ 見出しの「文字」テキストを任意で変更できます。

表示非表示切り替えボタンのテキスト ⇒ 切換えボタンの文字を任意で変更できます。

階層表示 ⇒ 目次の「階層」を表示します。

番号フリ ⇒ 目次の「番号」を自動で付加します。

wordpress_plugin_tocplus_04_01

※画像クリックで拡大イメージが見れます

スムーススクロール ⇒ チェックを入れると、スムーズにスクロールしないようにできます。

(※目次をクリックすると瞬時に移動しますので、視覚的にどの辺に移動したのかを把握する為にはチェックは消しておく事をオススメいたします。お好みで選択してください。)

デザイン (以下の項目が全てデザインに関しての設定です)

横幅 ⇒ 目次の横幅を設定できます。

回り込み ⇒ 目次周囲の回り込みを設定できます。

文字サイズ ⇒ 記事本文の大きさに対して、目次の文字の大きさを設定できます。

デザイン ⇒ 目次のチェックを入れた外観のように、デザインを選択できます。

上級者向け(表示) ⇒ 上級者向けの設定を表示することが出来ます。

更新」ボタン ⇒ 設定を「更新」を押して保存できます。

warning-caution-icon(設定終了後に更新を行わないと、設定内容が保存されませんので注意してください)

※以上の設定だけで記事の目次を自動生成して、表示を行ってくれますが、参考までに「上級者設定」の画面も、以下に添付しておきます。

wordpress_plugin_tocplus_05_01

※画像クリックで拡大イメージが見れます

小文字 ⇒ アンカーリンクに、小文字を使用します。

ハイフン ⇒ アンカーリンクに、ハイフンを使用します。

トップページへの表示 ⇒ トップページに、目次を表示します。

CSS除外 ⇒ プラグインの CSS を読み込まない場合は、チェックを入れてください。

テーマのCSS  ⇒ あなたのテーマでリストタグに背景が設定されている場合は、対応する為に、チェックを入れてください。

見出しレベル ⇒ 見出しの表示・非表示を、チェックボックスのON・OFFで選択できます。

(例:大見出しのh1を目次から除外する場合は、この部分のチェックをはずしてください。)

除外する見出し ⇒ 除外する見出しの文字を入力して指定できます。

wordpress_plugin_tocplus_06_01

※画像クリックで拡大イメージが見れます

パス限定 ⇒ 特定のページのみで表示させたい場合、カンマ(,)区切りで

スラッシュ(/)からはじまるパスを設定してください。

アンカーリンクの接続詞 ⇒ (内容はチェックボックス横の説明文の通りです。)

尚、「Table of Contents Plus」で「目次」を正しく表示させるには、作成した記事の中でH1~H6までのHTMLタグを、目次で表示させたい文章中に記述を行わないと、表示されませんので注意してください。

段落(見出し)のHTMLタグの記述方法

段落(見出し)のHTMLタグの記述方法を、参考までに解説しておきます。

●記述方法は、段落の「見出し1」~「見出し6」を使用することで設定する事ができます。

●「見出し1」~「見出し6」の順に=H1~H6 の、6種類です。

H1は大見出しになりますので、記事中に1回のみ使用を行うのが一般的です。

その理由は、H1を1つのページ(記事)内に多用すると、SEO的に検索エンジンがページの内容を誤って判断し混乱する可能性がありますので、1回のみ使用を行う方が良いでしょう。

●H2からH6は順に「中見出し」⇒「小見出し」と、準に続きます。

(使用例:H1>H2>H2>H3>H3>H2>H3>H3)

※H1の大見出し以外の個数は、作成した記事内容の構成に合わせて、任意で指定してください。尚、H1を使用せず、H2又はH3から使用を始めるサイトもあります。

「Table of Contents Plus」WordPressプラグインのまとめ

さて、「Table of Contents Plus」記事の目次を自動表示するWordPressプラグインの設定方法と使い方、いかがでしたでしょうか。

今回のこのプラグインは、ブログ管理者、購読者、検索エンジン、の全てに対してメリットのあるプラグインですので、ぜひインストールを行って使用してみる事を、おすすめ致します。

>> 「自由生活情報サイト!コスパるTiME」TOPへ