Cocoonを始めたばかりの方は、「ヘッダーの下になんでメニューがないの？」なんて困ったりしてませんか？
Cocoonのデフォルト（初期の状態）では、グロバールナビメニューはまだありません。
ご自身で作らないといけないんですね。
グローバルナビメニューを表示させるだけなら、それほど時間はかかりません。
今から一緒に作ってみましょう。
今回は初心者の方向けにCocoonのグローバルナビメニューの作り方から設定方法、
そしてかんたんなカスタマイズのやり方を説明させていただきます。
グローバルナビメニューの作成
では早速…といきたいところですが、グローバルナビメニューには何を表示させますか？
一般的には「ホーム（トップページ）」や「カテゴリー」を表示させている人が多いです。
もしあなたが「カテゴリー」を表示させるつもりでも、まだカテゴリーを作っていなかったら、
先に用意する必要があります。
カテゴリーの作り方がよく分からない…という方は、こちらの記事を参考に作ってみて下さい。
カテゴリーの準備ができたら、グローバルナビメニューの作成に取りかかりましょう。
WorldPressのダッシュボードから「外観」→「メニュー」をクリックします。
「メニュー名」には適当な名前（グローバルナビメニューやヘッダーメニューなど、自分が分かれば何でもOK）、
「メニューの位置」の「ヘッダーメニュー」に チェックを入れて「メニューを作成」をクリックします。
じゃあ、メニュー名は「メニュ子ちゃん」にしよっと！
今回はこのように、一番左には「ホーム」を、あとは「カテゴリー」を4つほど入れます。
※テスト用のトップページです
「ホーム」は、トップページのことだよ。
まずは「ホーム」を作りましょう。
右上にある「表示オプション」を押して「固定ページ」と「カテゴリー」に チェックが入っていることを確認します。
確認したら「メニュー項目を追加」の「固定ページ」を押して、
「すべて表示」→「ホーム」に チェックを入れて「メニューに追加」を押します。
次に「カテゴリー」を押して「すべて表示」を選び、
グローバルナビメニューに表示したいカテゴリー全てに チェックを入れ、「メニューに追加」を押します。
表示させたい順番にドラッグ＆ドロップで項目を入れ替えて「メニューを保存」をクリックします。
これで「グローバルナビメニュー」がヘッダーの下に表示されているはずです。
グローバルナビメニューの位置（ヘッダーレイアウト）は、Cocoon設定の「ヘッダー」タブで変更できます。
設定方法は、こちらの記事の「ヘッダーレイアウト」をご覧下さい。
Cocoon グローバルナビメニューの設定
メニューができたので、今度はメニューの色や大きさを設定しましょう。
ダッシュボードの「Cocoon設定」→「ヘッダー」タブをクリック。
一番下にグローバルナビメニューの項目が2つあります。
ここで「背景色」「文字色」「メニュー幅」を設定します。
グローバルナビメニュー色
「グローバルナビメニュー色」と書かれた右横の「！」マークにマウスオーバーすると
カラーサンプルのリンクが現れます。
このリンクでもいいですし、基本色ならカラーコード表も便利です。
「色を選択」をクリックして「#6桁」のカラーコードを入力するか、
もしくは実際の色から選んでメニューの「背景色」と「文字色」を設定しましょう。
グローバルナビメニュー幅
グローバルナビメニューの各項目のデフォルト幅は「130（ピクセル）」です。
今回はメニュー項目の名前がすべて1文字～3文字なので特に違和感はありませんが、
長い名前が混じるといきなりバランスが悪くなります。
思いっきり、わざとらしいね。
バランスが悪いと感じたら「メニュー幅をテキストに合わせる」に チェックを入れます。
すると左右の余白が均一になってバランスがよくなります。
サブメニュー幅
一番下にある「サブメニュー幅」というのは、マウスオーバーで表示される
「子カテゴリー」のメニュー幅です。
メニューを作る際に、子カテゴリーは親よりも一段下げたところへ配置します。
ドラッグすれば、かんたんに下がるよ。
子カテゴリーは、普段はメニューに表示されずに、マウスオーバー時だけサブメニューに表示されます。
今回はメニューの幅は変えずに、背景色だけ変更しました。
設定がすべて終わったら「変更をまとめて保存」を押して下さい。
Cocoonの設定でできるのはここまでです。
次はCSSを使ってメニューをカスタマイズしていきます。
グローバルナビメニューのカスタマイズ
カスタマイズの前に「グローバルナビメニューの全体幅を設定する方法が知りたい」という方はこちらの記事をご覧下さい。
実はこれ、私がCocoonの設定方法を書いた記念すべき第1作目なんです(^_^;)
カスタマイズのやり方
カスタマイズの方法は今回ももちろん、一から説明させていだきます。
カスタマイズは“CSS”をいじりますが、
初心者の方でも簡単にできるように説明していきますのでご安心下さい。
CSSの変更は、ダッシュボードの「外観」→「テーマエディター」をクリックします。
こんな画面になるので、赤い矢印あたりにこれから出てくるCSSを貼り付けて下さい。
編集するテーマは「Cocoon Child」を選んでおいて下さいね。
こんなふうに改行でスペースを作って、
この画面だと“18”のあたりからコピーしたCSSを貼り付けていくといいですね。
貼り付けたら一番下にある「ファイルを更新」を押します。
ちゃんと変更できているかを確認するには「サイトを表示」を押します。
以上がカスタマイズの一連の流れです。
グローバルナビメニューの高さを変更
では、まずメニューの高さを変えてみましょう。
高さを変更するCSSはこちらです。
#navi .navi-in > ul li{
height: 80px;
line-height: 80px;
}
上のCSSを使うと、デフォルトの高さ60px（ピクセル）のメニューが80pxに変わります。
コピーして、こんなふうに貼り付けて下さい。
もっと、きれいな表現はできないのかな？
これで「ファイルを更新」を押すとメニューの高さが変わります。
CSSの中にある2つの数字はお好みで変更して下さい。
2つの値は同じにしてね。
40px、60px（デフォルト）、80pxでメニューの高さがこんな感じで変わります。
メニューを細くするなら、Cocoon設定の「ヘッダー」タブ→「ヘッダーレイアウト」で「スリムメニュー」を選ぶという方法もあるよ。
グローバルナビメニュー 文字の大きさを変更
次にメニューの文字の大きさを変えてみましょう。
文字の大きさを変えるCSSはこちらです。
#navi .navi-in > .menu-header .item-label{
font-size: 13px;
}
このCSSでメニューのフォントサイズが16px（デフォルト）→13pxに変わります。
こちらも数字をお好みの値にしてご使用下さい。
マウスオーバー時の文字色と背景色を変更
メニューの上にカーソルをのせると、文字色や背景色が変わるCSSです。
#navi .navi-in a:hover{
color: #ff0000!important;
background: #000000;
transition: all 0.5s ease;
}
このCSSで、文字色は「グローバルナビ文字色」で設定した色から赤（#ff0000）へ、
背景色は「グローバルナビ色」で設定した色から黒（#000000）へと変化します。
4行目の「0.5s」は色の変化が始まって終わるまでの時間（0.5秒）です。
カラーコードや時間を変えて試してみてね。
メニューにグラデーションをつける
次はメニューをグラデーション化させるCSSです。
上から白（#ffffff）→黒（#000000）へと変化します。
#navi.navi.cf{
background: linear-gradient(#ffffff,#000000);
}
#header-container{
background: linear-gradient(#ffffff,#000000);
}
サブメニューがある場合は、次のCSSを合わせて使って下さい。
サブメニューの色を変えるCSS（#808080はグレー）
#navi .navi-in > .menu-header .sub-menu{
background: #808080;
}
サブメニューもグラデーション化させるCSS
#navi .navi-in > .menu-header .sub-menu{
background: #ffffff;
}
#navi .navi-in > .menu-header .sub-menu a{
background: linear-gradient(#ffffff,#000000);
}
#navi .navi-in > ul .sub-menu a:hover{
opacity: 0.8 ;
}
※2行目の「background:#ffffff」は変更しないで下さい。
メニューに仕切り線をつける
最後は、項目に仕切り線をつけるCSSです。
グラデーションをつけたまま、白い実線（solid）を入れてみます。
/*メニューをグラデーション化*/
#navi.navi.cf{
background: linear-gradient(#ffffff,#000000);
}
#header-container{
background: linear-gradient(#ffffff,#000000);
}
/*サブメニューの背景をグレーに*/
#navi .navi-in > .menu-header .sub-menu{
background: #808080;
}
/*1番左と2番目の仕切り線*/
#navi .navi-in > ul li{
border-right: 1px solid #ffffff;
border-left: 1px solid #ffffff;
}
/*左から3番目以降の仕切り線*/
#navi .navi-in > ul li + li{
border-right: 1px solid #ffffff;
border-left: none;
}
/*サブメニューの仕切り線は無し*/
#navi .navi-in > ul ul li{
border-right: none;
border-left: none;
}
「線の太さ」「線の種類」「線の色」は、それぞれ3つすべてを変更して下さい。
太さ（1px）と種類（solid）と色（#ffffff）
の間に必ず「半角スペース」を入れてね。
線は「solid」以外に、「dashed（破線）」「dauble（二重線）」などがあります。
最後に
おつかれさまでした！
あとは色や数字の部分を変えて、納得のいくグローバルナビメニューを作ってみて下さい。
ikuzoblogでは、この他にもCocoonの設定方法やカスタマイズのやり方をいくつか紹介してます。
グローバルナビメニューの設定が終わった後にでも、よかったら見てみて下さいね。
見てねー
本日は最後までご覧いただき、ありがとうございました。
コメント
丁寧な解説参考になります。
とても勉強されていて、
画像付きで見やすいサイトなので
最近よく来ています。
今回の記事の内容に関することなのですが、
わたしは、ワードプレスのテーマが、Cocoonではなく、
Lightning（ライトニング）なのですが、
スクロールすると、上から降りてくるグローバルメニュー（メインメニュー）を
透過（緑色のグラデーションで）したいと思い、CSSを色々試しているのですが、
上手くいきません。・・・ここで紹介されているCocoonでのやり方も試してみましたが、
ではダメなようです。((+_+))
Lightning（ライトニング）でのグローバルメニューの背景色（初期値は白色）の透明化、
また、上から下へのグラデーションのかけ方のCSSはどのようなものになりますか？
もし、お分かりになるのであれば、教えていただけるとありがたいです。
サラさん、こんにちは。
いつも見ていただき、ありがとうございます。
Lightning（ライトニング）はやったことがないですが、これでどうでしょうか？
上から下へ緑色が薄くなるグラデーションをかけてみました。
@media (min-width: 992px)
.header_scrolled .gMenu_outer {
background: linear-gradient(rgba(0,128,0,0.7),rgba(0,128,0,0.1));
}
一度試してみて下さい(^_^)
お返事ありがとうございます。サラです。
@media (min-width: 992px)
.header_scrolled .gMenu_outer {
background: linear-gradient(rgba(0,128,0,0.7),rgba(0,128,0,0.1));
}
をそのままコピペしたらできませんでしたが、
@media (min-width: 992px)をはぶいて、
.header_scrolled .gMenu_outer {
background: linear-gradient(rgba(0,128,0,0.7),rgba(0,128,0,0.1));
}
を貼り付けたところ・・・
できました！！！
グラデーションが、うっすらかかった透明です。
すごいです！！
いくぞうさんは天才ですか？ (≧▽≦)
(rgba(0,128,0,0.7),rgba(0,128,0,0.1))は普通のＲＧＢの色指定ではなく、
透明化するための色指定なのですね。 勉強になります！
全く知らずに、今ググって調べました。
ＨＴＭＬクイックリファレンスというサイトの
【rgba() …… RGBAカラーモデルで色を指定する】というページを見つけたので、
理解するために、時間をかけて読んでみようと思います。
現時点では、あまりに透明すぎて、メニューの文字が見ずらいので、
このＣＳＳを足掛かりに、数値を変更したりして色々試してみようと思います。
また、わからないことがありましたら、質問させてください。
ほんとにカンドー！！ ありがとうございました。感謝です。!(^^)!
サラさん、無事に解決してよかったです！
@media (min-width: 992px)は必要なかったんですね。
大変失礼しました。
ご自身で気がついて消されたのはお見事です！( ´∀｀)b
変更後のサラさんのサイトを拝見しましたが、
すでに透明度は理解されたようですね。
メニューの色はド緑にしたので、
他の色がよければこちらでカラーコードからRGBへ変換させて下さい。
https://www.peko-step.com/tool/tfcolor.html
お役に立てるかどうか分かりませんが、何かあればまたご連絡下さい(^_^)
お世話になっております。 サラです。
「カラーコードからRGBへ変換」のサイトも教えていただき感謝です！ (*^_^*)
自分でいろいろ試して、緑も透過濃度もイメージ通りに設定。
ついでに、文字色を白にして、
マウスオーバーした時は黄緑色になるように設定も出来ました。(^^)/ うれしい限り！
ただ、もう一点。
スクロールした時に出るグローバルメニューの「仕切り線」を消したいのですが
思うように設定できません。
このサイトでの仕切り線の消し方や、
他のサイトをググって学んで
以下のCSSを設定しました。
/* スクロールした時に出るグローバルメニューの仕切りの縦線を消す */
.header_scrolled .gMenu li{
border-left: none;
border-right: none;
}
そうすると、ぱっと見、仕切り線が消えて
「わぁ」と感動したのですが、
よーく見ると、
よくよく見ると・・・
最後のメニュー「ブログ」の右側の線だけが消えていませんでした。
ガクッ・・・・＿|￣|○
何かCSSで足りない要素があるのでしょうか・・・。
現在、私のサイトにアクセスして、スクロールすると
グローバルメニューが出てきて、右側の白い仕切り線が確認できるかと思います。
もし、いくぞう先生の方で解決策がありましたら、
ご教授おねがいできると幸いです。
サラさんは、hoverの設定ができるので、もう初心者ではないですね(^_^)
たぶんCSSのセレクタの調べ方が分からないだけだと思います。
たまたま昨日公開した記事に、セレクタの調べ方を書いたので、
お時間のあるときにでも読んでみて下さい。
https://ikuzoblog.com/heading-customize
「ブログ」の右線を消すCSSです。
.header_scrolled .gMenu>li:last-child {
border-right: none;
}
決して、先生などではありませんので…(^_^;)
お世話になっております。 サラです。
「ブログ」の右線を消すＣＳＳ教えて頂いてありがとうございます。
コピペしました・・・・・で！
みごとに消えました！！
「やったぁ！」と思わず万歳してしまいました。＼（＾0＾）／ 感謝です！
私の場合、
６年ほど前にHTMLとCSSを学び、数か月ほど他のサイトを作成していました。
その後にトレンドになったのがWordPressで、
ビズベクトルをテーマにして
今のサイトを作成し、そのまま更新も止まってました。
CSSの知識も時間とともに頭から消滅・・・・初心者レベルに戻っていました。
CSSで何ができるか・・・は知っていても
コードの知識がなくてもサイトが作れるWordPressに依存して、
自分で書けない状態になっていました。
ＣＳＳ、面白いですよね！
今は、現在のサイトのテーマをLightningにしたばかりで、
リニューアルに忙しいのですが、
また勉強したくなりました。
「CSSのセレクタの調べ方」の記事も含め、
またこちらのサイトで学ばせてもらいます。
初心者の目線で記事が書かれているので、
とてもわかりやすいです。
サラのようなＣＳＳって・・・・思い出せない（遠い目・・・）の
人たちにとっては
やはり“いくぞう先生”ですよ！
ネットは便利ですが、質問の答えを
ここまで明確に得られることは稀です。
リニューアルに忙しいですが、
合間、合間に
またお邪魔しますね (*^_^*)
サラさん、無事に線も消えたようでよかったです！
なるほど、そういう経緯があったんですね。
最初に緑色に透過した背景のCSSを連絡した次の日に、
文字の色や透明度も変わっていたので「あれ？」って思ったんですよね（笑）
そんな大先輩のような方に、数々のご無礼、大変失礼いたしました(〃ノ∇ノ)
サイトのリニューアル、頑張ってください！
水彩画の技法などを紹介されているだけあって、とても綺麗なサイトですよね。
ちなみに私は学生のころ、水彩画がとても苦手でした。
そのころサラさんのサイトに出会えていたら…、といった感じです。
今回はそんな素敵なサイトのお手伝いが少しでもできて、大変光栄です(^_^)
何かあればまたご連絡ください！
サラさんのサイト
『水彩セラピー 水彩時間 水彩の技法と描き方。癒しのぬり絵』
https://suisai-jikan.com/
この記事を読んで知りたいことが見つかりました。ありがとうございます。
yotesanさん、コメントありがとうございます！
少しでもお役に立ててよかったです( ´∀｀)b