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

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

52 Comments

青ちゃん

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

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

返信する
サルワカくん

ショートコードの見出しでは、pタグが使われるようになっています。
これを見出しタグ(h2やh3)に変えるには、見出し文を選んだ上で、ビジュアルエディタの「段落」から見出し2や見出し3を選びます。
これでTOC+にも認識されるようになるはずです。

返信する
AKIHIRO

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

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

返信する
サルワカくん

目次自体は表示されていますか?
(表示されているものの、追尾されないだけですか?)
表示されていない場合、TOC+でpageにチェックが入っていない可能性があります。

返信する
AKIHIRO

ご返信ありがとうございます。目次自体は表示されていますが動いてくれないのです。また当ページのご解説通り、TOC+の設定で「page」にもチェックを入れています。ごめんなさい、限られた知識で調べるだけ調べていますがわかりません・・・。

返信する
サルワカくん

原因が分からないので、一度ページのURLを教えて頂けますか?
おそらくjQueryのエラーだと思います。ブラウザで検証⇒consoleをクリックすると赤いエラーが表示されているのではないかと。

返信する
AKIHIRO

大変お手数おかけいたします。

当方のサイトURLを記載いたします。一時的にメンテナンスモードを解除しますので、何卒ご確認のほどよろしくお願いいたします。恐れ入りますが、サイトは非公開でお願いいたします。

グローバルメニューの「『メニュー』内のどれかのコンテンツ」か「よくある質問」に目次があるので、このいずれかからご確認いただければと思います。

jQueryですか・・・いじった覚えはないのですが、もしかしたら何かやっちまっているかもしれません。せっかくなのでこれを機会に「基本のき」だけでも勉強しておきます。

サルワカくん

やはり、jQueryのエラーが出ています。
プラグインは一度全て停止してみましたか?

AKIHIRO

プラグイン「Easy Smooth Scroll Links」を停止したところ、ちゃんと追尾できるようになりました。小さなことでご迷惑をおかけしました。サルワカさんがすでに記事にされている通り、過去「Head Cleaner」にもやられたことがあります。他には「jetpack」にもやられました・・・うまくいかないときはプラグインを外してみる。今後意識していきます。些細なことにもご対応ありがとうございます。

返信する
キヨミズ

いくつも質問してしまいすみません。

TOC+を導入して問題なく機能しております。
もう少しブラッシュアップしたく、教えていただければと思います。

サイドバーウィジェットの目次をSANGOのカスタマイズページの目次と同じように
階層をドロップダウンメニュー方式に変えたいのですが、可能でしょうか?

よろしくお願いいたします。

返信する
ばたばた

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

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

返信する
shunP

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

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

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

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

返信する
サルワカくん

CSSで

.sidefixed .toc_widget {
    max-height: 500px;/*最大の高さ*/
    overflow-y: scroll;
}

などと指定するとはみ出した分をスクロールできるようになります。

返信する
shunP

ご回答ありがとう御座います!

上記方法を試してみたところ、『この記事の目次』のところが見切れてしまうのですが、どこを改善すればよいでしょうか?

返信する
sango愛用者

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

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

返信する

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

返信する
ネコ

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

・共有
・いいね
・関連

返信する
サルワカくん

何かのプラグインで記事下にシェアボタンなどを表示されてますよね。
そのプラグインにより表示されている見出しが、TOC+に読み取られて目次に表示しているのだと思います。

返信する
ネコ

サルワカさん、コメントありがとうございます。
なるほど、プラグインにより表示されている見出しが、TOC+に読み取られていたのですね、納得です。
ありがとうございました。

返信する
shogo

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

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

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

返信する
サルワカくん

TOC+の設定にて「目次の上にタイトルを表示」にチェックは入っておりますか?

返信する
サルワカくん

なるほど。
その下の入力欄に「目次」などのテキストも入っておりますよね?
また、上級者向けの設定で「CSSファイルを除外」にもチェックは入っておりますよね?
となると、ちょっと原因が分からないですね…。サイトのURLを教えて頂けると、ちょっとした原因究明はできるかもしれません。

返信する
shogo

CSSファイルを除外にもチェックが入ってることを確認いたしました。

サイトのURL載せておきます。こちらでも色々と調べてみます。

ご返信ありがとうございます。

返信する
サルワカくん

