Cocoon！ヘッダーナビに画像を入れる、コピペCSSのカスタマイズ

グローバルナビに自作画像を入れると、サイトの差別化ができると共に、文字情報ではなく視覚・感覚的に内容がわかりやすい、さらに目に留まりやすい…などのメリットがあります。

メニューに画像を使うのは、お店も同じで『どんなメニューか分かりやすい』です。

前テーマSimplicity2からグローバルナビに画像を取りいれたけど、CocoonのナビはCSSのコピペでほぼ対応できるので、初心者さんにもハードルはかなり低いはず！

一応いろんな状況を考えて作ったので、画像ができたら導入してみてください❦

グローバルナビに入れる画像について

画像の大きさはCSSで調整してるので、多少大きめの画像を入れても表示的には問題ありません。※画像は軽いほうが良いのでTinyPngなどでキレイに圧縮する事をオススメします。

CSSで表示する際以下のように縦・横100pxの領域に収まるよう指定済みです。

ただ実際の大きさは適当で、だいたい四角っぽい感じで作ればOK！

以下、CSSで背景として表示させている画像の一部。私の場合これだけサイズは適当でも対応可能です＾＾

グローバルナビの設定について

画像を入れるにあたって、どの方法が初心者さん的にカスタマイズしやすいかを考えたワケですが、ナビの表示順に左から1・2・3・4…と数えて指定するのが一番カンタン！

この場合外観ナビにあるナビ設定で以下項目にチェックが入ってない事を確認してくださいね。

メニュー設定
固定ページを自動追加 このメニューに新しいトップレベルページを自動的に追加

自動でナビを追加したら、左から順番に指定した画像もズレるCSSの指定法という事です。ズレても修正は簡単だけど、一応あたまの片隅にでも置いていただければ❦

• ナビの数は9個までを想定して作成してます。

追加したメニューの画像は、以下のように簡単に追加するのもスッキリして見やすいですよ。画像の差し替えはCSSで編集できるのもメリットかも！

Cocoon用グローバルナビに画像をいれるコピペCSS

PCビューのみに指定しCSSに説明を入れてるので、後はコピペして左右の余白など調整してもらえれば。

補足説明！

• ナビが9個あると想定してますが、5個の時は6～9つ目は削除すればOK！
• background: url(画像のURL)には作成した画像のパスを入れる

