「Table of Contents Plus」で作った目次をカスタマイズする

2022年5月15日 2022年5月15日 4分51秒

1 「Table of Contents Plus」で作った目次をカスタマイズする
- 1.1 設定
- 1.2 CSS

「Table of Contents Plus」で作った目次をカスタマイズする

他のサイトとの違いを出すために「Table of Contents Plus」で作った目次をカスタマイズしたい場合があると思います。

今回は以下のようなカスタマイズをする方法です。

設定

CSSを設定する前に、ダッシュボードの左側のナビゲーションより、「設定 - TOC+」をクリックして設定を開きます。

その中の「上級者向け」を表示して、「CSSファイルを除外」にチェックをつけておきます。

CSS

CSSは、style.cssへ追記してください。

#toc_container {
  width: 100% !important;
  border: 5px solid rgba(93, 138, 193, 0.8) !important;
}

p.toc_title {
  position: relative;
  width: 97%;
  text-align: left !important;
  font-size: 18px !important;
  line-height: 30px;
  color: #fff;
  background-color: rgb(93, 138, 193) !important;
  border-radius: 10px;
  margin: 10px auto !important;
  padding-left: 10px !important;
}

p.toc_title::before {
  content: "\f03a";
  font-family: "FontAwesome";
  margin-right: 10px;
}

span.toc_toggle {
  position: absolute;
  top: 3.5px;
  right: 40px;
  font-size: 13px;
  padding: 2px 5px !important;
  background-color: #fff;
  line-height: 20px;
}

span.toc_toggle a {
  color: rgb(70, 147, 245);
  text-decoration: none;
}

ul.toc_list {
  list-style: none;
  margin-bottom: 10px !important;
}

ul.toc_list ul {
  list-style: none;
}

ul.toc_list a {
  color: rgb(70, 147, 245);
  text-decoration: none;
  font-size: 16px !important;
}

span.toc_number {
  position: relative;
}

#toc_container .toc_list > li ul {
  padding-left: 15px;
  margin: 0;
}

span.toc_depth_1::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -4.5px;
  width: 20px;
  height: 20px;
  background-color: rgba(93, 138, 193, 0.4);
  border-radius: 50%;
}

span.toc_depth_2::before {
  content: "\f0da";
  font-family: fontAwesome;
  margin-right: 7px;
  vertical-align: middle;
  opacity: 0.5;
}

span.toc_depth_3::before {
  content: "\f105";
  font-family: fontAwesome;
  margin-right: 7px;
  vertical-align: middle;
  opacity: 0.5;
}

Font Awesomeのアイコンを使用しています。CDNでCSSを読み込むようにしてください。