この記事では、Cocoonのクラシックエディタ版でヘッダーにメニューを設置する（グローバルナビ）方法を解説します。
こういうやつです↓
この位置にメニューがあると、だいたいどんな内容が書かれているのかが分かりやすいとともに、気になる項目にすぐに進めることができます。
設置にはむずかしいスタイルシートの編集などはなく、初心者の方も簡単です。
記事の後半では、スマホで表示させるモバイルメニューの解説もしますので、ぜひチェックしてみてください。
グローバルナビの設置手順
管理画面（ダッシュボード）から「外観」⇒「メニュー」をクリックします。
画面右上の「表示オプション」をクリックして、「固定ページ」と「カテゴリー」へのチェック☑を確認してください。
ほかにもカスタマイズする予定であれば「カスタムリンク」「CSSクラス」もチェック☑しておくと便利です。
「新しいメニューを作成しましょう」をクリックして、「メニュー名」を入力したら最後に「メニューを作成」をクリックします。
メニュー名はブログ上に表示されるものではないので、自分が分かりやすいものにしておくとよいでしょう。
「メニュー項目の追加」からヘッダーメニューに設置したい項目を選択します。▼をクリックして、メニューに設置したい項目にチェック☑を入れたら「メニューに追加」をクリックします。
ヘッダーメニューに「ホーム」を設置する場合は、「固定ページ」⇒「すべて表示」で「ホーム」にチェックして「メニューに追加」をクリックします。
追加できた項目は右側の「メニュー構造」に表示されるので、確認しながら追加していきましょう。
メニュー構造の一番上にある項目が、グローバルナビでは一番左に表示されます。ドラッグ＆ドロップで好きな位置に移動できます。
設置位置が決まったらメニュー設定の「ヘッダーメニュー」にチェックを入れて「メニューを保存」をクリックすれば完了です。
ホーム画面を開いて確認してみましょう！
ヘッダーの位置にボックスタイプのメニューを設置したい場合は、下記の記事をご覧ください。
モバイル版グローバルナビの設置手順
ヘッダーへのメニュー設置はモバイルでも可能です。
先ほど作成したメニュー構造のメニュー設定のところで「ヘッダーモバイルメニュー」にもチェック☑を入れて「メニューを保存」をクリックして完了です。
ただし、スマホの表示の場合、メニューの数によってはPCのように横一列とは違って2段表示になりま。
スマホ画面はせまいので、なんか見づらいなぁと思った方もいるかと思います。
スマホの場合はヘッダーモバイルボタンを設定すると、すっきりとして見やすいです。
こんな感じになります↓
グローバルナビメニューは、左側のメニューボタンをクリックしたときに表示させることができます。
ヘッダーモバイルボタンを設置する方法については、以下の記事で詳しく解説しています。
最後に
グローバルナビの設置方法を解説してきました。
表示順はあとからでも簡単に変更できるので、とりあえずいくつか設置してみて投稿画面などで確認してみましょう。
表示が変だなって思ったら、その部分を変更していく感じで進めると分かりやすいと思います。
コメント