Cocoonユーザーさんに
カスタマイズお疲れ様です^^
何か御用があれば、記事下にあるコメント欄よりどうぞ❦
スポンサーリンク

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

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

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

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

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

Cocoonグローバルメニューに画像を付けるCSSコピペカスタマイズ

スポンサーリンク

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

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

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

運営者に連絡

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

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

運営者に連絡

サイトマップWordPressのバックアップ・復元

HTTPステータスコード403・404・500

運営者『かうたっく』について

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

画像を入れるにあたって、どの方法が初心者さん的にカスタマイズしやすいかを考えたワケですが、ナビの表示順に左から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;
	}
}
かう@エラーで困る人用ページ(@kautakku)さん | Twitter
かう@エラーで困る人用ページ (@kautakku)さんの最新ツイート 初心者に解りやすく内容を紹介するブログを書く人 エラーで困った人への記事が中心❦ ブログ書くのキライ・WordPressと子どもが好き ビバ★りずむを運営。エントリーは あたりでシェアしてます。 不思議な世界 by子どもの言葉

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と指定するみたいな。要素の検証画面の使い方をマスター出来たら挑戦してみてくださいね^^

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

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
Cocoonカスタマイズ
フォローする
スポンサーリンク
スポンサーリンク
ビバ★りずむ

Comments

  1. gumby より:

    かうたっく様

    いつもcocoonフォーラムでお世話になっております。

    今回、いま制作中のサイトでやりたいことがかうたっく様のブログにドンピシャあったので質問させていただいていいでしょうか?

    (と言っても、数日前に一度このコメント欄に書き込んだ気もするのですが、その後見失ってしまったので重複していたら申し訳ございません…)。

    グローバルメニューに

    A:画像を仕込んで、
    B:マウスオーバーしたら画像はハーフトーン&タイトルの文字に色をつける

    というようなことがしたいのです。

    Aはかうたっく様の記事からいけると思って準備したのですが(画像サイズは680 x 452px)、Bのエフェクトについてのご意見をいただければ幸甚です。

    お忙しいところ大変恐縮ですが、よろしくお願いいたします。

  2. かうたっく かうたっく より:

    gumbyさんに

    Ano画像は最適なサイズに編集したほうが良いと思います。というのも全ページで読み込まれるからです。またCSSのソースも増えるのもあったり。

    Bですが、ハーフトーンのイメージがよく分からないので何とも言えないかもです。

    hoverでタイトルの文字色を変更するのは一括で変更すれば良さそうですね!

    #navi-in .item-label:hover {
    	color: #f00;
    }
  3. gumby より:

    かうたっく様

    お礼遅くなってすみません…。

    もう少し詳しくお聞きしたいのですが(いかんせん素人なので)、

    Aの「画像は最適なサイズに」というのは、具体的にはどのくらいというのをご教示いただけないでしょうか。ちょっと小さすぎるのでしょうか。

    Bについては、背景画像が50%くらいの透明度になり、文字が立ってくるイメージです。そして、ご教示いただいたコードは、どこに入れたらいいのでしょう?
    (こんなことまで伺って申し訳ございません!)

  4. かうたっく かうたっく より:

    gumbyさんへ

    画像は最適なサイズに

    人によるかも。ですが記事内に書いているように、だいたいこんな感じです。

    https://bibabosi-rizumu.com/cocoon-navi-img/#toc1

    大きな画像を数枚全ページで読み込むより、最適(そのサイト的にあった)ジャストサイズのほうが軽いので良いと思います。

    該当サイトのジャストサイズは、実際表示している画像の大きさ。コレがジャストサイズだと思いますよ。

    文字が立ってくる

    テキストshadowを使ったら良いかもしれないです?

    /* ナビのラベル(文字)hover時のスタイル */
    #navi-in .item-label:hover {
    	top: 0;
    	bottom:0;
    	transform: translateY(40%); /* 数値は自身で調整 */
    	text-shadow: 3px 4px 8px #6e6c6c; /* 文字、浮き上がるスタイル */
    }

    コードは、どこに入れたらいいのでしょう?

    https://bibabosi-rizumu.com/cocoon-navi-img/#toc3

    この項目内にある
    /* ココまでナビリンクonマウス :不要なら削除 */

    この一行を消し、同じ場所に書けばOK❦

    背景画像が50%くらいの透明度

    イロイロ試してみました。結果的にこのサイトの構造では、以下のCSSが手っ取り早いようです。画像のパス部分には、画像URLを。

    #navi #menu-item-12073 a:hover {
    	background: url(画像のパス) no-repeat;
    }

    もし時間をかけて調べるのであれば、 親要素の背景画像のみ 透過して、子要素の文字は透過しないCSS みたいな事なので、検索して実際試してみるのが良いかも知れないです。って言うアドバイスのみとさせていただきますね❦

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております?

トップへ戻る
タイトルとURLをコピーしました