【Cocoon】目次のカスタマイズ③

INDEX

WordPressテーマ Cocoon
1. WordPressテーマ Cocoon 目次
目次カスタマイズ③
1. カスタマイズ内容
2. カスタマイズ後の目次
最後に

WordPressテーマ Cocoon

このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。

MASAa.net | 製品レビューとPCやWordPressに関する情報発信サイト

今回は、WordPressテーマ Cocoonでの「目次」のカスタマイズ③についてまとめてみました。

WordPressテーマ Cocoon 目次

WordPressテーマ Cocoonの「目次」については、これまで2度カスタマイズを行ってきました。

【Cocoon】目次の再カスタマイズ

WordPressテーマ Cocoonの「目次」については以前にもカスタマイズを行ってきました。今回「目次」に対して、PC以外の多くの端末（スマートフォン、タブレット）でも正常に表示される「目次」となるように改めてデザインを変更してみました。

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

目次を「Table of Contents Plus」プラグインからWordPressテーマ Cocoonの目次機能に切り換えることにしました。それに伴ってシンプルなデザインの目次をサイトにマッチするようにカスタマイズしてみました。

これまでのカスタマイズによって現在のWordPressテーマ Cocoonの「目次」のスタイルは次の様になっています。

数字からアイコン表示化などによって見やすい「目次」になっているのですが、更に見やすい「目次」を目指してカスタマイズ③としてまとめてみました。

目次カスタマイズ③

WordPressテーマ Cocoonの「目次」カスタマイズ③を行います。

カスタマイズ内容

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

「スタイルシート(style.css)」を開き、次のカスタマイズ内容を以前カスタマイズを行った箇所に上書きします。

/*****************************
** ■目次カスタマイズ
*****************************/
.toc {
  display: block;
  border: 2px solid #ff75a7!important; /*全体の枠線の色*/
  font-size: 14px; /*フォントサイズ*/
  line-height: 1.7; /*行の高さ指定*/
  padding: 0.5em 1.5em 1.2em 1.5em;
  margin-top: 4em; /*目次上マージン*/
  margin-bottom: 4em; /*目次下マージン*/
  margin-right: 8%; /*目次右マージン*/
  margin-left: 8%; /*目次左マージン*/
  border-radius: 10px;/*角丸コーナー*/
  background:linear-gradient(160deg, #ffddee, #fff)!important; /*グラデーション化*/
  box-shadow: 6px 6px 6px 0 rgba(0,0,0,0.3)!important; /*シャドー（影）*/
}
@media screen and (max-width: 1020px){
  .toc {
      padding: 0.4em 1em 1em 1em;
  }
}
.toc a { /*目次メニュー*/
  display: block;
  position: relative;
  padding: 3px 6px 0 6px;
  border-bottom: 1px dotted #fe619a; /*h2のアンダーラインの太さとカラー*/
}
.toc-title { /*目次タイトル*/
  background:linear-gradient(160deg, #ffddee, #fe619a, #fe619a, #ffddee); /*目次タイトル背景カラー*/
  border-radius: 18px;/*角丸コーナー*/
  margin-top: 1.2em; /*目次タイトル上マージン*/
  margin-bottom: -0.3em; /*目次タイトル下マージン*/
  color: #fff; /*目次タイトルフォントカラー*/
  font-size: 16px; /*目次タイトルフォントサイズ*/
  text-align: center; /*目次タイトル中央寄せ*/
  padding: 1px 0;
  font-weight: bold; /*文字強調*/
  font-style: oblique; /*斜体フォント*/
  border: 2px solid #fe619a; /*全体の枠線の色*/
}
.toc-title:hover { /*文字タイトルホバー時*/
  background: #ffddee; /*目次タイトル背景カラー*/
  color: #f32469; /*目次タイトルフォントカラー*/
}
.toc-title::before { /*目次タイトルアイコン設定*/
  font-family: "Font Awesome 5 Free";
  content: '\f0cb'; /*目次タイトルのアイコン指定*/
  margin-right: 0.3em;
  font-size: 18px; /*フォントサイズ*/
  font-weight: 900; /*アイコンの太さ*/
  font-style: normal; /*通常フォント*/
}
.toc-content li a:hover {
  text-decoration:none; /*選択時装飾無し*/
  color:#ff005d; /*フォントカラー*/
}
.toc .toc-list ul, .toc .toc-list ol {
  padding-left: 1.2em;
  margin: 0;
}
.toc ul.toc-list>li>a, .toc ol.toc-list>li>a {
  display: block;
  border-bottom: 1px dotted #fe619a; /*h2のアンダーラインの太さとカラー*/
  font-size: 15px; /*フォントサイズ*/
  font-weight: bold;
  padding-top: 6px;
  padding-bottom: 1px;
  margin-left: -20px; /*アンダーライン調整*/
  padding-left: 20px; /*アンダーライン調整*/
  margin-right: -15px; /*アンダーライン調整*/
  padding-right: 15px; /*アンダーライン調整*/
}
.article .toc-list li {
  font-size: 15px; /*フォントサイズ*/
  font-weight: 700; /*文字強調*/
}
.article .toc-list > li li {
  font-size: 14px; /*フォントサイズ*/
/*  list-style: none; /*H3以下目次ナンバー非表示*/
  font-weight: 700; /*文字強調*/
}
.toc-content li::marker {
  color:#000;
}
.toc-content li:hover::marker {
  color:#ff005d;
  font-style: oblique;
}

続いて、同じく「スタイルシート(style.css)」に次のカスタマイズ内容を追記します。

/*****************************
** ■目次ホバーエフェクト化のカスタマイズ
*****************************/
.toc-content li a { /*ホバーエフェクト化*/
  position: relative;
}
.toc-content li a::after {
  position: absolute;
  color: rgba(255,255,255,1);
  bottom: -3px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  background: #fe619a;
  transform: scaleX(0);
  transform-origin: left top;
  transition: transform 0.3s;
  border-radius: 2px;/*角丸コーナー*/
}
.toc-content li a:hover::after {
  transform: scaleX(1);
  transform-origin: left top;
  transition: transform 0.3s;
}