こんにちは、ハナです。
ハナはフリーランスでwebデザイナーをしています。
今回は、ご依頼のあった企業サイトをCocoonで作成しました。その時に気付いたことを書いてみたいと思います。
最初はモバイル ボタンについてです。
モバイル ボタン表示設定
Cocoonでは、ヘッダーとフッターにモバイル ボタンを表示できます。
管理画面 ⇒ Cocoon設定 ⇒ Cocoon設定 をクリックします。
![](https://i0.wp.com/wakuwaku-blog.com/wp-content/uploads/2020/08/0815_1.png?resize=294%2C271&ssl=1)
モバイルタブをクリックします。
モバイル設定のモバイルメニューから、ご自身で表示させたいものを選びます。
![](https://i0.wp.com/wakuwaku-blog.com/wp-content/uploads/2020/08/0815_2.png?resize=733%2C396&ssl=1)
「ヘッダーモバイルボタン」を選ぶとこのようにスマホ画面上部に表示されます。
![](https://i0.wp.com/wakuwaku-blog.com/wp-content/uploads/2020/08/0815_3.png?resize=330%2C50&ssl=1)
「フッターモバイルボタン」を選ぶとこのようにスマホ画面下部に表示されます。
![](https://i0.wp.com/wakuwaku-blog.com/wp-content/uploads/2020/08/0815_4.png?resize=330%2C50&ssl=1)
モバイル ボタン作成
モバイル ボタン作成を行うことで、表示される内容をこのように変更できます。
モバイル ボタンはメニューを作成して行います。
![](https://i0.wp.com/wakuwaku-blog.com/wp-content/uploads/2020/08/0817_3.jpg?resize=330%2C175&ssl=1)
新規メニュー作成
管理画面 ⇒ 外観 ⇒ メニューをクリックします。
「新しいメニューを作成しましょう」をクリックします。
「メニュー名」に名前を付けて「メニューを作成」ボタンを押します。
![](https://i0.wp.com/wakuwaku-blog.com/wp-content/uploads/2020/08/0817_5.png?resize=739%2C170&ssl=1)
新しいメニュー名を「モバイルヘッダーメニュー」としました。
メニューに入れる項目は、今回は「サイトメニュー」「サイトのロゴ」「電話」です。
項目「サイトメニュー」の作成
Cocoonの独自ボタンを利用するには、カスタムリンクのURLに、あらかじめ定義されたコマンド(文字列)を貼り付けることで利用できます。
Cocoon公式サイト
ということで、Cocoon公式サイトにはこのように全コマンドが書かれています。
![](https://i0.wp.com/wakuwaku-blog.com/wp-content/uploads/2020/08/0817_7.png?resize=648%2C570&ssl=1)
さっそく「サイトメニュー」を作成しましょう。
カスタムリンクで作成します。
URLにコマンドを入力し、リンク文字列に表示させてい文字を入力します。
メニューに追加をクリックします。
![](https://i0.wp.com/wakuwaku-blog.com/wp-content/uploads/2020/08/0817_6.png?resize=261%2C253&ssl=1)
「サイトロゴ」の作成
![](https://i0.wp.com/wakuwaku-blog.com/wp-content/uploads/2020/08/0817_10.png?resize=263%2C195&ssl=1)
「電話」の作成
![](https://i0.wp.com/wakuwaku-blog.com/wp-content/uploads/2020/08/0817_9.png?resize=262%2C205&ssl=1)
メニューの項目に「サイトメニュー」「サイトのロゴ」「電話」の項目が出来ました。
電話にはアイコンを入れたいのでcss slass(オプション)にアイコンフォントのクラスを入力します。
メニュー設定の「ヘッダーモバイルボタン」にチェックを入れメニューを保存します。
![](https://i0.wp.com/wakuwaku-blog.com/wp-content/uploads/2020/08/0817_8.png?resize=568%2C706&ssl=1)
css slass(オプション)へのアイコンフォントのクラスの入力については、「ボックスメニュー作成」のこちらのページをご覧ください。
モバイル ボタン フッター作成
このブログは、モバイル設定のモバイルメニューで「フッターモバイルボタン」を選択しています。
![](https://i0.wp.com/wakuwaku-blog.com/wp-content/uploads/2020/08/0818_1.jpg?resize=330%2C172&ssl=1)
新規メニュー作成の手順で作成していきます。
- 新しいメニュー作成
- メニュー名を入力してメニュー作成
- 追加する項目をカスタムリンクで作成
- メニュー設定でフッターモバイルボタンにチェックを入れる
- メニューを保存する
![](https://i1.wp.com/wakuwaku-blog.com/wp-content/uploads/2020/08/0818_2.png?fit=800%2C591&ssl=1)
![](https://i0.wp.com/wakuwaku-blog.com/wp-content/uploads/2020/08/0818_4.png?resize=626%2C453&ssl=1)