はじめに
外観→メニューで作成したメニューが、ウィジェットなどでどのように表示されるかをまとめます。
メニューの位置
外観→メニューで設定したメニューの位置が、どのように表示されるかをまとめます（図1参照）。
ヘッダーメニュー
表示幅＞1023pxの場合、グローバルナビゲーションメニューとして表示します（図2参照）。
Cocoon設定→モバイル→モバイルメニュー「トップメニュー」がオンの場合、表示幅≦1023pxのときに表示します（図3参照）。
ヘッダーモバイルメニュー
表示幅≦1023pxの場合、グローバルナビゲーションメニューとして表示します（図4参照）。
ヘッダーモバイルボタン
Cocoon設定→モバイル→モバイルメニュー「ヘッダーモバイルボタン」がオンの場合、表示幅≦1023pxのときに表示します（図5参照）。
フッターメニュー
フッターモバイルボタン
Cocoon設定→モバイル→モバイルメニュー「フッターモバイルボタン」がオンの場合、表示幅≦1023pxのときに表示します（図7参照）。
モバイルスライドインメニュー
ヘッダーモバイルボタンまたはフッターモバイルボタンに#menuを設定した場合に表示されるメニューを設定します。
表示幅≦1023pxのときに表示されます（図6参照）。
メニュー項目
外観→メニューで作成したメニューが、ウィジェットなどでどのように表示されるかをまとめます。
ウィジェットによっては、メニュー設定で入力が制限される項目があります（表1参照）。
| ウィジェット | ① | ② | ③ | ④ |
|---|---|---|---|---|
| おすすめカード | ● | ●（外部リンク用画像） | × | × |
| ナビカード | ● | ●（外部リンク用画像） | ●（リボン） | ●（スニペット） |
| ボックスメニュー | ● | ●（画像） | ●（アイコン） | ●（説明文） |
| ナビゲーションメニュー | ● | ●（title属性） | × | × |
●：入力可能 ✕：入力禁止
特に、Font AwesomeのCSSクラスをボックスメニュー以外のウィジェットに入力すると、表示が崩れる原因となりますので注意が必要です。
おすすめカード、ナビカード
- 外部URL（カスタムリンク）の画像設定
カスタムリンクで外部URLを設定した場合、デフォルトでは「NO IMAGE」画像が表示されます。
任意の画像を表示させたい場合は、メニューのタイトル属性に画像URLを入力してください。
- カテゴリー・タグの画像設定
カテゴリーやタグでは、通常、カテゴリー・タグ編集画面で設定した「アイキャッチ」が優先表示されます。
このとき、Cocoon設定→画像→「本文上にアイキャッチを表示する」をオンにすると、カテゴリー一覧やタグ一覧の本文上にも画像が表示されます。
一覧ページをシンプルにタイトルのみにしたい場合は、メニューのタイトル属性に画像URLを設定する方法がおすすめです。
- 説明文（スニペット）の設定
カテゴリーやタグの編集画面で「本文」を入力しても、ナビカードのスニペットには反映されません。
投稿・固定ページも同様に、本文からの自動抜粋は行われません。
ボックスメニュー
ボックスメニューでは、アイコンや画像を使ってメニューを表示できます（図10参照）。
- CSS class
Font AwesomeのCSSクラスを設定することで、アイコンが表示されます。
未入力の場合はデフォルトで星アイコンが表示されます。
- タイトル属性
画像URLを設定すると、メニューに画像が表示されます。
メニュー
メニューによっては、メニュー設定で入力が制限される項目があります（表2参照）。
| ウィジェット | ① | ② | ③ | ④ |
|---|---|---|---|---|
| ヘッダーメニュー | ● | – | ✕ | ● |
| ヘッダーモバイルメニュー | ● | – | ✕ | ● |
| ヘッダーモバイルボタン | ● | – | ● | – |
| フッターメニュー | ● | – | ✕ | – |
| フッターモバイルボタン | ● | – | ● | – |
| モバイルスライドインメニュー | ● | – | ✕ | – |
Font AwesomeのCSSクラスは、ヘッダーモバイルボタンやフッターモバイルボタンにのみ対応しています。
これら以外のメニューに入力すると、表示が崩れる原因となるため注意が必要です（図12参照）。
もしメニュー名の前にアイコンを追加したい場合は、CSS classではなく、タイトルに直接HTMLタグを入力してください（図13参照）。
メニューの階層設定
図13に示すように、メニューを階層設定した場合、サブメニューが表示されないことがあります。
以下にその状況を整理しました（表3、表4参照）。
| ウィジェット | サブメニュー | 備考 |
|---|---|---|
| おすすめカード | ● | 階層表示にはならず、メニューとしてそのまま表示される。 |
| ナビカード | ● | 階層表示にはならず、メニューとしてそのまま表示される。 |
| ボックスメニュー | ● | 階層表示にはならず、メニューとしてそのまま表示される。 |
| ナビゲーションメニュー | ● | 階層表示され、メニューとして適切に表示される。 |
| メニュー | サブメニュー | 備考 |
|---|---|---|
| ヘッダーメニュー | ▲ | Cocoon設定→ヘッダー→「ヘッダー固定する」をすると、サブメニューは非表示になる。 |
| ヘッダーモバイルメニュー | ✕ | |
| ヘッダーモバイルボタン | ✕ | |
| フッターメニュー | ✕ | |
| フッターモバイルボタン | ✕ | |
| モバイルスライドインメニュー | ● |
