PR

【やさしく図解】〈Cocoon初心者〉グローバルナビメニューの設定

Cocoon
スポンサーリンク

無くても特に問題はありませんが、あるとちょっとカッコよく見えるのがグローバルナビメニューです。

当サイトでもヘッダーの設定のページで説明していますが、サブ見出し(?あってるか確認)や階層メニューまで、少し詳しく説明していきます。

表示させるメニューの設定

まずは何を表示させるかを決めます。

表示させるのはカテゴリーなので、カテゴリーが整理できている人はここは不要です。

ここでは、カテゴリーの追加をしますので、それに沿って手順を図解します。

ダッシュボード>投稿>カテゴリー  を開きます。

  • ダッシュボード
  • >投稿
  •  >カテゴリー

 を開きます。

「名前」と「スラッグ」を入力します。

ここでは名前は「よむ・みる」と入れました。

本や映画のレビューのカテゴリーの想定です。

スラッグとはURLにつけられる見出しのようなもので

https://be-cando.com/の後につけられます。

表示できるのは「英数字」と「ハイフン(‐)」だけですので、スラッグのところにはここでは「yomumiru」と入れました。

ちなみにURLに日本語が混ざっていると文字化けします。

「名前」と「スラッグ」を入力したら、下にあるをクリックします。

このようにリストに追加されます。

スラッグも入っているのが確認できます。

表示の設定

カテゴリーができたら表示の設定をします。

  • 外観
  • >メニュー

を開きます。

「メニュー構造」に「ヘッダーメニュー」が表示されていたら、「カテゴリー」を」クリックします。

メニューが違っていたら「青枠」のところで「ヘッダーメニュー」を選択してください。

「全て表示」を開いて、表示させたいカテゴリーにチェックを入れます。

ここでは「よむ・みる」を選択しています。

チェックを入れたら「メニューに追加」をクリックします。

「メニュー構造」に選んだカテゴリー(ここでは「よむ・みる」)が追加されていることが確認できたら、「メニューを保存」して終了です。

このように追加されました。

表示する順番を変える

細かい話ですが、「サイトマップ」は端に置きたいので、表示の順番を変更します。

せっかく終わって出てきたところですが、「表示の設定」で開いた

「外観」>「メニュー」を開きます。

開いたら、移動したいカテゴリーをドラッグで移動します。

この場合は「よむ・みる」を移動するので、「よむ・みる」をドラッグします。

「detect」の前に移動し、「メニューを保存」をクリック。

このように移動されています。

説明を表示させる

グローバルナビメニューに表示された「カテゴリー」の下に簡単な説明を表示します。

このサイトの例では、カテゴリーを英語表示しているので、下に和訳をつけています。

このサイトの例では、カテゴリーを英語表示しているので、下に和訳をつけています。

「外観」>「メニュー」>「ヘッダーメニュー」までは同じです。

カテゴリーの横の▼マークをクリックすると詳細が開きます。

「説明」のところに入力した言葉がカテゴリーの下に小さく表示されます。

ここであまり長い説明を入れると改行して表示のバランスが崩れるので注意が必要です。

サブカテゴリーを表示する

グローバルナビのカテゴリーを選択した時にサブカテゴリーを表示させるようにします。

このサイトの例では「よむ・みる」というカテゴリーで、説明に「本・マンガ・映画・アニメ」と詰め込んでしまいましたので、その中で「小説」をサブカテゴリーで括ります。

「投稿」>「カテゴリー」を開きます。

「名前」と「スラッグ」を入力する時に、「親カテゴリー」のところで元になるカテゴリーを選択します。

これで「新規カテゴリーを追加」すれば「よむ・みる」の下に「ー小説」が追加されています。

これだけではカテゴリーが追加されただけでグローバルナビメニューには表示されませんので、再び

「外観」>「メニュー」>「カテゴリー」>「すべて表示」と進みます。

ここで「小説」にチェックを付けてメニューに追加をクリックします。

追加はつねに最下行に入りますので、ドラッグで移動させます。

この時に、「よむ・みる」と「小説」が並んでいると、このように同格に表示されてしまいます。

あくまでもサブに表示させたいので、

ドラッグして右にずらすと

「副項目」と表示されますので、そうなったら「メニューに追加」をクリックします。

このように「▼」にカーソルを合わせると「小説」が下に追加されるようになります。

まとめ

これでグローバルメニューの設定はひととおり終わりです。

順を追ってと、各段階でスクリーンショットを撮ったので、同じ操作が何度も出てきましたが、はじめからどうしたいかがわかっていればサクサクっと終わります。

このサイトは機能を試したくて、いろいろなことをしています。

いろいろなことができるのがCocoonのおすすめポイントですので、いろいろなやり方を知って、お好みのカッコいいサイトを目指してみましょう。

タイトルとURLをコピーしました