Ver1.4.1をリリースしました(5/19)

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

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

17 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見出しで画面上部と余白が無いので少々窮屈に見えてしまいます。

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

返信する

コメントを残す

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