【Cocoon】グローバルナビメニューの設定方法とカスタマイズ

Cocoon グローバルナビメニューのカスタマイズ Cocoon

Cocoonを始めたばかりの方は、「ヘッダーの下になんでメニューがないの?」なんて困ったりしてませんか?

Cocoonのデフォルト(初期の状態)では、グロバールナビメニューはまだありません。

ご自身で作らないといけないんですね。

 

グローバルナビメニューを表示させるだけなら、それほど時間はかかりません。

今から一緒に作ってみましょう。

今回は初心者の方向けにCocoonのグローバルナビメニューの作り方から設定方法

そしてかんたんなカスタマイズのやり方を説明させていただきます。

スポンサーリンク

グローバルナビメニューの作成

では早速…といきたいところですが、グローバルナビメニューには何を表示させますか?

一般的には「ホーム(トップページ)」や「カテゴリー」を表示させている人が多いです。

もしあなたが「カテゴリー」を表示させるつもりでも、まだカテゴリーを作っていなかったら、

先に用意する必要があります。

カテゴリーの作り方がよく分からない…という方は、こちらの記事を参考に作ってみて下さい。

【Cocoon】初心者向け カテゴリーとカテゴリーラベルの設定方法

 

カテゴリーの準備ができたら、グローバルナビメニューの作成に取りかかりましょう。

WorldPressのダッシュボードから「外観」→「メニュー」をクリックします。

WorldPressのダッシュボード「外観」→「メニュー」

「メニュー名」には適当な名前(グローバルナビメニューやヘッダーメニューなど、自分が分かれば何でもOK)、

「メニューの位置」の「ヘッダーメニュー」に チェックを入れて「メニューを作成」をクリックします。

メニュー名を決めて「メニューを作成」をクリック

プー太郎
プー太郎

じゃあ、メニュー名は「メニュ子ちゃん」にしよっと!

 

今回はこのように、一番左には「ホーム」を、あとは「カテゴリー」を4つほど入れます。

グローバルナビメニューに「ホーム」と「カテゴリー」4つを入れる
※テスト用のトップページです
プー太郎
プー太郎

「ホーム」は、トップページのことだよ。

まず「ホーム」を作りましょう。

右上にある「表示オプション」を押して「カスタムリンク」と「カテゴリー」に チェックが入っていることを確認します。

「表示オプション」を押して「カスタムリンク」と「カテゴリー」にチェックが入っているか確認する

確認したら「メニュー項目を追加」の「カスタムリンク」を押してURLの欄にトップページのアドレスを、

「リンク文字列」には“ホーム”と入れて「メニューに追加」を押します。

「ホーム」へのリンクをメニューに登録

次に「カテゴリー」を押して「すべて表示」を選び、

グローバルナビメニューに表示したいカテゴリー全てに チェックを入れ、「メニューに追加」を押します。

登録したいカテゴリーをグローバルナビゲーションのメニューに追加

表示させたい順番にドラッグ&ドロップで項目を入れ替えて「メニューを保存」をクリックします。

表示させたい順番に項目を入れ替えて「メニューを保存」を押す

これで「グローバルナビメニュー」がヘッダーの下に表示されているはずです。

グローバルナビメニューの設定前と設定後の画面

グローバルナビメニューの位置(ヘッダーレイアウト)は、Cocoon設定の「ヘッダー」タブで変更できます。

設定方法は、こちらの記事の「ヘッダーレイアウト」をご覧下さい。

【Cocoon】スキンやサイトキーカラーでデザインを設定しよう

Cocoon グローバルナビメニューの設定

メニューができたので、今度はメニューの色や大きさを設定しましょう。

ダッシュボードの「Cocoon設定」→「ヘッダー」タブをクリック。

Cocoon設定の「ヘッダー」タブを押す

一番下にグローバルナビメニューの項目が2つあります。

ここで「背景色」「文字色」「メニュー幅」を設定します。

グローバルナビメニューの設定画面

グローバルナビメニュー色

「グローバルナビメニュー色」と書かれた右横の「!」マークにマウスオーバーすると

カラーサンプルのリンクが現れます。

マウスオーバーでカラーサンプルのリンクが現れる

このリンクでもいいですし、基本色ならカラーコード表も便利です。

