Cocoonユーザーさんに
やりたいカスタマイズがあれば、お問い合わせよりお待ちしてます。
または検索窓に『Cocoon ○○ カスタマイズ』など入力してください。

Cocoon!headerロゴ・ヘッダー背景画像をCSSだけでページ毎にスタイル変更するカスタマイズ

スポンサーリンク

ページ毎にheaderロゴをCSSで着せ替え:ブルー・パープル・ピンクの服

CocoonのCocoon設定からヘッダーにロゴ:画像をいれているけど、ページ毎にロゴ(header画像)を変更したい。背景画像をガラリと変えたい。アップデートの影響を考えてPHPファイルは触りたくない。

Cocoonユーザーさん専用スタイル指定です。

さっそくですが、固定ページやカテゴリ毎に表示を変更など…色んなパターンが膨大にあるので、記事IDを使用する方法を別ページで紹介してます。

.page-id-** **はページ毎に振り分けられたID(数字)をいれてください。

投稿ページ毎・カテゴリ一覧毎・投稿カテゴリ別・タグ一覧毎などに変更したい場合の指定方法は以下を参考にどうぞ。

LINKWordPressで記事・カテゴリ・タグ一覧・固定ページ毎にデザイン変更するCSS

スポンサーリンク
スポンサーリンク

はじめに。このページの画像URL、指定方法について

このページの画像URLの指定方法は、すべてurl("images/hoge.png")と短くしてます。

画像のパスを短くする理由

Cocoonでは固定ページ・投稿ページでAMP対応ができ、AMPページはCSSの容量が5万バイト以上になるとAMPエラーになるから。

  • AMPエラーになった該当ページは、AMPのスマホ検索流入が無くなるため
  • 画像のURLを短くして容量削減・軽量化したいから

FTPソフトで子テーマフォルダ内にimagesフォルダを準備、画像名をローマ字にして入れるだけ。

  • imagesと言う名前のフォルダを作る
  • その中に画像をいれる
  • 子テーマフォルダ内にimagesフォルダをアップロード
    • 以降:FTPで子テーマimagesフォルダ内に画像を入れる
    • 画像の名前は正確に。hoge.png・hoge.gif・hoge.jpg

/your-domain.com(/public_html)/wp-content/themes/cocoon-child-masterフォルダ内

Cocoon子テーマ内にimagesフォルダをアップロード:FFFTP

これで画像のパスが、素敵なほど短くなりCSS容量が節約できるからオススメです^^

url("images/hoge.png")

url(https://bibabosi-rizumu.com/public_html/wp-content/uploads/2018/07/hoge.png)

AMPページにも反映させたい場合

外観テーマの編集より右サイドにあるamp.cssに追記すればOK!

追記するのは、固定ページ・投稿ページのみ。カテゴリ一覧ページは書いても読み込みません。※例えばカテゴリに属する投稿記事は反映します!

AMPページでボーダー・ボックスシャドーが変な位置に付くとき

CSSにヘッダーロゴのボーダー・ボックスシャドーなどスタイルを書いている場合、変な所にシャドーや線がはいります。

オカシイ場合はボーダーを入れた場所を指定し、amp.cssに追記してください。

.page-id-** .logo a amp-img {
	box-shadow: none;
	border: none;
}

ヘッダーロゴをページ毎に変更したい

headerロゴが小さい場合

Cocoon公式ページのようにヘッダーロゴが小さい場合。

/*
 * ページ毎にヘッダーロゴを変更 *
 ********************************/
/* 元のロゴ画像を非表示 */
.page-id-** .logo > a img {
	visibility: hidden;
}
/* ページ毎にロゴ画像を指定 */
.page-id-** .logo > a .site-name-text {
	display: inline-block;
	background: url("images/hoge.png") no-repeat;
	background-size: contain;
	background-position: center;
}

background-positionは位置をセンターに指定してます。

位置を変更するには左から30%の位置で上から10%に指定したい場合は、 background-position: 30% 10%;と指定し表示させたい位置を決めてください。

left center rightでも指定可能です。

headerロゴを画面いっぱい、スマホビューで画像の中央に寄せて表示

ヘッダーロゴの画像を画面いっぱいにしている場合で、スマホビューは画像の中央を見せて表示したい場合。

.headerにある画像の高さheightは画像サイズの高さを指定してくださいね。

/*
 * ページ毎にヘッダーロゴを変更 *
 ********************************/
/* 元のロゴ画像を非表示 */
.page-id-** .logo > a img {
	visibility:hidden;
}
/* ページ単位で背景画像指定 */
.page-id-** .header {
	background-image: url("images/hoge.png");
	height: 357px;
}
/* 画像にかぶったサイトディスクリプション */
.page-id-** .tagline {
	color: #fff;
	padding: 0.5em
}

画像の色によって、サイトディスクリプションの色が気になる場合は白#fff・黒#000000・赤#ff0000・ブルー#0025ffなどに変更してください。

要素の検証画面上でもできますが、使い方が不明なばあいChrome拡張機能もありますよ。

LINKオススメ拡張機能ColorZilla!web上で見つけた色をカラーコードにする

LINK要素の検証(デベロッパーツール)の使い方!初心者がカスタマイズできる方法

headerロゴを画面いっぱい・スマホビューでも画像を全てを表示する

ヘッダーロゴ画像を画面いっぱいに、スマホビューでも同じ画像を表示させたい場合。

/*
 * ページ毎にヘッダーロゴを変更 *
 ********************************/
/* 元のロゴ画像を非表示 */
.page-id-** .logo > a img {
	visibility:hidden;
}
/* 元の背景画像を消す */
.page-id-** .header {
	background-image: none;
}
/* 新たなヘッダーロゴを入れる */
.page-id-** .logo > a .site-name-text {
	display: inline-block;
	width: 1054px;
	max-width: 100%;
	height: 36vw;
	max-height: 378px;
	background: url("images/hoge.png") no-repeat;
	background-size: contain;
}
  • 『メイン+サイドバーの横幅』にあわせて画像を作り、横幅widthと高さmax-heightをご自身で指定する

完全レスポンシブなので横幅によって高さを変える必要があります。

  • 画像の幅1054px高さ378pxの画像でしたらheight: 36vw;のように、アクセスしたスマホの横幅によって画像の高さを指定する

ご自身で確認して微調整を行ってくださいね。

ヘッダー背景画像をページ毎に変更したい

ヘッダーロゴはそのままで、Cocoon設定で指定したヘッダー背景だけを変更したい場合。

/*
 * ページ毎にヘッダー背景を上書き *
 ********************************/
.page-id-** .header {
	background-image: url("images/hoge.png");
}

WordPress機能、外観カスタマイズ背景画像から設定できる詳細なスタイルを入れたい場合は以下を参考にスタイルを追加して、思い通りに反映させると良さそうですね❦

LINKWordPress!ページ・カテゴリ毎に背景画像を変更CSSほぼコピペ

さいごに

スタイルがどうしても反映しない・・・。。なぜ??ってときは、プラグインのキャッシュを削除・サーバーのキャッシュを削除してください。

エックスサーバーなら高速化設定のmod_pagespeedは非常に相性が悪いので、停止しておくことをオススメします!

その他反映しないときは以下をどうぞ。

LINK初心者のCSSが反映されない原因の1つ!優先順位の詳細度とは

LINKCSSが効かない原因!反映させるため、ブログ初心者さんが確認する7つのこと

何か書き忘れてないか???・・・大丈夫かな?

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

Comments

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

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

トップへ戻る