こんにちは、ハナです。
ハナはフリーランスでwebデザイナーをしています。
今回は、ご依頼のあった企業サイトをCocoonで作成しました。その時に気付いたことを書いてみたいと思います。
最初はモバイル ボタンについてです。
モバイル ボタン表示設定
Cocoonでは、ヘッダーとフッターにモバイル ボタンを表示できます。
管理画面 ⇒ Cocoon設定 ⇒ Cocoon設定 をクリックします。
モバイルタブをクリックします。
モバイル設定のモバイルメニューから、ご自身で表示させたいものを選びます。
「ヘッダーモバイルボタン」を選ぶとこのようにスマホ画面上部に表示されます。
「フッターモバイルボタン」を選ぶとこのようにスマホ画面下部に表示されます。
モバイル ボタン作成
モバイル ボタン作成を行うことで、表示される内容をこのように変更できます。
モバイル ボタンはメニューを作成して行います。
新規メニュー作成
管理画面 ⇒ 外観 ⇒ メニューをクリックします。
「新しいメニューを作成しましょう」をクリックします。
「メニュー名」に名前を付けて「メニューを作成」ボタンを押します。
新しいメニュー名を「モバイルヘッダーメニュー」としました。
メニューに入れる項目は、今回は「サイトメニュー」「サイトのロゴ」「電話」です。
項目「サイトメニュー」の作成
Cocoonの独自ボタンを利用するには、カスタムリンクのURLに、あらかじめ定義されたコマンド（文字列）を貼り付けることで利用できます。
Cocoon公式サイト
ということで、Cocoon公式サイトにはこのように全コマンドが書かれています。
さっそく「サイトメニュー」を作成しましょう。
カスタムリンクで作成します。
URLにコマンドを入力し、リンク文字列に表示させてい文字を入力します。
メニューに追加をクリックします。
「サイトロゴ」の作成
「電話」の作成
メニューの項目に「サイトメニュー」「サイトのロゴ」「電話」の項目が出来ました。
電話にはアイコンを入れたいのでcss slass(オプション)にアイコンフォントのクラスを入力します。
メニュー設定の「ヘッダーモバイルボタン」にチェックを入れメニューを保存します。
css slass(オプション)へのアイコンフォントのクラスの入力については、「ボックスメニュー作成」のこちらのページをご覧ください。
モバイル ボタン フッター作成
このブログは、モバイル設定のモバイルメニューで「フッターモバイルボタン」を選択しています。
新規メニュー作成の手順で作成していきます。
- 新しいメニュー作成
- メニュー名を入力してメニュー作成
- 追加する項目をカスタムリンクで作成
- メニュー設定でフッターモバイルボタンにチェックを入れる
- メニューを保存する
