Cocoonのボックスメニューをカスタマイズ（色変更する方法）

Cocoonにはデフォルトで「ボックスメニュー」という、カジュアルで見やすいウィジェット機能がついています。

本記事では、Cocoonのボックスメニューの色を変更する方法を解説していきます。

ボックスメニューについてもっと知りたい方は、以下に公式のリンクを貼っておきますのでお読みください。

参考：「ボックスメニュー」ウィジェットの使い方 

完成イメージ

標準からかなりかわいいのですが、ピンクとミントカラーでサイト全体の雰囲気に合わせた印象にしました。

ハバーした時のアニメーションもかわいいおすすめポイントです。

Cocoonのボックスメニューをカスタマイズする手順

手順といっても、カスタマイズ用のコードを「追加CSS」にコピペするだけです。

「追加CSS」の場所は、管理画面→「外観」→「カスタマイズ」を開いた1番下にあります。

詳しくは以下の記事で写真つきで解説しているので、初心者の方は参考にしてください。

参考：【Cocoon】SNSシェアボタンのカスタマイズ（コピペOK）

カスタマイズ用CSSコード

/* Box-Menu */
.box-menu{
	color: inherit;
	box-shadow: inset 1px 1px 0 0 #c6eeee, 1px 1px 0 0 #c6eeee, 1px 0 0 0 #c6eeee; /* 枠線の色 */
}
.box-menu-icon {
    color: #ffc8fb !important; /* アイコンの色 */
}
.box-menu:hover {
    box-shadow: inset 2px 2px 0 0 #ef97e8, 2px 2px 0 0 #ef97e8, 2px 0 0 0 #ef97e8, 0 2px 0 0 #ef97e8 !important; /* ハバー時の枠線の色 */
}