1.8.6 Released !

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

SANGOではこれまで目次プラグインとして「Table of Contents Plus(TOC+)」に対応していました。しかし、TOC+は3年以上アップデートされておらず、WordPressとの互換性やセキュリティの問題が起きる可能性がゼロではありません。

そこで、SANGO v1.8.2から、類似プラグインの「Easy Table of Contents」を使った場合にも、きれいな目次が表示されるように対応しました。このページでは、SANGOで「Easy Table of Contents」を設定する方法を解説します。

表示される目次のイメージ

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

SANGOでEasy Table of Contentsを設定する

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

手順1:プラグインをインストール

他のプラグインと同様に「プラグインの新規追加」から「Easy Table of Contents」と検索してインストールします。

手順2:「一般」設定

プラグインを有効化したら、Easy Table of Contentsの設定を行います。WordPressのダッシュボードから[設定]⇒[目次]を選びましょう。

以下の画像のように設定をしましょう。オレンジ色の文字で指定を書いていない部分については、自由に設定して頂ければOKです。

Easy Table of Contentsの一般設定

↑目次の「折りたたみ表示」には事情があって現状対応していません。ご理解いただけると幸いです。

手順3:高度設定へ

設定ページで下にスクロールしていくと「外観」の設定が表示されますが、これらは何も設定しなくてOKです。さらに下にスクロールして高度な設定を行います。

Easy Table of Contentsの高度な設定

↑ここが最も重要なところです。「プラグインのCSSスタイルの読み込みを禁止します」に必ずチェックを入れるようにしてください。チェックを入れないとデザインが崩れてしまいます。

これで設定は完了です。

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

目次を追尾させる例

記事ページで目次をサイドバーに固定するには、ウィジェット設定を開き、「目次」という名前のウィジェットを「追尾サイドバー」に追加します。ウィジェットの設定については、下の記事をご参照ください。

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

「閲覧中セクションのハイライト色」を変えるには

Easy Table of Contentsの「目次」ウィジェットには「閲覧中セクションのハイライト色」という設定があります。これは、現在読者が見ている箇所を、目次上でハイライトしてくれるというものです。

さきほどの設定で「プラグインのCSSスタイルの読み込みを禁止します」にチェックを入れているため、ここで色を選んでも目次には反映されません。

追尾サイドバーの目次のハイライト色を変えたい場合は、以下のCSSを子テーマのstyle.cssもしくは[外観]⇒[カスタマイズ]⇒[追加CSS]に貼り付けてください。

.ez-toc-list .active {
  background-color: #色コード;
}

↑好きな色のコードを指定しましょう。

14 COMMENTS

よいこ 2019/10/18

いつもお世話になっております。
トップページを固定ページ仕様に変更して、easy table of contentsも固定ページのチェックは外してあるのですが、ウィジェットで追加した追尾バーの目次だけが表示される現象が起きてしまいます。
何か設定で足りていないところがあるのでしょうか?
もしお分かりになればご教示いただきたく存じます。
よろしくお願いいたします。

回答を見る
koba 2019/10/10

初めまして。
Easy Table of Contentsの目次の設定についての質問です。設定で「カウンター」の部分を「なし」にしてもすべてのテキストの前に「・」が表示されてしまいます。かれこれ数時間ネットで改善策を調べたりしているのですが全く分かりません。もしよろしければ改善策をご教授いただけないでしょうか。

回答を見る
いつもお世話になっております。 2019/09/30

Easy Table of Contentsを反映して目次を作成すると、挿入されていたjpeg画像が「●●●●-768×512.jpg」といった形で表示されてしまいます。

対応策がありましたらご教示いただきたいです。

回答を見る
hee 2019/09/30

初めまして!
モバイルの記事本文の画像のみ左右の余白を無くしたいのですが、
どこの値を変更すればよろしいでしょうか。

https://fantastech.net/img-space-0
↑こちらのサイト様の記事を参考にしましたが、sangoではどの部分を書き換えれば良いのかわかりませんでした。

お忙しいところ申し訳ございませんが、ご回答いただけると幸いに存じます。
どうぞよろしくお願い申し上げます。

回答を見る
campion 2019/09/19

はじめまして
Easy Table of Contentsを使うようになってから、各ページの最後に表示される「関連記事」がh3レベルの項目として目次に表示されるようになってしまいました。
この「関連記事」を目次に表示させない方法はありますでしょうか。
いい機会なので、関連記事自体を表示させないようにしようとしましたが、それもできませんでした。PORIPUを使っていることが影響しているのでしょうか。
もし対処法がおわかりになりましたら、お教えいただけないでしょうか。

回答を見る

コメントを残す

メールアドレスは公開されません。* は必須項目です。コメント投稿のガイドライン