Cocoonボックスメニューのアイコンと枠の色の変更

こんにちは、ハナです。

Cocoonでボックスメニューを作成したら、ボックスメニューのアイコンの色を変えたいと思ったことはありませんか？

デフォルトでは色がオレンジになりますが、好きな色に変更してみたいと思います。

ボックスメニューのアイコンの色の設定
1. CSSによるアイコンの色を変更するには
ボックスメニューごとに色を変えるには

ボックスメニューのアイコンの色の設定

Cocoonの公式サイトでは「キーカラーを変更すると、色が反映されます」とあります。

キーカラーの変更でアイコンの色を変えようとすると、キーカラーは、サイト全体のポイントとなる部分に適用される背景色を指定しているので、そちらまで変更することになります。

今回は、デフォルト動作のようで、カスタマイズもなさそうなので、大丈夫そうかなと思いました。
アイコンや、ホバー枠の色を変更するには、以下のCSSを子テーマのstyle.cssに追記すればできるかと思います。
ボックスメニューのキーカラーを変更したい | カスタマイズ相談 | Cocoon フォーラム

Cocoon フォーラムで「わいひら」さんが、アイコンや、ホバー枠の色を変更するcssを記述されているのでそちらを使用して変更したいと思います。

CSSによるアイコンの色を変更するには

Cocoon フォーラムに記述されている下記コードの、#2ca9e1のカラーコードを好みの色に変更します。

.box-menu-icon{
  color: #2ca9e1;
}

.box-menu:hover {
    box-shadow: inset 2px 2px 0 0 
#2ca9e1,2px 2px 0 0 #2ca9e1,2px 0 0 0 #2ca9e1,0 2px 0 0
    #2ca9e1;
}

子テーマのstyle.cssへの追記

アイコンの色、ホバー枠の色のCSSは下記の箇所です。
変更したい箇所のみ子テーマのstyle.cssへ記述してください。