Easy Table of Contents・サイドバーに固定する目次用CSS

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

Easy Table of Contentsの設定と使い方を完全解説【目次プラグイン】

「Easy Table of Contents」は、なかなか面白い使い方ができるので、一度上記に目を通しておくといい発見があるかもしれません。

その中で、PCのサイドバーに”目次”を固定できる機能があります。そのままだと微妙なので、CSSで見た目を整えてみました。

補足

当サイトテーマ「SANGO」や別テーマでも「Easy Table of Contents」に対し、テーマ側で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 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;	
}

青字セレクタのイメージはこんな感じ。

上記は「下線」ですが、点線にしたりいろいろできます。詳しくはこちら

border線の種類別ーHTML&CSSデザイン14選

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;
}