2.0 Released !

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

TOC+の設定方法

2019/5/8 追記:SANGO v1.8.2〜別の目次プラグイン「Easy Table of Contents」にも対応しました。

SANGOでEasy Table of Contentsの目次を表示する

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+を「追尾サイドバー」に追加します。詳しくは下の記事をご参照ください。

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

80 COMMENTS

hiro 2019/11/16

目次プラグイン「TOC+」が見つからない

新サイトを作ったところ、TOCが見当たりませんでした。 Table Of Contents Plusで検索をしました。 消えてしまったのでしょうか…? 他のプラグインでもSNAGOの目次は使えますか?

回答を見る
パドー 2019/11/16

「前の記事」「次の記事」の大きさを変更したい

お世話になっております。 いつも丁寧なご対応ありがとうございます。 一点ご質問があります。 「前の記事」「次の記事」の大きさを変更するのにはどうしたいいいでしょうか。 存在感を増すために縦横2倍程度の大きさに変更したいと考えます。 以上、よろしくお願いいたします。

回答を見る
佐々木 2019/10/25

目次のh3見出しをアイコンにしたい

いつもお世話になっております。 TOC+のh2見出しは番号で表示し、h3見出しはFontAwesomeのアイコンまたは「・」で表示させる方法はありますでしょうか? よろしくお願いいたします。

回答を見る
nanami 2019/06/21

固定ページの目次が表示されない

固定ページをトップページ(サイドバー有)で1ページのみのサイトを作成しています。 サイドバーのみに目次を表示したいので、「Easy Table of Contents」では無理っぽかったので、「TOC+」を使いました。 説明通りしてみたのですが、固定のホームページには全く表示されません。 ※設定で「post」「page」両方にチェックを入れています。 試しに、固定ページに新規で記事を入れて、非公開…

回答を見る
瑠璃 2019/04/26

目次から飛ぶとズレる

TOC+で目次を設定しましたが、目次から飛ぶと見出し下に飛んでしまいます。 見出しのところに飛ぶようにするにはどうしたらいいですか?

回答を見る
YF 2019/03/23

特定の固定ページ(または投稿ページ)で、特定の目次を表示する方法

いつも参考にさせていただいております。 さて、サルワカさんの下記ページのように、特定の固定ページ(または投稿ページ)で、特定の目次を表示させたいです(下記ページは、ルートドメインの目次とは異なっていますよね) https://saruwakakun.com/html-css/material https://saruwakakun.com/sango/ これは、何かしらのプラグインを入れているので…

回答を見る
ひで 2019/03/05

ページ分割利用の際の2ページ目以降の見出しが表示されない件

お世話になります。 TOC+でページ分割された記事の2ページ目以降の見出しが表示されないので、表示されるようにして頂きたいです。 ググって調べるとCSS等をいじると出来るようなのですが、そのあたりの知識がなく、変なことを恐れ自分でいじりたくないので お手数おかけしますが、どうぞよろしくお願い致します

回答を見る
くろまめ 2019/02/22

追尾サイドバーをタブレットでも実現したい

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

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

ine-heightを指定したら目次のアイコンとテキストが崩れてしまった

お世話になります。 サイト全体でテキストの行間を詰めたくてスタイルシートに以下の記述を入れたところ、目次の丸いアイコン(?)とその横の”目次”というテキストがズレてしまいました。 body { line-height: 1.6em } 行間の詰めと、目次デザインを共存させる方法などもしありましたらお教え頂けると助かります。

回答を見る
Mina 2018/11/20

TOC+目次がホーム固定ページで表示されない

こんにちは!いつも参考にさせていただいています。 早速ですが、上記方法をしても目次が表示されない場合は、どんな原因が考えられますか? TOP画面の固定ページのみ表示されません。 (Table of Contents Plusの設定で、postにチェックは入っています。) お忙しいところ恐れ入りますが、ご教授おねがいします。

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

カテゴリーページでTOC+の目次を表示させたい

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

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

TOC+にSANGOのスタイルが反映されない

サルワカさん、はじめまして。 この記事を参考にTOC+をインストールして記事内とサイドバーに目次を作ってみました。 しかし、デフォルトの簡素なデザインのままで華やかな目次になりません。 上級者向けの設定で「CSSファイルを除外」にチェックは入っています。 何が原因か分かればご教示いただけると幸いです。 どうぞよろしくお願いいたします。

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

サルワカ様 質問失礼します。 サルワカのサイトにあるような、表示中の見出しを上部に表示させたい(.floatingの部分)のですがSANGOでも可能なのでしょうか? 可能であれば方法をご教示いただけると幸いです。もし既出の内容なら申し訳ございません。

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

TOC+で「目次を折りたたむ」ボタンが表示されなくなった

サルワカ様 素敵なデザインを使わせて頂きありがとうございます。 初歩的な質問で申し訳ないのですが、目次を折りたたむ表示が突然消えてしまいました。 TOC+をダウンロードし直しても改善されませんでした。 何かの拍子に設定をいじってしまったのかなと色々調べてみたのですが、よくわからなくて質問に至りました。 改善点などあれば教えて頂けると幸いです。

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

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

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

TOC+のスタイルをカスタマイズしたい

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

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

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

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

TOC+のバージョンについて

お世話になります。 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+の目次に「共有」「いいね」「関連」などの文字列が表示されない

いつもお世話になっております。 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+に認識されず目次に表示されない

いつもありがとうございます。 この記事のように、「TOC+」を設定したのですが、「ショートコートでの見出し」を利用すると、「見出し」だと認識されない状態になってしまいます。 他のブログで書いた記事を写したときは、それが「見だし」として認識されるようなのですが…何か方法がありますでしょうか。

回答を見る

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。