Cocoonのボックスメニューウィジェットの枠線を消したい

Cocoonのボックスメニューウィジェットは回遊率を上げる（直帰率を下げる）ための便利なウィジェット。
使っている方も多いと思います。

本稿ではボックスメニューウィジェットの枠線を消すcssカスタマイズを紹介します。

WRITTEN BY 天満川鈴

見本

適用前

適用後

コード

ボックスメニューを１つしか使っていない場合は、次のコードを子テーマのstyle.cssに記述してください。

.box-menu{
box-shadow:none;
}

ボックスメニューを複数使っている場合は以下の通りです。

まず、ChromeのF12を押します。
当該ボックスメニューをクリックして、割振られているIDの数字を調べます。

次のコードを子テーマのstyle.cssに記述してください。

#box_menu-（調べた番号） .box-menu{
box-shadow:none;
}

まとめ

これを知っていると、ボックスメニューの使い勝手がさらに広がると思います
ぜひお試しを！

WRITTEN BY

天満川 鈴

未経験からWEB業界に入り、現在はWEBディレクターとして実務に従事。 要件整理・導線設計・コンテンツ構成などを学びながら、日々改善を重ねています。 AIを活用したコンテンツ制作・効率化を強みとし、プロンプト設計を含めた制作フローの最適化にも取り組んでいます。
本サイトでは、WordPressやサイト制作に関する試行錯誤・検証内容を中心に発信。 技術検証の一環として、KUSANAGI公式サイトにて記事を2回紹介いただきました。

X 🦋 CodePen Amazon

RECOMMENDED INFRASTRUCTURE

私はConoHa以外を勧めない。

2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。

レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。

私がConoHaを使い続ける、嘘偽りない理由です。

公式サイトで詳細を見る