漫画・小説・ビジネス書なんでも最大100冊分が半額

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

サイドバー

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

目次プラグインの設定方法WordPressの目次プラグイン・Easy Table of Contentsの設定と使い方

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

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

補足

当サイトテーマ「SANGO」や別テーマでも「Easy Table of Contents」に対し、テーマ側でCSSが用意されていることがあります。

その場合は、以下のチェックを外してください。

目次のCSS設定
目次サイドバーBefore

Before

目次サイドバーAfter

After

コピペ用のコード・自分でカスタマイズ用のコード両方あるのでお好きな方でどうぞ。

カゲサイの固定目次用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が適用されているので、調整してね。

固定目次liタグ子要素

Before

固定目次liタグ子要素カスタム

After

固定目次を自分でカスタマイズしたい人用の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線デザインborder線の種類別ーHTML&CSSデザイン14選

固定目次を鬼シンプルにする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;
}
固定目次の連番アリ

連番を残したい場合は、紫コードを削除して、緑コードを使用してください。バランスを取って「太字」→「細字」に変えてます。

あとは上で紹介したコードを応用してください。

固定目次のCSS【まとめ】

好みの目次にできましたか?

サイドバーは幅が狭いので、フォントを気持ち小さめにすると、オシャレになりますよ。

次回は、記事内の目次CSSをいくつか書きますので、お楽しみに〜

追記:書きました。

Easy Table of Contents・オシャレな目次のCSSカスタマイズ

2 COMMENTS

アバター えむ

いつも参考にさせていただいております。

カゲサイさんのように固定目次を表示させたいのですが、本ページに公開されているCSSはSANGO専用なのでしょうか・・・?

当方、Wordpressテーマ「JIN」を活用しているためか、コピペ(SANGO用部分を削除した上で)したのですが、特に変わらずうまくいきませんでした。

お手数をおかけしますが、ご教授いただけますと幸いです。

返信する
カゲオ カゲオ

えむ様
コメントありがとうございます。

ありゃそれは失礼しました。
プラグイン用のCSSなので、テーマによる差異はないはずです。

2点だけご確認を。

・キャッシュ削除はされているか?
・プラグイン設定で以下のチェックが外れているか?
目次のCSS設定

上記をご確認の上、うまくいかないのであればコピーしたコードを貼り付けてください。確認致します。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です