こんにちは、よしくまです。
Cocoonを使っている人はグローバルナビメニュー（ヘッダーのメニュー）を設置している場合が多いと思います。
グローバルナビは、パソコン版とスマホ版で見たときに違いがありますよね。
スマホ画面だとちょっと見づらいかも
こう思った方もいるのではないでしょうか。
ヘッダーモバイルメニューは1行にすることもできますが、スタイルシートのカズタマイズが必要でちょっと面倒。
スマホ画面でメニューを見やすくしたいときは「ヘッダーモバイルボタン」を設置するのがおすすめです。
こんな感じに⇩
すっきりしていて見やすいですね。
メニューをクリックすると左側から、あらかじめ設定しておいたメニューが出てきます。
設定をいじるのは管理画面（ダッシュボード）のCocoon設定と外観の2つだけ！
以下の手順で進めていきましょう。
Cocoon設定でモバイル画面の設定
まずは、管理画面（ダッシュボード）のCocoon設定⇒タグ一覧の「モバイル」の順でクリックします。
モバイルメニューの「ヘッダーモバイルボタン」をチェック⇒画面左下「変更をまとめて保存」をクリック。
これでCocoon設定での変更は完了です。
モバイルボタンは好みに合わせて選択しましょう。
スマホヘッダー用のメニューを作成
続いて、外観での設定に進みます。
「外観」の「メニュー」をクリックします。
画面右上の「表示オプション」をクリックして、
- 固定ページ
- 投稿
- カスタムリンク
- カテゴリー
にチェックが入っているか確認しましょう。
「CSSクラス」にもチェックを入れておくと今後のカスタマイズに役立ちます。
「新しいメニューを作成しましょう。」をクリック⇒「メニュー名」を入力⇒「メニューを作成」をクリック。
メニュー名は自分が分かりやすいものでOKです。今回は「ヘッダーモバイルボタン」にしています。
下図のように「メニュー」「ロゴ」「検索」を表示させる例で解説します。
新しく作成したメニューに、下記の手順で項目を追加していきます。
- 「カスタムリンク」を開く
- URLに「#menu」を入力
- リンク文字列に「メニュー」を入力
- 「メニューに追加」をクリック
これで右枠のメニュー構造に「メニュー」が追加されます。
同じ手順で「ロゴ」と「検索」を追加しましょう。
ロゴを追加する
- URLに「#logo」を入力
- リンク文字列に「サイト名」を入力（ヘッダーロゴを設定している場合はロゴ表示になります。）
- 「メニューに追加」をクリック
検索を追加する
- URLに「#search」を入力
- リンク文字列に「検索」を入力
- 「メニューに追加」をクリック
メニュー構造に追加されたことを確認したら、メニュー設定の「ヘッダーモバイルボタン」にチェック☑を入れて「メニューを保存」をクリックします。
これで完了です。スマホでサイトを表示して確認しましょう。
今回は「ヘッダーモバイルボタン」にカスタムリンクを追加しましたが、カテゴリーの項目を追加しても見やすいと思います！
グローバルナビメニューの設置方法は以下の記事をご覧ください。
うまく表示されない場合
手順通りにやってもうまく表示されない場合は、次の方法を試してみてください。
設定が反映されていない
「メニュー保存」の直後にサイトを表示すると、ときどき反映されていないことがあったときに、何度かスーパーリロードしてみるとうまく表示されることがありました。
Google Chromeのスーパーリロードは「Ctrl ＋ Shift ＋ R」です。
ヘッダーのメニューが2つ表示されている
下図のようなメニューになった場合は、グローバルナビメニューの設定画面を変更します。
下図のチェックを外して「メニューを保存」クリックしておきましょう。
スマホ版のヘッダー背景が大きい
ヘッダー背景によっては、デフォルトのままだとけっこう高さ（縦の幅）があって見づらい場合があります。
そんなときは、「Cocoon設定」の「ヘッダー」で「高さ（モバイル）」を変更して「変更をまとめて保存」をしてみましょう。
高さ（モバイル）を「0」にするとスマホ画面では非表示になります。
ヘッダーモバイルボタン設置のまとめ
スマホ画面で見やすい「ヘッダーモバイルボタン」の設置方法を解説してきましたが、うまく設置できたでしょうか。
CocoonのCSSをいじらないカスタマイズは間違えてもすぐにもとの状態に戻すことができます。
慣れていないかたも色々と試してみてください。
コメント