色を選択」をクリックして「#6桁」のカラーコードを入力するか、

もしくは実際の色から選んでメニューの「背景色」と「文字色」を設定しましょう。

6桁のカラーコードを入れるか、サンプルから色を決める

グローバルナビメニュー幅

グローバルナビメニューの各項目のデフォルト幅は「130(ピクセル)」です。

グローバルナビメニューの幅はすべて130px

今回はメニュー項目の名前がすべて1文字~3文字なので特に違和感はありませんが、

長い名前が混じるといきなりバランスが悪くなります。

長い名前の項目が混じってバランスが悪くなったメニュー

プー太郎
プー太郎

思いっきり、わざとらしいね。

 

バランスが悪いと感じたら「メニュー幅をテキストに合わせる」に チェックを入れます。

「メニュー幅をテキストに合わせる」にチェックを入れる

すると左右の余白が均一になってバランスがよくなります。

グローバルナビメニューの余白が均一になった

サブメニュー幅

一番下にある「サブメニュー幅」というのは、マウスオーバーで表示される

「子カテゴリー」のメニュー幅です。

メニューを作る際に、子カテゴリーは親よりも一段下げたところへ配置します。

メニューを作る際に、子カテゴリーは親よりも一段下げる

プー太郎
プー太郎

ドラッグすれば、かんたんに下がるよ。

 

子カテゴリーは、普段はメニューに表示されずに、マウスオーバー時だけサブメニューに表示されます。

マウスオーバー時に、子カテゴリーがサブメニューに表示される

今回はメニューの幅は変えずに、背景色だけ変更しました。

幅はそのままで、メニューの背景色だけ変更したグローバルナビメニュー

設定がすべて終わったら「変更をまとめて保存」を押して下さい。

「変更をまとめて保存」を押す

Cocoonの設定でできるのはここまでです。

次はCSSを使ってメニューをカスタマイズしていきます。

スポンサーリンク

グローバルナビメニューのカスタマイズ

カスタマイズの前に「グローバルナビメニューの全体幅を設定する方法が知りたい」という方はこちらの記事をご覧下さい。

【Cocoon】グローバルナビメニューやサイトの幅を調整・変更する

実はこれ、私がCocoonの設定方法を書いた記念すべき第1作目なんです(^_^;)

カスタマイズのやり方

カスタマイズの方法は今回ももちろん、一から説明させていだきます。

カスタマイズは“CSS”をいじりますが、

初心者の方でも簡単にできるように説明していきますのでご安心下さい。

 

CSSの変更は、ダッシュボードの「外観」→「テーマエディター」をクリックします。

ダッシュボードの「外観」→「テーマエディター」をクリック

こんな画面になるので、赤い矢印あたりにこれから出てくるCSSを貼り付けて下さい。

編集するテーマは「Cocoon Child」を選んでおいて下さいね。

CSSの編集画面

初めて「テーマエディター」をクリックすると“注意!”というダイアログが表示されるので、「理解しました」をクリックして下さい。

こんなふうに改行でスペースを作って、

この画面だと“18”のあたりからコピーしたCSSを貼り付けていくといいですね。

コピーしたCSSを貼り付ける場所

貼り付けたら一番下にある「ファイルを更新」を押します。

「ファイルを更新」を押す

ちゃんと変更できているかを確認するには「サイトを表示」を押します。

「サイトを表示」を押す

以上がカスタマイズの一連の流れです。

CSSをいじる際は、何かあってもすぐ戻せるように必ずバックアップをとっておきましょう。(ファイルの内容をすべてコピー⇒メモ帳などに貼り付けて保存でOK)

グローバルナビメニューの高さを変更

では、まずメニューの高さを変えてみましょう。

高さを変更するCSSはこちらです。

#navi .navi-in > ul li{
	height: 80px;
	line-height: 80px;
}

上のCSSを使うと、デフォルトの高さ60px(ピクセル)のメニューが80pxに変わります。

コピーして、こんなふうに貼り付けて下さい。

CSSをスタイルシートに貼り付ける

プー太郎
プー太郎

もっと、きれいな表現はできないのかな?

 

これで「ファイルを更新」を押すとメニューの高さが変わります。

