ちょっとおしゃれなボックス型のメニューをサイドバーに設置してみました。
アイコンは、FontAwesome4、FontAwesome5より選択して入力します。また、アイコンの代わりに画像を使用することもできるので、自由にカスタマイズが楽しめます。ボックスメニューの設定と使い方を説明します。
![WordPress Cocoon ボックスメニューの完成図](https://gungii.com/wp/wp-content/uploads/2021/11/ccbm01.jpg)
Cocoonボックスメニューの設定と使い方(動画)
「Cocoonボックスメニューの設定と使い方(動画)」は、こちら
Cocoonボックスメニューの作成
アイコンのフォント設定
Cocoonでは、 Font Awesome4、Font Awesome5のアイコンフォントをどちらにするかを設定できます。アイコンを使用する時には設定を確認しておきましょう。
「全体」タブの選択
![WordPress Cocoon アイコンのフォント設定の画面推移](https://gungii.com/wp/wp-content/uploads/2021/11/ccbm11.jpg)
サイトアイコンフォントの選択
画面をスクロールして、サイトアイコンフォントの項目を探して、アイコンフォントを選択します。FontAwesome5がお薦めです。
![WordPress Cocoon サイトアイコンフォントの選択画面](https://gungii.com/wp/wp-content/uploads/2021/11/ccbm12.jpg)
選択後は、「変更をまとめて保存」をクリックします。
新規メニューの作成
ボックスメニューを使用するには、WordPressでメニューを作成して、ウィジェットのボックスメニューをサイドバー等に挿入して使用します。
メニューの選択
WordPressの管理画面の外観からメニューを選択して、新しくメニューを作成します。
![WordPress Cocoon 新規メニューの作成ボタン](https://gungii.com/wp/wp-content/uploads/2021/11/ccbm21.jpg)
メニュー名の入力
ここでは、わかりやすく「ボックスメニュー」としました。
![WordPress Cocoon メニュー名の入力画面](https://gungii.com/wp/wp-content/uploads/2021/11/ccbm22.jpg)
表示オプションの設定
メニューを作成したら「表示オプション」から「CSSクラス」と「説明」を有効にしておきます。
![WordPress Cocoon 表示オプションの設定画面](https://gungii.com/wp/wp-content/uploads/2021/11/ccbm23.jpg)
メニュー項目の追加
「メニュー項目を追加」から作成したいメニューを選択していきます。
![WordPress Cocoon メニューの選択画面](https://gungii.com/wp/wp-content/uploads/2021/11/ccbm24.jpg)
個別メニューの設定
個々のメニューに対して「タイトル(ナビゲーションラベル)」,「アイコン(CSS class)」,「サブキャプション(説明)」を入力します。
ここでは、「ホーム」メニューの設定について説明しますので、「WordPress」~「サーバー」メニューについては、同様に設定してください。
![WordPress Cocoon 個別メニューの設定画面](https://gungii.com/wp/wp-content/uploads/2021/11/ccbm25.jpg)
- ナビゲーションラベル
ナビゲーションラベルはメニュータイトルになります。 - CSS class(オプション)
Font Awesome4、Font Awesome5より選択したアイコンのクラスを入力します。 - 説明
サブキャプションです。
CSS class(オプション)の検索
Font Awesome5でアイコンを設定する場合は、アイコンページからアイコンを選択します。
![アイコンの一覧画面](https://gungii.com/wp/wp-content/uploads/2021/11/ccbm26.jpg)
スクロールして、アイコンを選択します。
![アイコンの選択画面](https://gungii.com/wp/wp-content/uploads/2021/11/ccbm27.jpg)
アイコンのクラス名のコピー
アイコンを選択すると、個別ページが表示されますので、アイコンのクラス名をコピーします。
![アイコンの個別ページ](https://gungii.com/wp/wp-content/uploads/2021/11/ccbm28.jpg)
CSS class(オプション)に張り付けると<i class=”fas fa-home”>と貼られるのでクラス名のみ(fas fa-home)で、不要な箇所は削除します。
![WordPress Cocoon CSS class(オプション)の入力項目](https://gungii.com/wp/wp-content/uploads/2021/11/ccbm29.jpg)
メニューの保存
個別メニューの設定が全て終わりましたら、「メニューの保存」をクリックします。
![WordPress Cocoon 「メニューの保存」ボタン](https://gungii.com/wp/wp-content/uploads/2021/11/ccbm30.jpg)
Cocoonボックスメニューの設置
サイドバーに追加
ウィジェットの追加
![WordPress Cocoon ウィジェットの追加画面遷移](https://gungii.com/wp/wp-content/uploads/2021/11/ccbm41.jpg)
「ボックスメニュー」の選択
メニューで設定した「ボックスメニュー」を選択します。
![WordPress Cocoon メニュー名の選択画面](https://gungii.com/wp/wp-content/uploads/2021/11/ccbm42.jpg)
サイドバーの確認
サイドバーに設置されました。
![WordPress Cocoon ボックスメニュー完成画面](https://gungii.com/wp/wp-content/uploads/2021/11/ccbm43.jpg)
Cocoonボックスメニューのカスタマイズ
アイコンの色の変更
変更CSSの確認
Cocoon フォーラムで「わいひら」さんが、アイコンや、ホバー枠の色を変更するcssを記述されているのでそちらを使用して変更します。
![CSSのソース表示画面](https://gungii.com/wp/wp-content/uploads/2021/11/ccbm51.jpg)
注意:
ボックスメニューのアイコンの色は、「キーカラーを変更すると、色が反映される」とCocoonのボックスメニューの解説で記載されていますが、キーカラーを変更すると、サイト全体の色も変更となりますので、CSSで変更します。
子テーマのCSSの変更
CSSの表示
![WordPress Cocoon 子テーマのCSSの表示画面](https://gungii.com/wp/wp-content/uploads/2021/11/ccbm52.jpg)
CSSの変更
![WordPress Cocoon CSS変更のソース表示画面](https://gungii.com/wp/wp-content/uploads/2021/11/ccbm53.jpg)
留意:
ボックスメニューも複数作成できますので、それぞれのボックスメニューでアイコンの色を変える場合は、メニュー作成時のアイコンフォントのクラス名を入力した箇所に、任意のクラス名を追加して、そのクラス名で子テーマCSSで色を指定します。
<メニューにクラス名を追加>
![WordPress Cocoon ウィジェットの設定画面](https://gungii.com/wp/wp-content/uploads/2021/11/ccbm54.jpg)
<CSSの追記>
子テーマのcssへ追記して任意のclass名で色を記述します。
![CSS変更のソース表示画面](https://gungii.com/wp/wp-content/uploads/2021/11/ccbm55.jpg)