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

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

こんにちは、ikuzo(いくぞう)です。

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

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

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

 

面倒かもしれませんが、思い通りのメニューが完成すると

やったー!!」と喜びも大きいので、今から一緒に作ってみましょう。

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

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

スポンサーリンク

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

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

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

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

先に用意なければなりません。

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

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

 

では、あらためてグローバルナビメニューの作成に取りかかりましょう。

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

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

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

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

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

プー太郎
プー太郎

メニュー名は「メニュ子ちゃん」にしてもいいの?

メニュー名は本人だけが見るものなので、まったく問題ありません。

 

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

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

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

まず「ホーム」は、「カスタムリンク」を押してURLの欄にトップページのアドレスを、

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

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

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

メニューに登録したいカテゴリー全てに チェックを入れ、「メニューに追加」を押します。

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

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

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

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

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

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

詳しくは、こちらの記事をご覧下さい。

【Cocoonの始め方】スキンやキーカラーでデザインを設定しよう

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Cocoonのグローバルナビメニューの各項目のデフォルト幅は「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の設定方法やカスタマイズのやり方をいくつか紹介してます。

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

プー太郎
プー太郎

見てねー

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

 

ikuzoの『Cocoonかんたんカスタマイズシリーズ

【Cocoon】ヘッダーモバイルボタン(スマホメニュー)をカスタマイズ
【Cocoon】ブログカードを自分流にカスタマイズしよう
【Cocoon】初心者向け 目次の設定方法とかんたんなカスタマイズ

コメント