当ブログでは、Cocoonを初期状態からカスタマイズする方法(コピペ可)をまとめています。
今回は、WordPressのCocoonテーマで、サイドバーにボックスメニューを追加する方法を紹介します。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/Icon-Frog.png)
難しそうだけど、できるかな?
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/Icon-Whale.png)
Cocoonのボックスメニューは簡単に作れるよ!
ボックスメニューとは?
ボックスメニューは、サイドバーでよくみる下の画像のようなメニューです。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/boxmenu-1-1-1024x336.png)
ボックスメニューはサイドバーだけでなく、投稿記事の上部やフッターなど様々な場所に配置することができます。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/boxmenu-2-1-1024x336.png)
ボックスメニューを使うメリットは以下のとおりです。
- アイコンがかわいい
- テキストリンクより目立つ
- 押しやすい
ボックスメニューを追加する方法
さっそくボックスメニューをつくってみましょう。
ボックスメニューにいれる項目を作成する
ボックスメニューを作るために、まずは項目を作成します。
カテゴリーや固定ページを項目にする場合が多いでしょう。
カテゴリーの作成については「【Cocoon】カテゴリー・タグの作成とカスタマイズ|分け方のコツ」の記事にまとめています。
ボックスメニューの項目数は、サイドバーに設置する場合は偶数にすると見栄えがいいです。
ボックスメニューを作成する
項目が用意できたら、ボックスメニューを作成します。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/boxmenu-6-1024x450.png)
【外観】→【メニュー】をクリックします。
【新しいメニューを作成しましょう】を選択し、【メニュー名】を入力して【メニューを作成】をクリックします。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/boxmenu-7-1-1024x450.png)
左の項目から追加したい項目にチェックを入れ、【メニューに追加】をクリックします。
追加した項目が右に表示されるので、ドラッグで順番を入れかえて【メニューを保存】をクリックします。
ボックスメニューをサイドバーに追加する
ボックスメニューをサイドバーに追加します。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/boxmenu-8-1-1024x448.png)
【外観】→【ウィジェット】を選択します・
ボックスメニューを追加したい場所にドラッグします。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/Icon-Whale.png)
今回はサイドバーに追加するよ!
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/boxmenu-9-1024x448.png)
【メニュー名】で作成したメニュー名の名前を選択します。
【メニュー名】の下にある【表示設定】では、選択したカテゴリーのときのみボックスメニューを表示させるような編集をすることができます。
アイコンを変更する
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/boxmenu-3-1.png)
アイコンを設定しない場合、すべて星のアイコンになっています。
アイコンを変更するなら、Font Awesomeアイコンを使うのが便利です。
Font Awesomeアイコンの使い方は「【Cocoon】Font Awesomeアイコンの使い方|表示されない理由とカスタマイズ」の記事にまとめています。
ボックスメニューのCSSカスタマイズ
ボックスメニューのCSSカスタマイズで、見た目をデザインしましょう。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/boxmenu-3-2.png)
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/boxmenu-5.png)
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/Icon-Whale.png)
カスタマイズ後の「WEB制作」はホバーしてる状態だよ!
アイコンカラーを変える
アイコンカラーを変えるCSSは以下のとおりです。
/* ボックスメニューアイコンの色を変える */
.box-menu-icon {
color: #a8bcc8; /*アイコンの色*/
}
初期のボックスメニューのアイコンカラーはCocoonのサイトキーカラーに依存します。
しかし、CSSを追加すればサイトキーカラー以外に変更できます。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/Icon-Clownfish.png)
CSSを使えば好きな色に変更できるよ!
背景を透明にする・枠線のシャドウを消す・枠線をつける
背景を透明にする・枠線のシャドウを消す・枠線をつけるCSSは以下のとおりです。
/* ボックスメニューのカスタマイズ */
.box-menu{
background: transparent; /* 背景を透明にする */
box-shadow: none; /* 枠線のシャドウを消す */
border:3px solid #a8bcc8; /* 枠線をつける */
}
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/Icon-Frog.png)
枠線をつけようとしても色が変わらないんだけど?
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/Icon-Clownfish.png)
最初からシャドウ設定があるからかも!?枠線のシャドウを消すCSSを入れてみて!
ホバー時のカスタマイズをする
ホバー時のカスタマイズをするCSSは以下のとおりです。
/* ボックスメニューのカスタマイズ */
.box-menu:hover{
background: #f4f7f7; /* 背景に色を付ける */
box-shadow: none; /* 枠線のシャドウを消す */
}
まとめ:Cocoonのボックスメニューは簡単につくれる!
Cocoonのボックスメニューは簡単につくることができます。
- ボックスメニューは様々な場所に配置することができる。
- ボックスメニューではFont Awesomeアイコンを使用する。
- ボックスメニューのアイコンカラーはCocoonのサイトキーカラーに依存するがCSSで変更可能
ボックスメニューを使っておしゃれなメニューを手に入れましょう。