![](https://starting-marketing.com/wp-content/uploads/2021/11/alexa-suter-Xe0Nj5L5HDw-unsplash-1024x683.jpg)
この記事ではCocoon設定の【モバイル】のタブについて解説していきます。
ここではスマホなどのモバイル端末での表示レイアウト設定を行ないます。
右側にプレビューがありますので、確認しながら設定していきましょう。
![](https://starting-marketing.com/wp-content/uploads/2021/11/8fb58af1321f7f9e5bdb828a8a09aeef.jpg)
それでは順に解説していきます。
モバイル設定
モバイルメニュー
![](https://starting-marketing.com/wp-content/uploads/2021/11/3a21bfdf2d26df7100769647ccc89269.jpg)
【モバイルメニュー】はモバイル端末でグローバルメニューをどのように表示させるか設定することができます。
「ボタンを表示しない」にチェックを入れるとスクロールしていくとメニューが下の方に表示されるようになります。
![](https://starting-marketing.com/wp-content/uploads/2021/11/5a954d0631313a76c4c5640ad0b001db.jpg)
「トップメニュー」にチェックを入れると画面上部にメニューを表示させることができます。
![](https://starting-marketing.com/wp-content/uploads/2021/11/5af56cc5d8f995615532877af461104a-1.jpg)
トップメニューの作り方
ちなみに、この「トップメニュー」の作り方は、サイドメニューの「外観」から「メニュー」に入ります。
![](https://starting-marketing.com/wp-content/uploads/2021/11/e804bd2b2baf6ff39d2d315aa55754d0.jpg)
そこから「位置を管理」のタブをクリックして「ヘッダーモバイルメニュー」に作成したメニューを指定します。
![](https://starting-marketing.com/wp-content/uploads/2021/11/f70e74aeb632a23077e056c20acfd473.jpg)
![](https://starting-marketing.com/wp-content/uploads/2021/11/801edd708e6c7d43da405cf8c8fd4d1f.jpg)
これで、さきほどの「モバイルメニュー」で「トップメニュー」を選択すれば、ヘッダーにメニューが表示されるようになります。
![](https://starting-marketing.com/wp-content/uploads/2021/11/e280054eba35f63999e8c4582006c7d9.jpg)
ここで設定しておかないと「トップメニュー」を選択しても何も表示されなくなってしまいます。
「ヘッダーモバイルボタン」にチェックを入れた場合は画面上部にボタンが設置されます。
![](https://starting-marketing.com/wp-content/uploads/2021/11/865c34fb79590d594b7b7028824d5dcf.jpg)
その下の「フッターモバイルボタン」にチェックを入れた場合は、
・ホーム
・シェア
・トップ
・サイドバー
の4つのボタンがフッターに表示されるようになります。
![](https://starting-marketing.com/wp-content/uploads/2021/11/3e30e340b1302bd71142e922638f9509.jpg)
その下の「ヘッダー・フッターモバイルボタン」にチェックを入れた場合は「ヘッダーモバイルボタン」と「フッターモバイルボタン」が両方表示されます。
![](https://starting-marketing.com/wp-content/uploads/2021/11/6bd3f87e8ecc764dda2be7c52bae9d04.jpg)
モバイルボタン
![](https://starting-marketing.com/wp-content/uploads/2021/11/0a01e372ef110b3066a39b47921df5d9.jpg)
【モバイルボタン】の設定は【モバイルメニュー】で「ボタンを表示しない」または「トップメニュー」に設定していると無効になります。
まず「モバイルボタンの固定表示」では、チェック入れていないとスクロールしたときにモバイルボタンが隠れます。
![](https://starting-marketing.com/wp-content/uploads/2021/11/0f9df014521353d75323e64e460377b3.gif)
逆にチェックを入れておくと隠れずに固定表示されます。
![](https://starting-marketing.com/wp-content/uploads/2021/11/091db882c0277c1c6d6fd1aed80e0a97.gif)
その下の「サイトヘッダーロゴを表示する」では、チェックを入れるとスマホでヘッダーロゴが表示されるようになります。
その下の「モバイルボタン時コンテンツ下のサイドバーを表示」は、上の【モバイルメニュー】で
「ヘッダーモバイルボタン」「フッターモバイルボタン」もしくは「ヘッダー・フッターモバイルボタン」を選択していた場合に、スクロールした時にメインコンテンツ下にサイドメニューを表示するかどうかの設定です。
![](https://starting-marketing.com/wp-content/uploads/2021/11/3a085433967a0359541f5010c3f21edb.jpg)