WordPressテーマ Cocoonの目次をサイドバーに設置・スタイル微調整

CocoonWordPress
この記事は約3分で読めます。

WordPressテーマのCocoonを使用していますが、サイドバーのスクロール追従エリアに読んでいる記事の目次を表示させるのって結構いいかも。

PCの場合、ユーザービリティが上がるかなと思って設置してみました。
また、Cocoonの目次のスタイルは少し見にくかったので、文字のぶら下げなどスタイルを微調整しました。

なお、今回のバージョンは以下の通りです。

  • WordPress 5.2.3
  • Cocoon 1.9.6.4
スポンサーリンク

目次ウィジェット/ショートコードでサイドバーに設置

Cocoonのサイドバー スクロール追従エリアに目次を設置する方法は、

  • 目次ウィジェットを使用する
  • ショートコード[toc]を使用する

の2つかと思います。

目次ウィジェットを使用する方法

Cocoon 目次

まず1つ目の目次ウィジェットを使用する方法は、WordPressメニューの「外観」⇒「ウィジェット」を開き、「サイドバー スクロール追従」に「[C] 目次」のウィジェットを設置するだけです。

Cocoon 目次

見た目はこんな感じで、もれなくH3の見出しが付いてきます。

ショートコードを使用する方法

Cocoon 目次

2つ目のショートコード[toc]は、「カスタムHTML」のウィジェットを設置してその中にショートコードを記載すればOKです。

Cocoon 目次

見た目は本文内の目次と同じになり、タイトルラベルと開く/閉じるのリンクも付いています。

こちらの方が本文内と一緒で統一感があるので、ショートコード[toc]を使う方法を採用しました。

Cocoon 目次

どちらの方法にしても目次を表示させるのは投稿だけでいいかなと思うので、各ウィジェットの表示設定で投稿のみ表示するようにチェックしておきました。

CSSで目次のスタイルを微調整

サイドバー スクロール追従エリアに目次は設置できましたが、ちょっと見にくい。。

そこで、

  • 本文内の目次やプロフィールウィジェットと同じ枠線を付ける。
  • 2行に跨ったときの項番分の文字のぶら下げ。
  • 入れ子になった項番の文字サイズを少し小さく。

という対応をしました。

Cocoonの目次のCSSはこちらのファイルのようです。

cocoon-master\scss\toc.scss

こちらの記述されているスタイルを見ながら、WordPressメニューの「外観」⇒「カスタマイズ」⇒「追加CSS」で以下のスタイルを追加しました。

/* Sidebar Inline TOC */
#sidebar .toc {
  padding-top: 1em;
  padding-bottom: 1em;
  border: 1px solid #89c3eb;
  border-radius: 4px;
}
.toc .toc-content ol li {
  text-indent: -20px;
}
.toc .toc-content ol li ol li {
  font-size: 90%;
  padding-left: 20px;
  text-indent: -36px;
}

項番分の文字のぶら下げは、「padding-left: 20px; text-indent: -20px;」の組み合わせで実現しています。
入れ子になっている項番は、フォントサイズを小さくした分、インデントも小さめに。

Cocoon 目次

見た目はこんな感じに変わりました。
シンプルなままですが、多少は見やすくなったかな。
基本的に本文内はH2とH3までの見出ししか使わないので、まあこれでいいでしょう。

項番(ol li)のスタイルは、本文内の目次も同様にこの設定が反映されます。

最後に

今回は、WordPressテーマ Cocoonの目次をサイドバー スクロール追従エリアに設置しました。
見にくかったデフォルトのスタイルの目次でしたが、CSSでスタイル微調整して見やすくできました。

スポンサーリンク
スポンサーリンク
WordPress
えふめん

大阪在住、30代。
業務系SE・社内SEの仕事を通じて学んだこと、PCトラブルで困って調べたこと、手作業を効率化して改善したこと、WordPressのブログ運営などの記事を書いています。

えふめんをフォローする
\よかったらシェアしてね/
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
俺の開発研究所

コメント

タイトルとURLをコピーしました