Table of Contents Plus(TOC+)でサイドバーに設置した目次を見やすくカスタムしました。

Table-of-Contents-Plusサイドバーカスタム1
目次プラグインの「Table of Contents Plus通称:TOC+」を導入して、目次がサイドバーに追尾するように設置したのですが、そのままのスタイルだと少し見にくかったので簡単にcssを触って見やすくしたときのお話。
有料テーマAFFINGER5で行いましたが、別のテーマでも可能です。

TOC+でサイドバーに設置した目次のカスタム

Table-of-Contents-Plusサイドバーカスタム1そのまま使うとサイドバーの目次の項目がリンク文字特有の青色になっていたり、文字が小さかったり、各目次の隙間が少なかったりするので改善しました。

サイドバーに目次を追加する方法

まず初めにTable of Contents Plusプラグインを使ってサイドバーに目次を設置する方法のおさらいです。
Table-of-Contents-Plusサイドバーカスタム2プラグインを有効化するとウィジェットの中に「TOC+」というウェジェットが追加されていますので、こちらをサイドバーにドラッグ&ドロップするとサイドバーに設置が完了します。あらかんたん。

更にテーマによっては画面をスクロールするとサイドバーが追尾するウェジェットが備わっているものもあり、当サイトので使用している有料テーマのAFFINGER5にもこのウェジェットが存在しますのでコチラに設定してみました。

目次に使われているcssを確認する

事前準備としてサイドバーウェジェットに組み込まれているTOC+のcssのID属性を確認します。
「#toc-widget-○」というIDが振られているはずなのですが、〇のところに入る数字がテーマ内のサイドバーに存在しているウェジェットの数によって変わります。

ブラウザーで簡単に確認できるので、確認しましょう。
(うちのサイトでは#toc-widget-5となっていたので5で説明します。)

Table-of-Contents-Plusサイドバーカスタム3

(例)chromeでの要素の検証画面

ブラウザでcss要素を確認する方法
■chromeブラウザの場合
画面で右クリック→メニューの検証→開いた画面の左上にある矢印ボタン(画像参照)をクリックして目次にマウスを合わせる。
■Edgeブラウザの場合
画面で右クリック→開発者ツールで調査する→矢印ボタン(画像参照)をクリックで目次にマウスを合わせる。
■Firefoxブラウザの場合
画面で右クリック→要素を調査→矢印ボタン(画像参照)をクリックで目次にマウスを合わせる。
【関連記事】Webページに使われているCSSやHTMLをブラウザで確認する方法!Chrome、Edge、Firefoxの開発ツール。
目次にマウスを持っていき「#toc-widget-○」という項目を確認しましょう。
分からん!という方は「#toc-widget-○」の〇の数字を1~10位まで増やしていって目次の見た目が変更されたら当たりという力業でも可能だと思います。

style.cssにcssコードを追加する

目次に使用されているIDが確認できたら早速カスタムしてみましょう!
Table of Contents Plusサイドバーカスタム4まず管理画面左側のメニューから
外観 > テーマエディター
を開きます。FTPで子テーマのstyle.cssを開いても可。
Table-of-Contents-Plusサイドバーカスタム5style.css内の任意の個所に次のコードを追加。
※「#toc-widget-5」の5は先ほど確認した番号に合わせてください。

/* サイドバー目次の設定 */
#toc-widget-5 a{
color: #000000;
font-size: medium;
text-decoration: none;
display: block;
margin-bottom: 10px;
}
#toc-widget-5 a:hover{
color: #4682b4
}

セレクタを調べたところ当サイトではTable of Contents Plusを使いサイドバーに設置した目次の項目に「#toc-widget-5」というIDが振られておりましたので、こちらの中のaタグにcssスタイルを当てて調整します。

フォントの色とサイズを調整、text-decoration:none;でリンクの下線を非表示に、その他マージンなどを調整して各項目の隙間を広げてます。

内容は適宜サイトに合ったものに変更してくださいね★

Table of Contents Plusサイドバーカスタム6更にa:hoverを使ってマウスオンした時に文字が青色が変わるように設定し、目次の項目がリンクであり、クリックできることを分かりやすくしました。

どの目次を読んだのか分かりやすくするために、クリック後に文字色を訪問済みの紫色などに変更したい場合は下記を追加。

#toc-widget-5 a:visited {
color: #551A8B;
}

コチラは分かりやすいのですが、少しくどいので却下しました。

ちなみにTable of Contents Plusの設定画面にある「階層表示」と「番号振り」の両方にチェックを入れてしまうとサイドバーが見にくくなってしまうので、番号振りのみチェックしてます。

まとめ

TOC+でサイドバーに導入した目次の見た目を少しだけ改善する方法のご紹介でした。
もっとCSSに拘ればさらに見やすい目次が作れますね!

今更気が付いたのですが、AFFINGER5ってビジュアルエディタ内の「タグ > その他のパーツ」の中にTOC+のショートコードを追加するものまで備わっているんですね。
Table-of-Contents-Plusサイドバーカスタム7

-Wordpress
-

© 2021 ソロ学