background: url(https://bibabosi-rizumu.com/wp-content/uploads/2017/12/contact.png)

こんな感じ。

• 子カテゴリがある時用に、ほぼ親メニューのみ指定済み
• タブレットも表示させたい時は以下数値を750px位に変更し、調整してくださいね。

@media screen and (min-width : 769px)

/* ************ *
 * PCnaviに画像 *
 * ************ */
@media screen and (min-width : 769px) {
	/* メニューの余白・幅・高さ指定 */
	.navi-in > ul > li {
		line-height: 1.2;
		margin: 1em 1em; /* 上下1em　左右1em→0.6emで余白が狭く */
		width: 100px;
		height: 130px;
	}
	/* ナビ領域下余白 */
	.navi-in .menu-header {
		padding-bottom: 1em;
	}
	/* 背景画像の領域：リンク */
	#navi-in > ul > li > a {
		width: 100px;
		height: 100px;
		display: inline-block;
		font-size: 0.75em; /* 文字サイズ変更時：子カテゴリがあれば要調整 */
		position: relative;
		background-size: cover; /* 画像サイズ調整 */
		background-position: 50%;
	}
	/* 子カテゴリがある時のマーク */
	.navi-in > ul > .menu-item-has-children > a::after {
		top: 7.5em; /* 文字サイズ変更時：要調整 */
		right: -0.9em;
	}
	/* 1つ目 */
	.navi-in > ul > li:nth-child(1) > a {
		background: url(画像のURL) no-repeat;
	}
	/* 2つ目 */
	.navi-in > ul > li:nth-child(2) > a {
		background: url(画像のURL) no-repeat;
	}
	/* 3つ目 */
	.navi-in > ul > li:nth-child(3) > a {
		background: url(画像のURL) no-repeat;
	}
	/* 4つ目 */
	.navi-in > ul > li:nth-child(4) > a {
		background: url(画像のURL) no-repeat;
	}
	/* 5つ目 */
	.navi-in > ul > li:nth-child(5) > a {
		background: url(画像URL) no-repeat;
	}
	/* 6つ目 */
	.navi-in > ul > li:nth-child(6) > a {
		background: url(画像URL) no-repeat;
	}
	/* 7つ目 */
	.navi-in > ul > li:nth-child(7) > a {
		background: url(画像URL) no-repeat;
	}
	/* 8つ目 */
	.navi-in > ul > li:nth-child(8) > a {
		background: url(画像URL) no-repeat;
	}
	/* 9つ目 */
	.navi-in > ul > li:nth-child(9) > a {
		background: url(画像URL) no-repeat;
	}
	/* メニュー名 */
	#navi-in > ul > li > a .item-label {
		position: absolute;
		bottom: -20%; /* 位置調整 */
		font-weight: bold;
		/*text-shadow: 1px 1px 0 #fff;*/
		left: 0;
		right: 0;
	}
	/* 短めcaptionを付けているとき */
	.navi-in > ul .menu-item-has-description > a > .caption-wrap > div {
		position: absolute;
		bottom: -3.6em;
	}
	/* ナビ名の色 */
	.navi-in a .item-label {
		color: #ed98ff;
	}
	/* ナビ名の色：hover */
	.navi-in a .item-label:hover {
		color: #be98ff;
	}
	/* ナビ背景色 */
	.navi {
		background-color: #fff0; /* 白透明に指定 */
	}
	/* ココまでナビ背景色：不要なら削除 */
	/* ナビリンクonマウス */
	.navi-in a:hover {
		background-color: #fff0; /* 白透明に指定 */
	}
	/* ココまでナビリンクonマウス ：不要なら削除 */
}

メニュー名が2行になる時の対処CSS

調整前・後の比較

メニューが2行になったとき、画像下にあるメニューのリンクの位置が上にずれてオカシクなります。その場合は追記してください。

#navi-in > ul li:nth-child(★半角数字★)

左から4個目がずれている場合、4と指定。

#navi-in > ul li:nth-child(4)

@media screen and (min-width : 769px) {
	/* メニュー名が2行になるとき */
	#navi-in > ul > li:nth-child(★半角数字★) > a > div > .item-label {
		bottom: -38%;
	}
	/* 子カテゴリがあるとき */
	#navi-in > ul > li:nth-child(★半角数字★) > a:after {
		top: 8em; /* 上で7.5emで指定、変更したい場合 */
	}
	/* 2行でキャプションありのとき */
	#navi-in > ul > li:nth-child(★半角数字★) > a > div > .item-description {
		margin-bottom: -1.2em;
	}
}

Tweet / Twitter

twitter.com

2列になる文字列が複数ある場合の書きかた

/* メニュー名が2行になるとき */
#navi-in > ul > li:nth-child(2) > a > div > .item-label,
#navi-in > ul > li:nth-child(5) > a > div > .item-label,
#navi-in > ul > li:nth-child(8) > a > div > .item-label {

例）左から、2個目・5個目・8個目のとき。赤字,を入れて上と同じような構成で指定

PC検証画面でメニューの固有ID指定方法

#navi-in > ul li:nth-child(1)などの指定は検証画面でPCナビのリストの確認ができるのであれば、それを指定すればもっと良いと思います。

F12キーなどで検証画面を開きIDを知りたいメニューを選択

検証画面のHTMLメニューの固有IDのチェック方法

<div id="navi-in" class="navi-in wrap cf">
<ul id="menu-top-navi" class="menu-header">
<li id="menu-item-15337" class="menu-item …略…

この場合#menu-item-15337と指定するみたいな。要素の検証画面の使い方をマスター出来たら挑戦してみてくださいね＾＾

それでは。かうたっくでした！