Ver1.7 Released !

目次プラグイン「TOC+」の設定方法

TOC+の設定方法

WordPresssで記事に目次を挿入する場合には「Table Of Contents Plus(TOC+)」というプラグインを使うと便利です。見出し文を読み取って、自動で目次を作成してくれます。


TOC+の難点は、デザインがやや無味乾燥なところ。そこでSANGOではデフォルトでTOC+の目次が華やかに見えるようなスタイル指定をしています。

目次のスタイル

上部のボーダー、アイコン、目次というテキストにはメインカラーが使用されます(参考:SANGOで色を設定する)。

Table Of Contents Plusの設定方法

以下のようにTOC+の設定を行うことで、上で紹介したようなデザインの目次が挿入されるようになります。

手順1:TOC+をインストール

他のプラグインと同様に「プラグインの新規追加」から「Table Of Contents Plus」と検索してインストールします。細かな手順はここでは割愛します。

手順2:基本設定

プラグインを有効化したら、TOC+の設定を行います。以下の画像のように設定をしましょう。オレンジ色の文字で指定を書いていない部分については、自由に設定して頂ければOKです。

toc+の基本設定

位置は最初の見出し前にすると分かりやすいのではないでしょうか。

以下のコンテンツタイプを自動挿入で[post]にチェックを入れると、記事に見出しが挿入されるようになります。[page]にもチェックを入れると、固定ページにも挿入されるようになります。

見出しテキストは[目次の上にタイトルを挿入]にチェックを入れたうえで、欄内に「目次」などと入力します。

階層表示は、見出しの大きさから階層表示のある目次を作ってくれるための機能です。ここは好みですね。

番号振りのチェックは見た目的に外しておくのがおすすめです。

スムーズ・スクロール効果を有効化はオフにしておくのが良いでしょう。おそらく読み込むJavascriptが増えて少し重くなります。

続いて外観の設定です。

横幅は「自動(デフォルト)」

回り込みは「なし(デフォルト)」

文字サイズは「95%」

プレゼンテーションは「グレー(デフォルト)」

としましょう。

手順3:上級者向け設定(必須)

続いて上級者向け設定を行います。「上級者向け(hide)」をクリックすると設定項目が表示されます。

上級者向け設定

CSSファイルを除外には必ずチェックを入れましょう。このチェックが無いとデザインが崩れます。また、無駄なCSSを読み込まないようにしてくれるので、少し軽くなります。

見出しレベルには「h2だけ」もしくは「h2とh3だけ」にチェックを入れるのがおすすめです。h4までチェックを入れると、階層が増えて見づらくなります。

それ以外の部分のチェックは外しておきましょう。


設定は以上

これでTOC+の設定は終了です。上の画像より下にある「パス限定」などの項目は触れなくてOKです。

参考:目次をサイドバーに固定するには

目次を追尾させる例

記事ページで目次をサイドバーに固定するには、ウィジェット設定でTOC+を「追尾サイドバー」に追加します。詳しくは下の記事をご参照ください。

ウィジェットの設定をするウィジェットの設定をしよう:広告の貼り方も解説

63 COMMENTS

くろまめ 2019/02/22

SANGOテーマ購入させて頂きました!
質問なのですが、iPadやAndroidタブレットでも目次が追尾するようにしたいのですが上手くいきません。
具体的には「マクリン」さんのブログのように、タブレットでもサイドバーが追尾するようにしたいです。

回答を見る
西山 2018/11/30

お世話になります。

サイト全体でテキストの行間を詰めたくてスタイルシートに以下の記述を入れたところ、目次の丸いアイコン(?)とその横の”目次”というテキストがズレてしまいました。

body {
line-height: 1.6em
}

行間の詰めと、目次デザインを共存させる方法などもしありましたらお教え頂けると助かります。

回答を見る
Mina 2018/11/20

こんにちは!いつも参考にさせていただいています。

早速ですが、上記方法をしても目次が表示されない場合は、どんな原因が考えられますか?

TOP画面の固定ページのみ表示されません。
(Table of Contents Plusの設定で、postにチェックは入っています。)

お忙しいところ恐れ入りますが、ご教授おねがいします。

回答を見る
オニオン 2018/10/23

カテゴリーページでも[toc]の記述で目次を表示させたいのですが可能でしょうか?

回答を見る
なの 2018/10/11

サルワカさん、はじめまして。

この記事を参考にTOC+をインストールして記事内とサイドバーに目次を作ってみました。

しかし、デフォルトの簡素なデザインのままで華やかな目次になりません。
上級者向けの設定で「CSSファイルを除外」にチェックは入っています。

何が原因か分かればご教示いただけると幸いです。
どうぞよろしくお願いいたします。

回答を見る
キン 2018/10/07

サルワカ様

質問失礼します。

