【ワードプレスプラグイン】目次プラグインの定番【Table of contents Plus】のインストールから設定方法までを紹介します。
ワードプレスで作ったページのトップによく見かける【目次】を表示できるワードプレスプラグイン『Table of Contents Plus』のインストール方法と設定方法を紹介します。
これがあるのと無いのでは、ページ自体の見やすさが変わってくるので、この機会に是非導入してみたいプラグインです。
こんな方におすすめ
- TOC+のインストール方法、設定方法を知りたい人
- ワードプレスのプラグインのインストール方法などを知りたい人
目次
目次プラグイン【Table Of Contents Plus】のインストール方法
まずは目次プラグイン【Table Of Contents Plus】のインストール方法を紹介します。
このプラグインのインストール方法は、他のプラグイン同様です。
画面左の【プラグイン】から【新規追加】を選択します。
検索窓に【Table Of Contents Plus】と入力。
Enterキーをクリックする事で、色々なプラグインが表示されます。
リストの中から【Table of Contents Plus】を探し、【今すぐインストール】をクリックします。
インストールが完了すると、上の画像の様になりますので、【有効化】をクリックします。
目次プラグイン【Table Of Contents Plus】の設定方法
次は目次プラグイン【Table of Contents Plus】の設定をしていきたいと思います。
【Table of Contents Plus】は設定方法もカンタンで、一度設定してしまえば全てのページの目次に適用されます。
画面左の【設定】から【TOC+】をクリックします。
クリックすると【Table of Contents Plus】の設定画面に移行します。
Table of Contents の設定画面
位置
ココでは目次の位置を決めます。
最初の見出しの前、後、または記事の上、下から選択する事ができます。
表示条件
ここではいくつの見出しがある場合に目次を表示するか決定します。
デフォルトでは４つ見出しがある時に目次が自動で表示される様になっています。
以下のコンテンツタイプを自動挿入
ここではどんな場所に目次を表示するか指定します。
- post 固定ページ
- page 投稿ページ
- custom CSS カスタムCSS
- customize_changeset よくわかりません。
- oembed_chache これもよくわかりません。
- wpcf7_contact_form コンタクトフォーム７に表示する場合チェックを入れる
よく分からない項目もあるので、私は必要に応じて、post、pageにチェックを入れています。
見出しテキスト
見出しテキストは、見やすさの目安になるので、結構重要かなと思っています。
デフォルトでは英語ですので、日本語に書き換えています。
私は以下の通りにチェックを入れています。
目次の上にタイトルを表示
ボックス内は【目次】と記入しています。
ユーザーによる目次の表示・非表示切り替えを許可
【テキストを表示】ボックスには『表示』と記入
【テキストを非表示】ボックスには『閉じる』と記入
階層表示
好みでチェックを入れます。
ここにチェックを入れる事で、目次の表示が項目ごとに段差つきで表示されます。
番号振り
好みでチェックをいれます。
ここにチェックを入れる事で、目次の各項目に分かりやすい番号が表示されます。
スムーズスクロール効果を有効化
ここにチェックを入れる事で目次内をクリックした際に、目的のセクションに滑らかにスクロールします。
ここにチェックを入れない状態では、目次内のクリックした箇所にジャンプします。
外観
ここでは外観の設定をします。
横幅
ここでは目次の横幅を設定します。
自動
自動に設定するとページの表示幅に最適な状態で目次が表示されます。
このブログでは『自動』に設定しています。
固定幅 （PX指定）
固定幅でピクセル指定する事ができます。
数字が大きいほど幅が広いです。
割合％
％で目次の幅を設定する事もできます。
回り込み
無し、右寄せ、左寄せの３つから選択できます。
文字サイズ
文字サイズは『％』で設定する事も出来ますし、pt（ポイント）、em（文字強調HTML）など設定できます。
プレゼンテーション
ココでは目次の見た目を選びます。
目次のデザインはデフォルトでは６種類から選ぶ事ガで来ます。
カスタムを選択すると
カスタムを選択することで、枠線や背景などを好きな色に設定できるようになります。
AFFINGER4】ではオリジナルの目次の外観に設定できます♪
このブログで使っているワードプレステンプレート【AFFINGER４】ではオリジナルの外観を使用できます。
AFFINGER管理画面右下、【その他】の項目にある、「TOC+にオリジナルCSSを適用する」にチェックを入れます。
⇩⇩⇩AFFINGER4での、目次の外観の設定方法はコチラのページで解説しています。
-
-
【アフィンガーの使い方】アフィンガーの文字装飾一覧はコチラ＞
目次このページでは人気ワードプレステンプレート、【アフィンガーAFFINGER4】の記事装飾の使い方や機能などを紹介します。見出しのデザインも自由自在！ こんな風にかんたんに変更可能です。『クリップメ ...
目次プラグイン【Table Of Contents Plus】まとめ
今回は目次プラグイン「Table of Contents Plus」のインストール方法と設定方法を紹介しました。
基本的に難しい設定も無く、すぐに使えるのでぜひあなたのブログにも導入してみてください。
