もくじ
WordPressに自動で目次設定
ビジネスでお金を生み出す日下部です。(^^)
ブログで、あなたの稼ぎになる情報を発信しています。
見出しの設定をするだけで、ワードプレスの記事に目次を自動生成してくれるプラグインが「Table of Contents Plus」です。
目次は、記事を読みたい人にとって、内容が一目で把握できるので、設置をオススメします。
プラグインをインストールして初期設定を済ませるだけで、あとはカンタンに使えます。
目次には、SEO効果もあるので、ワードプレスの設置が落ち着いたらインストールしてみましょう。
それでは、設定方法と使い方について解説をしていきます。
Table of Contents Plusのインスール方法
プラグインを初めてインストールするのであれば、こちらの記事を参考にしてみてください。
→プラグインのインストール方法を図解と動画で初心者にわかりやすく解説【WordPress】
・プラグインのインストール方法
プラグインのインストールには、まずワードプレスにログインします。
管理画面左メニューの中から、プラグイン→新規追加を選択してください。
画面が切り替わったら、右上にあるプラグイン検索窓にTable of Contents Plusと入力して検索します。
プラグインが表示されたら、インストールを開始して有効化にしましょう。
管理画面に戻り、左メニューにあるツールの中に、Table of Contents Plusが表示されていればインストールは完了です。
Table of Contents Plusの設定方法
インストールは、無事にできましたでしょうか？
それでは、ここから設定について解説をしていきます。
ワードプレスの管理画面左メニューから、「設定→TOC+」をクリックします。
画面が切り替わったら、ここから基本設定をしていきましょう。
基本設定は３つに区切って説明します。
➀目次の表示条件に関する設定
➁もくじのタイトル文字と表示・非表示に関する設定
目次の上に設置するタイトル文字をテキスト入力
- もくじ
- 目次
- contents
・・・などが、一般的につかわれています。
表示・非表示とは、もくじの枠を閉じるときに使用します。
「最初は目次を非表示」にチェックを付けると、もくじは枠が最初から閉じてる設定です。
③目次の表示方法に関する設置
- 階層表示 → もくじをタグの番号で階層表示させます。
- 番号振り → もくじのアタマに番号を振ります。
- スムーズ・スクロール効果を有効化 → もくじをクリックしたときのスクロール方法
- 横幅 → もくじの横幅
- 回り込み → もくじの横から文章がはじまる設定
- 文字サイズ → もくじの文字サイズの変更
目次のデザインカスタマイズ
目次のデザインは、変更することもできます。
テンプレートとして用意されているデザインと、自分でもカスタマイズする方法の２パターンあります。
カスタマイズ方法ですが、まずはカスタムのボタンを選択します。
その下にある背景項目横のボックスに、カラーコードを入力してください。
デザインを変更すれば、自分のサイトのイメージに合った目次の作成も可能です。
カラーコード表は、こちらを参考にしてみましょう。
HTMLカラーチャートサイト
→https://html-color-codes.info/japanese/
カーラーコードを入力した場合に反映される箇所
- 背景→背景色の変更
- ボーダー→枠線の色の変更
- タイトル→タイトル文字の変更（※デフォルトはcontents）
- リンク→タイトル文字色の変更
- リンク（マウスオーバー）→マウスカーソルを載せたときに色を変更
- リンク（閲覧済み）→目次をクリックした後の文字色を変更
ブログのテーマに合うカラーリングをしてみましょう。
上級者向けの設定
基本的に、この前までの設定を完了すれば、もくじは問題なく表示されます。
ですが、それ以上に細かく設定をしたければ、上級者向けの設定もあるのです。
基本設定の下の方に、上級者向けがるので、（表示）をクリックします。
すると、以下のような設定項目が表示されるのです。
上級者設定は、より細かく設定したい人向けです。
設定は、ほぼ解説が書いてあるのでどのような効果なのかを確認すれば、大体理解できると思います。
ここでは、上級者設定の解説を「見出しレベル」のみに留めます。
「見出しレベル」というのは、<h1>から<h6>タグの中で、見出しとして表示させたいタグの設定をします。
最初の方で解説をした、表示条件とセットで設定しましょう。
表示条件とは、見出しがいくつあったら、もくじを表示させるかという条件の設定でしたよね？
<h1>は、ブログ記事全体のタイトルで使用しているタグです。よってチェックは外しておきましょう。
その他の見出しタグは、自分のブログに合わせてチェックを付けてみてください。
Table of Contents Plusのサイトマップについて
Table of Contents Plusでは、サイトマップの設定をすることも可能です。
ですが・・・サイトマップについては、専用のプラグインがありますので、そちらをオススメします。
HTMLでのサイトマップを作成するには、こちらのプラグイン
→【PS Auto Sitemap】ワードプレスで作ったサイトにサイトマップを自動で作成するプラグイン
クローラー対策としてサイトマップを作成するには、こちらのプラグイン
→sitemapの作成は【Google XML Sitemaps】がイチオシ！クローラーを呼び込むプラグインの使い方
見出しタグの使い方についてワンポイントアドバイス
以上で表示に関する設定が完了しました。
使い方は、まず記事の投稿画面を開いてください。
スタイルの中に「見出し」があります。
ここから、目的にあった見出しタグを選択して使いましょう。
見出し１は、ブログ全体のタイトルなので、使用はしません。
ブログ記事は、見出し２〜使用するようにしてください。
表示設定で「２つ以上見出しがあるとき」と設定をしていれば、この見出しタグを２つ使用した時点で、記事のトップにもくじを自動表示してくれます。
ここで、見出しタグの使い方ワンポイントアドバイスです。
見出しタグは、基本的に「見出し２」から順番に使用していきましょう。
◎正しい使い方
見出し２→見出し３→見出し４
×誤った使い方
見出し２→見出し４
ブログの見た目を考えて、見出しを使用しているサイトがありますが、誤った使い方です。
見出しを使うときは、この辺りも注意するようにしてくださいね！
WordPressのもじく自動生成に関するまとめ
Table of Contents Plusは、見出しの設定をまとめて目次を自動で作成してくれるプラグインです。
記事の見出し変更にも自動対応してくれたり、目次をクリックするとその章までスクロールしてくれます。
もくじは、あったほうが記事の全体内容が一目で把握することが可能です。
「目的の章だけ読みたい」といったときにも便利ですよね？
ブログ記事を読みたい人の状況を考えてみると、最初から最後まで全てを読みたいという人ばかりではありません。
特に操作解説系の記事は、「必要箇所だけ読めればいい」と思う人がほとんどです。
であれば、もくじを設置してササッと探せるようにしておけば、読者からの評価は高いですよね？
ユーザーの利便性を考えると、目次は設置したほうが良く、SEOにも効果的です！
インストール推奨プラグインなので、ぜひ目次を設置してみてください。