サルワカのサイトにあるような、表示中の見出しを上部に表示させたい(.floatingの部分)のですがSANGOでも可能なのでしょうか?

可能であれば方法をご教示いただけると幸いです。もし既出の内容なら申し訳ございません。

回答を見る
とまと 2018/09/24

サルワカ様

素敵なデザインを使わせて頂きありがとうございます。

初歩的な質問で申し訳ないのですが、目次を折りたたむ表示が突然消えてしまいました。
TOC+をダウンロードし直しても改善されませんでした。
何かの拍子に設定をいじってしまったのかなと色々調べてみたのですが、よくわからなくて質問に至りました。

改善点などあれば教えて頂けると幸いです。

回答を見る
カツ 2018/09/22

サルワカさん、お世話になります。
SANGO導入させて頂き、TOCの設定で躓いています。
目次の表示、サイドバーでの追尾まではできている様に思っていますが、
目次内から、内部リンクができません。
(サイドバーからリンクしてます・・・)
スムーズ・スクロール効果を有効化もチェック入れています。
サルワカさんのHP内、色々調べたつもりですが解決に至らないので、
質問させて頂きました。
内部リンクとばないのは何故でしょうか?
お忙しいところ、申し訳ありませんがご回答よろしくお願いします。

回答を見る
匿名 2018/09/06

TOC+を導入すると全てsangoの目次になるのでしょうか?
カスタマイズしようとCSSにコードを追加しても変わりません。グレーの背景だけでもなくしたいのですが。

回答を見る
にじます 2018/08/23

お世話になっております。

質問があります。
現在では、目次上に記事中広告が出てきますが、
目次の下に記事中広告を設定することはできるでしょうか?
お手数ですが、よろしくお願いします。

回答を見る
匿名 2018/08/20

お世話になります。

TOC+をインストールしようとしたところ、「お使いのバージョンの WordPress ではテストされていません」と出ているのですが、インストールしても問題ないのでしょうか?

wordpressはバージョン 4.9.8を使っています。
TOC+が対応する最新バージョンは 4.4.16とのことなので、ダウングレードしたほうがいいのでしょうか?

回答を見る
SANGO愛用者 2018/08/16

SANGOを使わせていただいています。

目次を追尾サイドバーに配置しているのですが、ページを分割した際に2ページ目以降の見出しが表示されてしまいます。表示されていてもクリックができないので読者にとっては不便だと思いました。
CSSや解決策をよろしくお願いします。

回答を見る
shogo 2018/08/04

いつもお世話になっております。

追尾サイドバーに目次を追加したのですが、上の青いバー(目次と書いてある部分)が表示されません。

なにか設定が必要なのでしょうか?もしくはなにか問題があるのでしょうか。

回答を見る
ネコ 2018/08/04

いつもお世話になっております。
TOC+プラグインをインストールして、記事の上に目次を表示するようにしたのですが、なぜか目次の最後に下記の文字列が三行追加されてしまいます。表示されないようにするにはどうすればよいかわかりますでしょうか?

・共有
・いいね
・関連

回答を見る
2018/07/28

目次が表示されません。他のプラグインを停止しても一度アンインストールしてもうまくいかないのですが、どうすればいいでしょうか。

回答を見る
sango愛用者 2018/06/20

いつもお世話になっています。
目次をクリックして見出しまでは飛ぶのですが、h2見出しで画面上部と余白が無いので少々窮屈に見えてしまいます。

改善する方法を、よろしくおねがいします。

回答を見る
shunP 2018/05/16

サルワカさん質問です!m(__)m

サルワカさんのサイトの様にサイドバーの目次をスクロールにすることはできますか?

目次の項目が多くなりすぎると画面からはみ出した分が表示されなくて困っています。

なにかいい方法はありますでしょうか?

回答を見る
ばたばた 2018/04/10

サイトが素敵でUIも綺麗で眺めているだけで楽しくなる媒体ですね。
TOC+のデフォルトだと、どうしてもデザイン性が悪く、TOC+のCSSをカスタマイズをしたサイトを探してこちらのサイトにたどり着きました。

こちらのコメントをしているページの目次はTOC+のプラグインを使用して表示させているのでしょうか?

回答を見る
AKIHIRO 2018/01/29

解説を読み込みながら、少しずつ構築できています。ありがとうございます。

さて、当記事最後の「参考:目次をサイドバーに固定するには」の通りやってみたのですが、固定ページで追尾してくれません(投稿ページは未確認です)。何か原因はあるのでしょうか?

回答を見る
青ちゃん 2018/01/01

いつもありがとうございます。
この記事のように、「TOC+」を設定したのですが、「ショートコートでの見出し」を利用すると、「見出し」だと認識されない状態になってしまいます。

他のブログで書いた記事を写したときは、それが「見だし」として認識されるようなのですが…何か方法がありますでしょうか。

回答を見る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です