【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

Table of Contents Plusのインストール~設定方法

本記事では、WordPressのプラグイン「Table of Contents Plus」のインストール~設定方法について解説しています。

WordPressの学習におすすめ書籍
1冊ですべて身につくWordPress入門講座
総合評価
( 5 )
メリット
  • サイト運営に必須のことが学べる
  • 基本的な使い方~オリジナルテーマ開発まで学べる
楽天ブックス
¥2,200 (2024/05/21 12:05時点 | 楽天市場調べ)
\楽天ポイント5倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahoo!ショッピングで探す
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
総合評価
( 5 )
メリット
  • HTMLとCSSの基本が体系的に学べる
  • Webデザインの基本が学べる
  • 1つのWebサイトを作りながら学べる
楽天ブックス
¥2,486 (2024/05/19 18:26時点 | 楽天市場調べ)
\楽天ポイント5倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahoo!ショッピングで探す
目次

Table of Contents Plusとは?

Table of Contents Plus

Table of Contents Plusは、目次を自動生成してくれるプラグインです。

コンテンツの前に目次を配置することで、ページ構成をユーザーに伝えることが出来ます。また、目次の内容をクリックすることでその箇所までスクロールされるので、ユーザーが知りたい情報のみ記述されている内容を提供することが出来ます。

Table of Contents Plusのインストール

Table of Contents Plusのインストール

WordPressの管理画面から「プラグイン」→「新規追加」をクリックし、検索フォームに「Table of Contents Plus」を入力します。

検索結果に「Table of Contents Plus」が表示されるので「今すぐインストール」→「有効化」をクリックします。

Table of Contents Plusの有効化

設定に先ほど有効化したTable of Contents Plus(TOC+)が追加されるのでクリックします。

Table of Contents Plusの設定

Table of Contents Plusの設定を行います。表示していく画像は私が設定している内容で以下の画像のような目次が生成されます。

Table of Contents Plusのサンプル

この表示と同じに設定したい場合は画像のとおりに設定してください。完全に好みの問題のため、私と全く異なる設定にしても問題ありません。

Table of Contents Plusの設定項目①
設定内容
  • 位置:見出しが表示される位置を指定します。
  • 表示条件:見出しが何個以上ある時に目次を生成するかを指定します。
  • コンテンツタイプ:チェックを入れた箇所でのみ目次を生成します。postが固定ページ、pageが投稿タイプを表します。カスタム投稿タイプを使用している人は、一番下に投稿IDが追加されます。
  • 見出しテキスト:目次の上に任意のテキストを表示させます。
  • 階層表示:余白を使用して階層状態になっていることを表現します。
  • 番号振り:見出しの先頭に番号を振り、階層表示をより分かりやすく表現します。
  • スムーズ・スクロール効果:利用しているテーマによって既にスクロールの実装がされている場合があります。有効化したい場合は一度OFFの状態で目次をクリックし実装されているか確認しましょう。
Table of Contents Plusの設定項目②
設定内容
  • 横幅:目次の横幅を指定します。
  • 回り込み:目次を回り込ませる指定をします。デフォルト以外を設定するとfloatプロパティが適用されテーマによっては激しいデザイン崩れが発生するため、なし(デフォルト)をオススメします。
  • 文字サイズ:目次の文字サイズを指定します。
  • プレゼンテーション:目次のデザインを変更します。提示されている5つの設定以外にもカスタムを選択することでオリジナルデザインの目次を作成出来ます。
Table of Contents Plusの設定項目③
設定内容
  • 小文字:アンカーに必ず小文字を使用します。
  • ハイフン:アンカーにハイフンではなくアンダースコアを使用します。
  • ホームページを含める:固定ページをトップページにしている場合に目次が表示されます。
  • CSSファイルを除外:CSSファイルを読み込まないため一切デザインが適用されません。
  • 見出しレベル:どのレベルの見出しまで目次に表示させるかを指定します。デフォルト設定のh1~h6までチェックを入れると見出しがとてつもなく長くなってしまったり、階層表示をするとカオスな状態になるので程々にしましょう。
先輩くん

以上で、Table of Contents Plusの設定が完了だよ。お疲れ様でした。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次