【WordPress】Cocoonのヘッダーメニュー簡単カスタマイズ集

Cocoon

連続でカスタマイズ記事ですが、今回はCocoonにおけるグローバルメニューのカスタマイズです。
グローバルメニューを使っていない人には意味がないですが、使っている人にっては、サイトの印象に大きく影響を与えるのがこのグローバルメニューの見た目です!

今回もコピペで出来ますので、お試しください。
今回は細かく説明していきます。

コチラの記事でCocoonのカスタマイズ記事をまとめています。

【高機能すぎる】無料テーマCocoonのカスタマイズまとめ!
高機能なWordPressテーマ「Cocoon」 なんだったら、カスタマイズなんて必要はないですが、やはり多少はカスタマイズしないと個性があまり出ないような気もします。 そのため、当ブログで細かいカスタマイズ記事を少しずつ書いていま...
スポンサーリンク

子テーマを使用しましょう

カスタマイズをするので子テーマを使いましょう!
子テーマの使い方がわからない場合は、こちらの記事を参考にしてください。

【WordPress】テーマをカスタマイズをするときは、子テーマを使うべし!
WordPressの機能の一つとして、 「子テーマ」というものがあります。 ブログを書き始めた方の場合や、 WordPressを使い始めた方の場合は、 「子テーマ?なんだそれ」とか 「親テーマにそのままコードを書けばいいじゃん...
【WordPress】子テーマの導入方法と使い方を覚えてガンガンカスタマイズする!
前回こちらの記事で、 子テーマの重要性について説明しました。 今回はその子テーマの導入方法と、 使い方についてご説明します。 子テーマを導入する! 子テーマを導入する方法は2通りあります。 1つは親テーマと一緒にダウ...

Cocoonの子テーマ導入方法はこちらの記事で紹介しています。

【初心者向け】Cocoonの導入方法と子テーマの使い方だよ!
高機能無料WordPressテーマ「Cocoon」 3月頃からβ版が公開され、作成者である「わいひら」さんが、利用者の意見を広く取り入れ、先月7月から正式公開となりました。 β版は会員登録をしなければ、ダウンロードできませんでしたが...

デフォルト

まずはデフォルトの状態を確認してみましょう。
デフォルトはこんな感じ

若干物足りない感が否めません。
ここからカスタマイズしていきます。

まずは準備

実際にコードを入れてカスタマイズする前に、準備をしておきましょう。
グローバルメニューの背景色と文字色はCocoonの管理画面から設定できるので、予め設定しておきましょう。

ここで設定していないとこれからやるカスタマイズが上手く反映されない場合はがあるので、文字色等が「白」でも、必ず【#fff】等で設定しておいてください。

文字を太文字にする

細かい設定ですが、印象が大きく変わるのがこの「太文字にする」です。
柔らかい印象になります。

それではやっていきましょう
下記のコードをstyle.cssに追記します。

nav#navi, .menu-header .sub-menu{
	font-weight: bold;
}

以上です(笑)

このようになります。

画像ではわかりにくいですが、柔らかい印象になってます・・・よね?(笑)

グローバルメニューの下に影を付ける

次に行きましょう(笑)
次はグローバルメニューの下に影を付けることによって、メインコンテンツとの境目が浮いているかのように見えるカスタマイズです。

影を付ける場合は、以下のコードをコピペしてください。
なお先程の「太文字にする」と同様のクラス名ですので、先程のカスタマイズをした場合は、そのclassに【box-shadow:~】を追記してください。

nav#navi, .menu-header .sub-menu{
	font-weight: bold;
	box-shadow:0 5px 15px -5px rgba(0,0,0,.8);
}

このカスタマイズでこのようになります。

このカスタマイズをすると結構印象が変わります。
なお影の濃さですが、グローバルメニューの色が濃いと、影がわかりずらいです。
また、グローバルメニューの色が薄いと影がすごく濃くなります。
影の濃さの簡単な調整は、上記コードの【box-shadow:0 5px 15px -5px rgba(0,0,0,.8);】のうち、最後の【.8】の数字を変更するとすると調整できますのでお試し下さい。

メニューにカーソルを乗せると下線が出てくる

グローバルメニューにホバーすると、アニメーションのような感じで、下線が浮き出てくるカスタマイズです。

下記のコードをコピペしてください。

.menu-header .menu-item:hover{
	 border-bottom:3px solid #FDD835 !important;/*線の太さ色*/
	    transition: all .3s;/*線が出てくる時間*/
}
.sub-menu .menu-item:hover{
	border-bottom:none !important;
}

コチラのカスタマイズでマウスのカーソルを乗せると以下のようになります。

なおコードの横に記載しているコメントに対応箇所を変更すれば、好みの色などに変更できるようになっています。

まとめ

とりあえず今回はここまでです。

気が向いたらグローバルメニューのカスタマイズを増やしていこうと思います~

コピペも良いですが・・・

Cocoonは高機能で人によってはカスタマイズなんて必要ないかもしれませんが、HTMLやCSSの知識あるとないとでは、トラブルがあった時に大きく違ってきます。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ!

私が使用したおすすめの本はこちらです。

コメント