前回”目次プラグイン”のマニュアルを作りました。

「Easy Table of Contents」は、なかなか面白い使い方ができるので、一度上記に目を通しておくといい発見があるかもしれません。
その中で、PCのサイドバーに”目次”を固定できる機能があります。そのままだと微妙なので、CSSで見た目を整えてみました。

Before

After
コピペ用のコード・自分でカスタマイズ用のコード両方あるのでお好きな方でどうぞ。
目次・読みたい所へタップできます
Easy Table of Contents固定目次用CSS
当サイトで使用しているコードです。これでいいやって人はお使いください。
style.css#ezw_tco-2 .ez-toc-title-toggle { display: none; } .widgettitle .ez-toc-title { text-align: center; padding: 2px; } .widget ul li a:hover { color: #4285f4; } .ez-toc-widget-container ul { font-size: 15px; } .ez-toc-widget-container li { line-height: 2; } #ezw_tco-2.widget h4+* { max-height: 180px; overflow-y: scroll; padding: 5px 0; white-space: normal; } #ezw_tco-2.widget h4+*::-webkit-scrollbar { -webkit-appearance: none; width: 10px; border-left: solid 1px #eee; } #ezw_tco-2.widget h4+*::-webkit-scrollbar-thumb { background-color: #aaa; } #ezw_tco-2 li :before { color: #444; font-family: YuGothic, "Yu Gothic", "Hiragino Sans", "ヒラギノ角ゴシック", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif; }

赤字コード
は「SANGOユーザー向け」
「SANGO」は、サイドバーのliタグ子要素に、テーマ独自のCSSが適用されているので、調整してね。

Before

After
Easy Table of Contents固定目次のCSS解説
では、コードを分解して解説します。細かい調整をしたい方はご活用ください。

先頭の赤字コード
は、上記にチェックした場合、サイドバーの目次にも表示されてしまうので、それを消すコードです。
折りたたみボタンを使わない人は不要。
style.css/* サイドバーの折りたたみボタンを消す */ #ezw_tco-2 .ez-toc-title-toggle { display: none; } /* 目次タイトル前にアイコン */ #ezw_tco-2 .ez-toc-title:before{ font-family: "Font Awesome 5 Free"; content: "\f0ca"; padding-right: 6px; } /* タイトルの調整 */ .ez-toc-title { text-align: center;/* タイトルを真ん中へ */ padding: 2px;/* 内側の余白を調整 */ } /* h2見出しの調整 */ .ez-toc-widget-container ul { font-size: 15px; } /* h3見出しの調整 */ .ez-toc-widget-container ul li ul li a { font-size: 15px; } /* h2とh3見出しにマウスを乗せた時(フォントカラーや背景色を入れてみよう) */ .ez-toc-widget-container ul:hover,.ez-toc-widget-container ul li ul li a:hover { } /* 見出しの行間調整 */ .ez-toc-widget-container li { line-height: 2; } /* 目次外枠サイズとスクロールバーの調整 */ #ezw_tco-2.widget h4+* { max-height: 180px;/* 目次の高さ */ overflow-y: scroll;/* スクロールバーを設置 */ padding: 5px 0;/* 目次ボックスの内側余白 */ white-space: normal;/* 自動改行 */ } #ezw_tco-2.widget h4+*::-webkit-scrollbar { -webkit-appearance: none; width: 10px;/* スクロールバーの横幅 */ border-left: solid 1px #eee; /* スクロールバーの左側に線を引く */ } #ezw_tco-2.widget h4+*::-webkit-scrollbar-thumb { background-color: #aaa;/* スクロールバーのカラー */ } /* 各見出しに下線を引きたい */ #ezw_tco-2 .ez-toc-list li a { border-bottom: 1px solid #ddd; }

青字セレクタ
のイメージはこんな感じ。
上記は「下線」ですが、点線にしたりいろいろできます。詳しくはこちら

Easy Table of Contents固定目次をシンプルにするCSS
先ほどは、一般的な固定目次で使いそうなコードを解説しました。

今度は背景色や連番を抜いて、文字だけのバージョンです。アイコンも外しちゃっていいかもですね。
style.css/* 目次タイトルの背景消しとフォントカラー */ #ezw_tco-2 .widgettitle { background: none; color: #444; } /* 目次ボックス内の背景を消す */ #ezw_tco-2 { background: none; } /* 目次ボックス内の連番を消す */ #ezw_tco-2 .ez-toc-list li ::before { display: none; } /* 目次ボックス内に連番を残したい */ #ezw_tco-2 li :before { font-weight: normal; }

連番を残したい場合は、紫コード
を削除して、緑コード
を使用してください。バランスを取って「太字」→「細字」に変えてます。
あとは上で紹介したコードを応用してください。
Easy Table of Contents固定目次のCSS【まとめ】
好みの目次にできましたか?
サイドバーは幅が狭いので、フォントを気持ち小さめにすると、オシャレになりますよ。
次回は、記事内の目次CSSをいくつか書きますので、お楽しみに〜
追記:書きました。

いつも参考にさせていただいております。
カゲサイさんのように固定目次を表示させたいのですが、本ページに公開されているCSSはSANGO専用なのでしょうか・・・?
当方、Wordpressテーマ「JIN」を活用しているためか、コピペ(SANGO用部分を削除した上で)したのですが、特に変わらずうまくいきませんでした。
お手数をおかけしますが、ご教授いただけますと幸いです。
えむ様
コメントありがとうございます。
ありゃそれは失礼しました。
プラグイン用のCSSなので、テーマによる差異はないはずです。
2点だけご確認を。
・キャッシュ削除はされているか?

・プラグイン設定で以下のチェックが外れているか?
上記をご確認の上、うまくいかないのであればコピーしたコードを貼り付けてください。確認致します。