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; /* ハバー時の枠線の色 */
}