あ、サイドバーに表示される目次のことを仰っていたのですね。
ウィジェット設定でTOC+のタイトルを入力すれば表示されます。

返信する
shogo

サルワカ様。
できました、ありがとうございます。

SANGO愛用者

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

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

返信する
匿名

お世話になります。

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

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

返信する
サルワカくん

私もWordPressバージョン4.9.8で、TOC+を使っておりますが、問題なく動作しております。
ダウングレードは必要ありません。

返信する
にじます

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

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

返信する
サルワカくん

子テーマのfunctions.phpに以下のコードを追記してみて頂けますか?

function change_ads_position() {
  remove_filter('the_content','ads_before_headline');
  add_filter('the_content','ads_before_headline',999);
}
add_action( 'after_setup_theme', 'change_ads_position' );
返信する
にじます

コードを追加した所、
しっかりと目次下に記事中広告が出てきました。
早急な対応ありがとうございます。
これからもよろしくお願いします。

返信する
匿名

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

返信する
サルワカくん

そうですね。自動でなってしまいます。
ただし、子テーマのstyle.cssなどにCSSを追加すると変更が可能です。
おそらくCSSの適用優先順位が負けているのだと思います。
例えば、以下のCSSを追加することで、デフォルトに近づきます。

.entry-content #toc_container {
    background: #FFF;/*背景を白に*/
    border: solid 1px silver;/*枠線*/
    box-shadow: none;/*影を消す*/
}
/*円形のアイコンを削除*/
.entry-content #toc_container .toc_title:before {
  content: none;
}
/*目次の文字を修正*/
.entry-content #toc_container .toc_title {
    color: #555;
    padding-left: 0;
    margin: 0;
}
返信する
匿名

返信ありがとうございます。アイコンと非表示部分に手こずっていましたが無事・タイトルを中央揃え・幅を狭く・背景とボーダーの色変更など上書きできました。お騒がせしました。

返信する
カツ

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

返信する
サルワカくん

内部リンクが飛ばないとは「リンクが反応しない」というイメージでしょうか。
TOC設定中(テスト)という記事を拝見したところ、サイドバーの目次の項目をクリックすると、
その項目の見出しがある本文箇所に問題なくスクロール移動しているようなのですが、
これが機能していませんか?
もしくは、ページごと遷移したいというイメージですか?

返信する
カツ

サルワカさん、お世話になっています。
一晩調べ直し解決できました。
プログラム初心者の自分にはすぐに理解にたどり着けず、
勉強不足を痛感しています。
もっと勉強して次に質問がある場合は、
チンプンカンプンな質問ではなく、まともな質問できる様にします。
ありがとうございました。

返信する
サルワカくん

ご報告ありがとうございます。
解決したようで安心しました。
問題がありましたらまたコメント頂ければと思います。

返信する
カツ

サルワカさん、ご回答ありがとうございます。
自分のイメージでは、
例えばこちらのページの
目次内の「・Table Of Contents Plus」の設定方法を押すと、
すぐ下にある、「Table Of Contents Plusの設定方法」に移動されていると思うのですが、
自分ではそういったリンクがされていない様に思っています。
見当違いの質問かもしれないですが、
よろしくお願いします。

返信する
とまと

サルワカ様

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

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

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

返信する
サルワカくん

TOC+の設定で「折りたたむ」ボタンを表示するかどうかのオプションがあったかと思うのですが、確認済みですか?

返信する
キン

サルワカ様

質問失礼します。

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

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

返信する
サルワカくん

申し訳ないのですが、SANGOでは対応しておりません。
というのも、サルワカの場合、記事ごとに少し面倒な設定をしていて、
誰もが使用できるテーマに組み込むのは少し難しいためです。

返信する
なの

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

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

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

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

返信する
サルワカくん

もしかして「Table of Contents Plus」ではなく、「Easy Table of Contents」というプラグインをインストールしてはいないでしょうか(SANGOが対応しているのは後者の方です)。
一度ご確認頂ければ幸いです。

返信する
なの

サルワカさん、お世話になります。
ご指摘いただいたとおり「Easy Table of Contents」をインストールしていました(^_^;)

早速「Table of Contents Plus」に切替え設定したところ無事、表示できたのでご報告いたします。

迅速に対応いただき助かりました。
ありがとうございます。

返信する

コメントを残す

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