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

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

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

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

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

カスタマイズ方法

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

サンプルコード(1)

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

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

サンプルコード(2)

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

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

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