目次の外枠にあるボーダーの色が変わらない?設定方法【Cocoon】

スポンサーリンク

Cocoonの目次をカスタマイズしている時に「border-color」を指定したのにボーダーの色が変わらない!?という問題がありました。

サイトに馴染んだ色が自動的に適用されていたので、そこまで違和感が無かったのですが。。今回はその辺の理由や変更方法を纏めてみました。

目次のボーダーカラーは「キーカラー」

目次のボーダーカラーはCocoonのサイトキーカラーが適用されています。特別にカスタマイズしていなければ、その色になっているはずです。

Cocoonの設定
  1. Cocoon設定
  2. 全体
  3. キーカラー
ここで設定した色になっています

カスタマイズ方法

サイトキーカラーを変更する手もありますが、そうするとサイト内の他の色も変わってしまいます。目次のボーダーカラーだけを好きな色に指定する方法は以下のとおりです。

サンプルコード(1)

/*目次*/
.toc {
  border-color: #6ec4db !important;
}

!important」を入れないと適用されないのでご注意ください。

サンプルコード(2)

/*目次*/
.toc {
  border: 1px #6ec4db solid !important;
}

色のついでに線の太さを変えるコード。

「!important」を入れない場合、線の太さは反映されますが色は変わりません。

Comment

タイトルとURLをコピーしました