WordPress5.5への更新について

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スタイルの読み込みを禁止します」に必ずチェックを入れるようにしてください。チェックを入れないとデザインが崩れてしまいます。

これで設定は完了です。

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

目次を追尾させる例

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

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

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

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

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

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

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

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

参考2. 目次のドットを番号に変えるには

以下のCSSを子テーマのstyle.cssもしくは[外観]⇒[カスタマイズ]⇒[追加CSS]に貼り付けることで、目次の先頭のドット(黒い点)を数字に変えることができます。

/* Easy Table Of Contentsによる目次に番号振りをする */
#ez-toc-container .ez-toc-list {
  margin-left: 0;
}
#ez-toc-container ul.ez-toc-list li {
  list-style: none;
}
#ez-toc-container ul, #ez-toc-container.counter-hierarchy ul, .ez-toc-widget-container.counter-flat ul, .ez-toc-widget-container.counter-hierarchy ul {
  counter-reset: item;
}
#ez-toc-container ul.ez-toc-list li a::before, .ez-toc-widget-container ul.ez-toc-list li a::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
}

38 COMMENTS

アバター
シュウ 2020/09/06

目次が複重する・・・

Easy Table of Contentsの目次がどうしても二個表示されてしまいます。 1個だけで充分なのですが、どうすればよろしいでしょうか?? よろしくお願いいたします。

回答を見る
アバター
ながの 2020/09/01

目次がサイドバーウィジェットにのみ表示される

タイトルの通り、特定の記事において追尾ウィジェットに設定した目次は表示されるのですが、本文にタイトルが表示されません。表示される記事もあるので、全てのコンテンツをコピーして新しく作った記事に貼り付けてみても表示されず。記事中のいずれかの設定が鑑賞しているのでしょうか。 --- 先に問い合わせた件、アコーディオンでたたまれている行が長いと影響があるように思いますがいかがでしょうか?

回答を見る
アバター
りえ 2020/08/24

目次表示がバグります

まだテスト作成中なのですが、目次が延々と重複作成されて表示されてしまいます。 どうやったら正常にできますでしょうか? 初心者なので設定もれやミスがあるかもしれません…

回答を見る
アバター
yasu 2020/08/23

目次のドットを番号に変えたい

本記事に記載のあったCSSを子テーマのstyle.cssにコピペし、キャッシュもクリアした上で見え方を確認しているのですが、目次のドットが数字にならないのです。 TOCプラグイン設定の上級者向け設定のところで、 「プラグインの CSS スタイルを読み込まない場合はチェックを入れてください。選択した場合、上の外観設定も無視されます。」にチェックをつけることで、目次エリアのレイアウトはきれいになるので…

回答を見る
アバター
あい 2020/07/16

「目次」という文言が表示されない

いつもお世話になっています。 目次の設定をしたくて、こちらのページで教えて頂いているEasy Table of Contentsの設定通りにしましたが、見出しラベルにも目次と入力していますが、 ワードプレスのブログでは目次以外はうまくいきましたが、目次の文言だけがでてきません。 方法があれば教えて頂きたいです。 宜しくお願い致します。

回答を見る
アバター
ススム 2020/07/08

Easy Table of Contentsでごとに「目次へ戻る」が表示される

いつもお世話になっています。 今回が初めての導入となります。 Easy Table of Contentsを有効化しました。 目次は正常に表示されています。 しかし、ごとに「↑目次へ戻る」という表示が出てしまっています。 この部分をクリックすると、上の目次に戻るリンクが付いています。 邪魔なので、消したいと考えています。 プラグインの設定で変更できるのではないかといろいろやってみました。 結局原因…

回答を見る
アバター
ゆーい 2020/05/03

目次のスタイルが反映されません

CSSのチェックをいれているのですが、スタイルが反映されないようで、原因が分からずコメントさせていただきました。

回答を見る
アバター
valleyarts 2020/03/03

アイキャッチ画像と目次の間にコンテンツをいれたい

よくある質問等を見ましたが確認出来なかったため質問させて頂きました。 (同じ質問があったらすみません・・・。) こちらのページの通り目次の設定をしました。 https://saruwakakun.com/sango/easy-table-of-contents 上記ページはアイキャッチ画像と目次の間にテキストが入っています。 「SANGOではこれまで目次プラグインとして」~(この文字から始まる箇所…

回答を見る
アバター
shu 2020/02/09

目次を記事に挿入したい

初めまして。シュウと言います。 目次の設定(サイト通り、プラグイン設定しました。)を終えたのですが、 実際に記事に表示させるにはどうしたらいいのでしょうか。 色々いじってますが、わかりません。 教えていただけませんか?

回答を見る
アバター
ツヨシ 2019/11/22

サイドバーに表示されている目次を目次内でスクロールできるようにしたい。

1つご教授いただければ幸いです。 サルワカさんのサイト「サルワカ」のサイトバーに設置されている目次は、目次内「この記事の目次」上でスクロールできる仕様になっているかと思いますが、私もそのようにカスタムしたいと考えております。 理由は、記事が長文化すると現行の目次では全て表示できない記事も発生してしまうためです。 お手数おかけしますが、CSSコードをご教授いただければ幸いです。

回答を見る
アバター
よいこ 2019/10/18

トップページを固定ページにした際のサイドバーの目次表示について

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

回答を見る
アバター
koba 2019/10/10

Easy Table of Contentsのカウンター(点)を消したい

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

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

Easy Table of Contentsによるテキスト崩れを防ぎたい

Easy Table of Contentsを反映して目次を作成すると、挿入されていたjpeg画像が「●●●●-768x512.jpg」といった形で表示されてしまいます。 対応策がありましたらご教示いただきたいです。

回答を見る
アバター
hee 2019/09/30

モバイルの記事内の画像のみ、左右の余白を消したい

初めまして! モバイルの記事本文の画像のみ左右の余白を無くしたいのですが、 どこの値を変更すればよろしいでしょうか。 https://fantastech.net/img-space-0 ↑こちらのサイト様の記事を参考にしましたが、sangoではどの部分を書き換えれば良いのかわかりませんでした。 お忙しいところ申し訳ございませんが、ご回答いただけると幸いに存じます。 どうぞよろしくお願い申し上げま…

回答を見る

コメントを残す

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

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。