TOC+でサイドバーに設置した目次のカスタム
そのまま使うとサイドバーの目次の項目がリンク文字特有の青色になっていたり、文字が小さかったり、各目次の隙間が少なかったりするので改善しました。
サイドバーに目次を追加する方法
まず初めにTable of Contents Plusプラグインを使ってサイドバーに目次を設置する方法のおさらいです。
プラグインを有効化するとウィジェットの中に「TOC+」というウェジェットが追加されていますので、こちらをサイドバーにドラッグ＆ドロップするとサイドバーに設置が完了します。あらかんたん。
更にテーマによっては画面をスクロールするとサイドバーが追尾するウェジェットが備わっているものもあり、当サイトので使用している有料テーマのAFFINGER5にもこのウェジェットが存在しますのでコチラに設定してみました。
目次に使われているcssを確認する
事前準備としてサイドバーウェジェットに組み込まれているTOC+のcssのID属性を確認します。
「#toc-widget-○」というIDが振られているはずなのですが、〇のところに入る数字がテーマ内のサイドバーに存在しているウェジェットの数によって変わります。
ブラウザーで簡単に確認できるので、確認しましょう。
(うちのサイトでは#toc-widget-5となっていたので5で説明します。)
(例)chromeでの要素の検証画面
■chromeブラウザの場合
画面で右クリック→メニューの検証→開いた画面の左上にある矢印ボタン(画像参照)をクリックして目次にマウスを合わせる。
■Edgeブラウザの場合
画面で右クリック→開発者ツールで調査する→矢印ボタン(画像参照)をクリックで目次にマウスを合わせる。
■Firefoxブラウザの場合
画面で右クリック→要素を調査→矢印ボタン(画像参照)をクリックで目次にマウスを合わせる。
【関連記事】Webページに使われているCSSやHTMLをブラウザで確認する方法！Chrome、Edge、Firefoxの開発ツール。
分からん！という方は「#toc-widget-○」の〇の数字を1～10位まで増やしていって目次の見た目が変更されたら当たりという力業でも可能だと思います。
style.cssにcssコードを追加する
目次に使用されているIDが確認できたら早速カスタムしてみましょう！
まず管理画面左側のメニューから
外観 ＞ テーマエディター
を開きます。FTPで子テーマのstyle.cssを開いても可。
style.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;でリンクの下線を非表示に、その他マージンなどを調整して各項目の隙間を広げてます。
内容は適宜サイトに合ったものに変更してくださいね★
更にa:hoverを使ってマウスオンした時に文字が青色が変わるように設定し、目次の項目がリンクであり、クリックできることを分かりやすくしました。
どの目次を読んだのか分かりやすくするために、クリック後に文字色を訪問済みの紫色などに変更したい場合は下記を追加。
#toc-widget-5 a:visited {
color: #551A8B;
}
コチラは分かりやすいのですが、少しくどいので却下しました。
ちなみにTable of Contents Plusの設定画面にある「階層表示」と「番号振り」の両方にチェックを入れてしまうとサイドバーが見にくくなってしまうので、番号振りのみチェックしてます。
まとめ
TOC+でサイドバーに導入した目次の見た目を少しだけ改善する方法のご紹介でした。
もっとCSSに拘ればさらに見やすい目次が作れますね！
今更気が付いたのですが、AFFINGER5ってビジュアルエディタ内の「タグ ＞ その他のパーツ」の中にTOC+のショートコードを追加するものまで備わっているんですね。
