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