【Cocoon】おしゃれなヘッダーメニューにカスタマイズする方法

むさ

今回は、メニューの中でも一番ユーザに見られる、ヘッダーメニューのカスタマイズ方法について紹介させていただきます。

さび

当ブログ『ムササビやねん』のヘッダーメニュー設定、CSSをもとにカスタマイズ手順を紹介させていただきます！

Cocoonカスタマイズ第1弾として、ヘッダーメニューのカスタマイズについてご紹介させていただきます。

▼この記事はこんな方におすすめ

おしゃれなヘッダーメニューにカスタマイズして、ブログのモチベーションを高めましょう！

ヘッダーメニューの完成イメージ

むさ

今見ていただいてる、当ブログのヘッダーメニューが完成イメージです！

▼特徴

ヘッダーメニューの設定方法

▼注意！！！

まずはじめにヘッダー設定からです。
ヘッダー設定は①サイドバーのCocoon設定→②ヘッダーで設定できます。

ヘッダーレイアウト

ヘッダーメニューの表示位置を設定します。

当ブログの設定は『トップメニュー（右寄せ）』です。

むさ

色々な設定を試してしっくりきたものに設定してください！

ヘッダーの固定

画面を下にスクロールした際、ヘッダーメニューが上から出てきて固定するかを設定します。

当ブログの設定は『ON（チェック）』です。

高さ

PCでのヘッダーメニューの高さ(px)を指定します。

当ブログの設定は『60』です。

高さ（モバイル）

モバイルでのヘッダーメニューの高さ(px)を指定します。

当ブログの設定は『なし（デフォルト）』です。

ヘッダーロゴ

ヘッダーメニューに表示するロゴを設定します。

さび

当ブログのロゴはCanvaで作成しました。無料でおしゃれな素材・フォントが使えるのでお試しください！

Canvaでのサイズの設定は『幅700 (px) × 高さ121 (px)』で作成しました。

ヘッダーロゴサイズ

ヘッダーロゴのサイズ(px)を指定します。

当ブログの設定は『幅346 (px) × 高さ60(px)』です。

キャッチフレーズの配置

キャッチフレーズの配置位置を設定します。

当ブログの設定は『表示しない』です。

ヘッダー背景画像

ヘッダーの背景画像を設定します。

当ブログの設定は『なし（デフォルト）』です。

ヘッダー背景画像の固定はONにすると、下にスクロールした際に画像がその場所にとどまるようになります。

当ブログの設定は『OFF（チェックなし）』です。

むさ

ホーム画面の木や飛んでいるムササビのイラストは、Cocoon設定 > アピールエリアで設定しています！

【Cocoon】おしゃれなトップ画面に！アピールエリアの設定方法

Cocoonのアピールエリアをおしゃれにカスタマイズする方法を、設定からCSSまで詳しく解説していきます！無料テーマでもおしゃれなトップ画面にしたい方におすすめです。

ヘッダー全体色

ヘッダー全体背景色はヘッダーメニューエリアの背景色を設定します。

当ブログの設定は『#f7f7f5』です。

さび

Cocoon設定 > 全体のサイト背景色と同じ色に設定しています！

色コードの取得は『color picker』で検索！

ヘッダー全体文字色はヘッダーメニューエリアの文字色を設定します。

当ブログの設定は『なし（デフォルト）』です。

ヘッダー色（ロゴ部）

ロゴエリア背景色はグローバルナビ上のヘッダー背景色を設定します。

当ブログの設定は『なし（デフォルト）』です。

ロゴ文字色はグローバルナビ上のヘッダーテキスト色を設定します。

当ブログの設定は『なし（デフォルト）』です。

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

グローバルナビ色はグローバルナビ全体の背景色を設定します。

当ブログの設定は『なし（デフォルト）』です。

グローバルナビ文字色はグローバルナビ全体のテキスト色を設定します。

当ブログの設定は『#4d4435』です。

むさ

グローバルナビは、当ブログのhome・profile・contactのことです。
Cocoon設定 > 全体のサイトフォントの文字色と同じ色に設定しています！

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

トップメニュー幅はグローバルナビのメニュー幅(px)を設定します。

当ブログの設定は『176（デフォルト）』です。

メニュー幅をテキストに合わせるはメニューの文字数に合わせて幅を可変にするかを設定します。

当ブログの設定は『ON（チェック）』です。

サブメニュー幅はグローバルナビのサブメニュー幅(px)を設定します。

当ブログの設定は『240（デフォルト）』です。

さび

Cocoon設定はここまで！

CSSで装飾をカスタマイズ

続いてCSSを編集していきます。
CSSは①サイドバーのテーマファイルエディタ→②スタイルシート(style.css)で編集できます。

▼注意！！！

むさ

当サイトはスキンをなしに設定しています。
スキンを設定していると上手くいかない可能性があります。ご了承ください。

/* ①ヘッダーロゴ */
.header-site-logo-image {
	transition:0.5s;
}

/* ②ヘッダーロゴ(hover時) */
@media screen and (min-width: 980px) {
	.header-site-logo-image:hover {
		opacity:0.8;
	}
}

/*③グローバルナビの下線*/
#navi .navi-in a:after{
	position: absolute;
	content: "";
	left: 0px;
	bottom: 1px;
	height: 2px;
	width: 100%;
	background: #8cab8b;
	transform: scale(0,1);
	transition: 0.5s;
}

/*④グローバルナビの下線(hover)*/
@media screen and (min-width: 980px) {
	#navi .navi-in a:hover:after{
		transform: scale(1);
	}
}

/*⑤メニュー項目の間隔*/
#navi .navi-in>ul>li>a{
	padding: 0 2.0em;
}

/*⑥選択中メニューに下線*/
.current-menu-item:after{
	position: absolute;
	content: "";
	left: 0px;
	bottom: 1px;
	height: 2px;
	width: 100%;
	background: #8cab8b;
}

このコードをコピーして、スタイルシート(style.css)に貼り付けてください。
皆様のブログに合わせて調整する方法を解説します！