CSSの中にある2つの数字はお好みで変更して下さい。

プー太郎
プー太郎

2つの値は同じにしてね。

グローバルナビメニューの高さの値を変えるCSS

CSSの英数字や記号(スペースも含む)は、必ず半角を使って下さい

40px、60px(デフォルト)、80pxでメニューの高さがこんな感じで変わります。

メニューの高さ「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か一目でわかるので便利です(/* */で囲めば、何を書いてもスタイルシートには一切影響ありません)。

メニューに仕切り線をつける

最後は、項目に仕切り線をつける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つすべてを変更して下さい。

線の太さと種類と色を指定するCSS

プー太郎
プー太郎

太さ(1px)と種類(solid)と色(#ffffff)

の間に必ず「半角スペース」を入れてね。

線は「solid」以外に、「dashed(破線)」「dauble(二重線)」などがあります。

CSS 線の種類

最後に

おつかれさまでした!

あとは色や数字の部分を変えて、納得のいくグローバルナビメニューを作ってみて下さい。

 

ikuzoblogでは、この他にもCocoonの設定方法やカスタマイズのやり方をいくつか紹介してます。

グローバルナビメニューの設定が終わった後にでも、よかったら見てみて下さいね。

プー太郎
プー太郎

見てねー

本日は最後までご覧いただき、ありがとうございました。

コメント

  1. サラ より:

    丁寧な解説参考になります。

    とても勉強されていて、
    画像付きで見やすいサイトなので
    最近よく来ています。

    今回の記事の内容に関することなのですが、
    わたしは、ワードプレスのテーマが、Cocoonではなく、
    Lightning(ライトニング)なのですが、

    スクロールすると、上から降りてくるグローバルメニュー(メインメニュー)を
    透過(緑色のグラデーションで)したいと思い、CSSを色々試しているのですが、
    上手くいきません。・・・ここで紹介されているCocoonでのやり方も試してみましたが、
    ではダメなようです。((+_+))

    Lightning(ライトニング)でのグローバルメニューの背景色(初期値は白色)の透明化、
    また、上から下へのグラデーションのかけ方のCSSはどのようなものになりますか?

    もし、お分かりになるのであれば、教えていただけるとありがたいです。

    • ikuzo|いくぞう より:

      サラさん、こんにちは。
      いつも見ていただき、ありがとうございます。

      Lightning(ライトニング)はやったことがないですが、これでどうでしょうか?
      上から下へ緑色が薄くなるグラデーションをかけてみました。

      @media (min-width: 992px)
      .header_scrolled .gMenu_outer {
      background: linear-gradient(rgba(0,128,0,0.7),rgba(0,128,0,0.1));
      }

      一度試してみて下さい(^_^)

  2. サラ より:

    お返事ありがとうございます。サラです。

    @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))は普通のRGBの色指定ではなく、

    透明化するための色指定なのですね。 勉強になります!
    全く知らずに、今ググって調べました。

    HTMLクイックリファレンスというサイトの

    【rgba() …… RGBAカラーモデルで色を指定する】というページを見つけたので、

    理解するために、時間をかけて読んでみようと思います。

    現時点では、あまりに透明すぎて、メニューの文字が見ずらいので、
    このCSSを足掛かりに、数値を変更したりして色々試してみようと思います。

    また、わからないことがありましたら、質問させてください。

    ほんとにカンドー!! ありがとうございました。感謝です。!(^^)!

    • ikuzo|いくぞう より:

      サラさん、無事に解決してよかったです!

      @media (min-width: 992px)は必要なかったんですね。
      大変失礼しました。
      ご自身で気がついて消されたのはお見事です!( ´∀`)b

      変更後のサラさんのサイトを拝見しましたが、
      すでに透明度は理解されたようですね。

      メニューの色はド緑にしたので、
      他の色がよければこちらでカラーコードからRGBへ変換させて下さい。
      https://www.peko-step.com/tool/tfcolor.html

      お役に立てるかどうか分かりませんが、何かあればまたご連絡下さい(^_^)

  3. サラ より:

    お世話になっております。 サラです。

    「カラーコードからRGBへ変換」のサイトも教えていただき感謝です! (*^_^*)

    自分でいろいろ試して、緑も透過濃度もイメージ通りに設定。
    ついでに、文字色を白にして、
    マウスオーバーした時は黄緑色になるように設定も出来ました。(^^)/ うれしい限り!

    ただ、もう一点。
    スクロールした時に出るグローバルメニューの「仕切り線」を消したいのですが
    思うように設定できません。

    このサイトでの仕切り線の消し方や、
    他のサイトをググって学んで
    以下のCSSを設定しました。

    /* スクロールした時に出るグローバルメニューの仕切りの縦線を消す */

    .header_scrolled .gMenu li{
    border-left: none;
    border-right: none;
    }

    そうすると、ぱっと見、仕切り線が消えて
    「わぁ」と感動したのですが、

    よーく見ると、
    よくよく見ると・・・
    最後のメニュー「ブログ」の右側の線だけが消えていませんでした。

     ガクッ・・・・_| ̄|○ 

    何かCSSで足りない要素があるのでしょうか・・・。

    現在、私のサイトにアクセスして、スクロールすると
    グローバルメニューが出てきて、右側の白い仕切り線が確認できるかと思います。

    もし、いくぞう先生の方で解決策がありましたら、
    ご教授おねがいできると幸いです。

    • ikuzo|いくぞう より:

      サラさんは、hoverの設定ができるので、もう初心者ではないですね(^_^)
      たぶんCSSのセレクタの調べ方が分からないだけだと思います。

      たまたま昨日公開した記事に、セレクタの調べ方を書いたので、
      お時間のあるときにでも読んでみて下さい。
      https://ikuzoblog.com/heading-customize

      「ブログ」の右線を消すCSSです。

      .header_scrolled .gMenu>li:last-child {
      border-right: none;
      }

      決して、先生などではありませんので…(^_^;)

  4. サラ より:

    お世話になっております。 サラです。

    「ブログ」の右線を消すCSS教えて頂いてありがとうございます。

    コピペしました・・・・・で!

    みごとに消えました!! 

    「やったぁ!」と思わず万歳してしまいました。\(^0^)/ 感謝です!

    私の場合、
    6年ほど前にHTMLとCSSを学び、数か月ほど他のサイトを作成していました。
    その後にトレンドになったのがWordPressで、
    ビズベクトルをテーマにして
    今のサイトを作成し、そのまま更新も止まってました。

    CSSの知識も時間とともに頭から消滅・・・・初心者レベルに戻っていました。

    CSSで何ができるか・・・は知っていても
    コードの知識がなくてもサイトが作れるWordPressに依存して、
    自分で書けない状態になっていました。

    CSS、面白いですよね!

    今は、現在のサイトのテーマをLightningにしたばかりで、
    リニューアルに忙しいのですが、
    また勉強したくなりました。

    「CSSのセレクタの調べ方」の記事も含め、
    またこちらのサイトで学ばせてもらいます。

    初心者の目線で記事が書かれているので、
    とてもわかりやすいです。

    サラのようなCSSって・・・・思い出せない(遠い目・・・)の
    人たちにとっては
    やはり“いくぞう先生”ですよ!

    ネットは便利ですが、質問の答えを
    ここまで明確に得られることは稀です。

    リニューアルに忙しいですが、
    合間、合間に
    またお邪魔しますね (*^_^*)

    • ikuzo|いくぞう より:

      サラさん、無事に線も消えたようでよかったです!

      なるほど、そういう経緯があったんですね。

      最初に緑色に透過した背景のCSSを連絡した次の日に、
      文字の色や透明度も変わっていたので「あれ?」って思ったんですよね(笑)

      そんな大先輩のような方に、数々のご無礼、大変失礼いたしました(〃ノ∇ノ)

      サイトのリニューアル、頑張ってください!
      水彩画の技法などを紹介されているだけあって、とても綺麗なサイトですよね。

      ちなみに私は学生のころ、水彩画がとても苦手でした。
      そのころサラさんのサイトに出会えていたら…、といった感じです。

      今回はそんな素敵なサイトのお手伝いが少しでもできて、大変光栄です(^_^)
      何かあればまたご連絡ください!

      サラさんのサイト
      『水彩セラピー 水彩時間 水彩の技法と描き方。癒しのぬり絵』
      https://suisai-jikan.com/