1.8.2 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: #色コード;
}

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

コメントを残す

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