【Cocoon】目次をカスタマイズする

目次

WordPressテーマ Cocoonで使われている「目次」のカスタマイズについてまとめてみました。

テーマCocoonの目次

これまでWordPressテーマ Simplicity2で構築されているMASAa.blog(https://wp.masaa.me/)の流れで、MASAa.netでも目次生成プラグインとして「Table of Contents Plus」を使っていました。

WordPressテーマ Cocoonでは目次機能が備わっているので、今回MASAa.netの目次を「Table of Contents Plus」プラグインからWordPressテーマ Cocoonの目次機能に切り換えることにしました。

WordPressテーマ Cocoonで使われている「目次」は次の様になっています。

非常にシンプルな目次です。

これまで「Table of Contents Plus」プラグインで目次をカスタマイズして使ってきたため、以前の目次と比べると見た目の差がかなり有ります。

目次のカスタマイズ

シンプルさを残しつつも、目次をサイトに有ったデザインに変更するカスタマイズを行います。

カスタマイズ内容

「目次」のカスタマイズは、下記の通りです。

このカスタマイズ内容を「スタイルシート(style.css)」に追記します。

/*****************************
** ■目次カスタマイズ
*****************************/
.toc {
  border: 2px solid #fe619a; /*全体の枠線の色*/
  font-size: 14px; /*フォントサイズ*/
  line-height: 1.5; /*行の高さ指定*/
  padding: 0;
  margin-top: 3em; /*目次上の空間*/
  margin-bottom: 1em; /*目次下の空間*/
  min-width:65%; /*目次横幅*/
  border-radius: 6px;/*角丸コーナー*/
  background: #fff9fc; /*背景カラー*/
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3); /*シャドー（影）*/
}
@media screen and (max-width: 1030px){
  .toc {
    min-width:100%; /*モバイル時の目次横幅*/
  }
}
.toc-title {
  background: #fe619a; /*目次タイトル背景カラー*/
  color: #fff; /*目次タイトルフォントカラー*/
  font-size: 16px; /*目次タイトルフォントサイズ*/
  text-align: center; /*目次タイトル中央寄せ*/
  padding: 6px 16px;
  font-weight: bold; /*文字強調*/
  font-style: oblique; /*斜体フォント*/
}
.toc-title::before {
  font-family: FontAwesome;
  content: '\f0f6'; /*目次タイトルのアイコン指定*/
  margin-right: 0.3em;
  font-weight: 500; /*アイコンの太さ*/
  font-style: normal; /*通常フォント*/
}
.toc-content {
  padding: 6px;
}
.toc-content li a:hover {
  text-decoration:none; /*選択時装飾無し*/
  background: #ffd3ee; /*選択時の背景カラー*/
  transition: all 0.8s ease; /*ふわっと変化するアニメーション*/
}
.toc ul.toc-list>li, .toc ol.toc-list>li {
  margin-top: 0.4em; /*h2の上側の空間*/
}
.toc ul.toc-list>li>a, .toc ol.toc-list>li>a {
  border-bottom: 1px solid #fe619a; /*h2のアンダーラインの太さとカラー*/
  font-weight: bold;
}
.toc ul li a, .toc ol li a {
  display: block;
  border-bottom: 1px dotted #fe619a; /*h3～h6のアンダーラインの太さとカラー*/
  margin-left: -20px; /*アンダーライン調整*/
  padding-left: 20px; /*アンダーライン調整*/
}

カスタマイズ後の目次

今回のカスタマイズによって、WordPressテーマ Cocoonで使われている「目次」は、次のようになりました。

今回のカスタマイズによって、目次がサイト全体とマッチするようになり違和感が無くなりました。

最後に

今回「Table of Contents Plus」プラグインの目次からWordPressテーマ Cocoonの目次機能に切り換えた訳ですが、プラグインは管理やサイトスピードの面から一つでも少なくしたいので、プラグインを一つ無くすことが出来たのは良かったでしょう。

今回の目次は、シンプルなデザインなのでどのサイトでも合うと思います。