Cocoonのグローバルメニューの作り方とデザインの設定方法|簡単です

Cocoon

こんにちは、リュウスケです。

今日はこんな疑問に答えます↓

少し前にCocoonでブログを始めたんだけど、まだグローバルメニューを作れてないので、これから作ろうと思っています。ただ、作り方が分からないのでグローバルメニューの作り方を教えてほしい。

リュウスケ
リュウスケ

この記事ではCocoonブログのグローバルメニューの作り方とデザインの設定方法を実際の設定画面の画像付きで初心者向けにできるだけわかりやすく解説していきます。

 

Cocoonブログのグローバルメニューとは↓みたいな感じで

サイトのタイトルの下に表示されているメニューの事。

今回は、このサイトのタイトルの下に表示されているグローバルメニューの作り方とデザインの
設定方法を解説していきます。

 

Cocoonブログのグローバルメニューの作り方とデザインの設定方法を知りたいと思っている人は
是非最後まで、お付き合いください。

1:Cocoonのグローバルメニューを作る方法

まず、WordPressのサイドバーの[外観]→[メニュー]をクリックしてください。

 

移動するとこんな感じのページに行きます。

 

移動したら、メニュー名とメニューを表示する位置を設定します。

今回はメニュー名を→[ナビゲーション1]に設定。

メニューの位置はいろいろ種類がありますが、今回は→[ヘッダーメニュー]のみにチェックを
入れて[メニューを作成]をクリックしてください。

 

クリックしたら、こんな感じでメニュー項目を追加する画面になります。

 

メニュー項目には↓

  • 固定ページ
  • 投稿
  • カスタムリンク
  • カテゴリ

 

の4つがありますが、今回は[カスタムリンク]と[カテゴリ]を使います。

まず、カスタムリンクは↓

 

こんな感じで、URLを設定して好きなページに飛ばすことが出来るリンクの事。

今回はサイトのトップページに飛ばしたいので、このブログのトップページへのURLを設定して
メニューに追加します。

 

次にカテゴリー、カテゴリーは普通にグローバルメニューに表示したいカテゴリーにチェックを
入れてメニューに追加してください。

ちなみに、カテゴリー名は[ナビゲーションラベル]の中の文字列を変更することで、カテゴリの
名前が日本語でも英語で入力すれば英語で表示することも可能。↓

 

今回は英語で設定してみました。

で、こんな感じで↓

 

グローバルメニューに表示させたいメニュー項目を設定してください。

メニューの構造ア上から順に、グローバルメニューでは左から表示される感じになるので、
好きな順番にドラッグ&ドロップして並び替えておくのが良いかなと。

 

完了したら下までスクロールを進めて↓に

 

表示されている[メニューを保存]をクリックして↓みたいに表示されれば設定は完了です。

 

お疲れさまでした!!

 

ただ、グローバルメニューの設定は済みましたがグローバルメニューのデザイン面での設定は、
まだ済んでいないのでここからはデザイン面の設定をやっていきます。

なので、デフォルトのデザインで良いと思っている場合はここからは読まなくてOKですが、
デフォルトのデザインから変更したいと思っている人は是非ご覧ください。

2:グローバルメニューのデザイン設定

で、ここからはグローバルメニューのデザインの設定を行います。

まず、WordPressのサイドバーの[Cocoon設定]→[Cocoon設定]をクリックして、Cocoonの
設定画面に移動してください。

 

移動したらこんな感じです。↓

 

この、設定項目の中の一番上の段の左から3番目にある[ヘッダー]をクリックしてヘッダー部分の
設定画面に移動してください。

こっちも移動したら↓みたいな感じです。

 

移動した後スクロールを進めると↓みたいな感じで[グローバルナビメニュー色]と書かれている
設定項目があります。

 

この中の[グローバルナビ色]の部分でグローバルナビ自体の背景色を設定。

[グローバルナビ文字色]の部分でグローバルナビに表示される文字色を設定することが可能。

 

あと、グローバルナビのメニュー幅の設定もすることが可能ですが基本的にはデフォルトのまま
変更しないで使うのが良いかと。

ただ、[メニュー幅をテキストに合わせる]と書かれているチェックボックスの中にチェックを
入れておくのがオススメ。

 

これをやっておくことで不自然な感じな表示にならないので良いかなと。

で、グローバルナビメニューの色の話に戻りますが、↓みたいな感じでカラーコードを入れて
指定する感じですね。

 

設定が終了したら一番下にある[変更をまとめて保存]をクリックすることで、Cocoonブログの
グローバルメニューの新規作成と、デザイン設定は完了です。

終了するとこんな感じでグローバルメニューが表示されているはず。↓

お疲れさまでした!!

 

まとめ

以上がCocoonブログのグローバルメニューの作り方とデザインの設定方法の解説でした。

この記事がCocoonブログのグローバルメニューの作り方やデザインの設定方法を知りたいと
思っていた人の参考になったら嬉しいです。

 

おわり。

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