Table of contents Plusの使い方!記事内に目次を挿入しよう!

WordPressプラグインの
Table of contents Plusを使って
記事の中に目次を挿入する方法をご紹介します。
「目次」とは下記のようなものです。
Table of Contents Plusを使えば上記のような目次を自動で作ってくれます。目次があれば「つまみ読み」が出来ることもあり、ユーザーの手間を省く上で欠かせません。
是非、この機会にあなたのブログにも目次を導入してみてください。
★動画でも解説しています★
Table of Contents Plusの設定手順
では早速Table of Contents Plusの設定をしましょう。
まずはTable of Contents Plusのインストール・有効化が終わったら、WordPress管理画面で「設定」→「TOC+」という項目を探してクリックしてください。
下記のような画面になるはずです。
それぞれ解説すると
- 位置→目次を表示する位置(最初の見出しの前 or 後 or タイトル上 or 記事下のいずれか)
- 表示条件→見出し(hタグ)がいくつある場合に目次を表示するか?
- 以下のコンテンツタイプを自動挿入→post(投稿),page(固定ページ)にチェック
となります。
いずれも好みで決めていただいて構いませんが「よくわからない」という場合は上記の画像のとおりに設定していただければ問題ありません。
ここでの設定は下記になります。
- 見出しテキスト→目次の上にタイトルを表示するか?
- 階層表示→目次のテキストを階層表示にするか?
- 番号振り→目次のテキストに番号を付けるか?
- スムーズ・スクロール効果を有効化→目次のテキストをクリックした際にジャンプではなくスクロールさせるか?
- 外観→どんなデザインの目次にするか?
それぞれ設定しながら一つ一つ表示を確かめてみるのが良いと思います。
設定が終わったら下にスクロールしていきましょう。
- 回り込み→不明
- 文字サイズ→記事のテキストと比べて何%の比率にするか?
- プレゼンテーション→目次のデザインをどうするか?
となります。文字サイズやデザインは好みで決めていただいて問題ないと思います。
次は「上級者向け」の設定をしていきましょう。
- 小文字→不明
- ハイフン→不明
- ホームページを含める→不明
- CSSファイルを除外→不明
- テーマの見出し記号を保持→テーマの見出し機能を目次にも適用するか?
- 見出しレベル→h1,h2,h3までチェックを入れる
となります。不明な部分は実際に試してみましたが、イマイチ何が変化したかわかりませんでした。この中で必須項目は「見出しレベル」です。どの見出しタグまで目次として表示するか?という意味ですね。
これはh1,h2,h3辺りにチェックを入れておくと良いと思います。
設定が終わったら次に進みましょう。
- 除外する見出し→目次に表示しない見出しを指定することが出来る
- スムーズスクロール→使わない
- パス限定→特定のページのみで目次を表示させたい場合に使うが、ほぼ使わない
- アンカーのデフォルト接頭辞→目次テキストリンクのデフォルトの接頭辞(英数字)を決める
となっています。
いずれもデフォルトのままで特に問題ありません。
設定が終わったら「設定を更新」をクリックして保存しましょう。
サイトマップの設定
次はサイトマップの設定です。
ほぼ使うことはないと思いますが、一応ご紹介しておきます。
サイトマップ機能は「固定ページ」や「カテゴリーリスト」を簡単に表示してくれる機能です。ほぼ使いませんが。
ただサイトマップを使うなら「『PS Auto Sitemap』でサイトマップを簡単に作る方法」でご紹介する方法を使ったほうが遥かに簡単なので、Table of Contents Plusでは目次の設定だけで十分かと思います。
まとめ
Table of Contents Plusで目次を作ることで読者は情報が探しやすく、ブログを書く側にとっては読んでもらえるチャンスが増えます。
読者はなるべく時間をかけず、有益な情報が欲しいと望んでいます。読者に配慮した構造にする上でも、目次を置いておいてあげるとあなたのブログの親切度が上がると思いますよ。
是非、あなたもTable of Contents Plusを使ってみてくださいね。
それではこのへんで。
Comment
現在、webサイトを作っています。目次を作る方法を探していたところ辿りつきました。素晴らしい記事です。大変参考になりました。
現在、webサイトを作っています。目次を作る方法を探していたところ辿りつきました。素晴らしい記事です。大変参考になりました。
こちらこそご参考いただいてありがとうございます^^
是非、理想のWEBサイト作りにお役立てください^^