SWELLで特化サイト作ってみた

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

サイドバー

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

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

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

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

補足

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

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

目次のCSS設定

目次サイドバーBefore

Before

目次サイドバーAfter

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が適用されているので、調整してね。

固定目次liタグ子要素

Before

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

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線デザイン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; }
固定目次の連番アリ

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

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

Easy Table of Contents固定目次のCSS【まとめ】

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

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

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

追記:書きました。

Easy Table of Contentsのカスタマイズ・CSSで目次をデザインする

2 COMMENTS

アバター えむ

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

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

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

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

コメントを投稿する
カゲオ カゲオ

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

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

2点だけご確認を。

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

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

コメントを投稿する

カゲオ へ返信する コメントをキャンセル

\最強のSEO対策ツール・Rank Trackerを解説/