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つのこと

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

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

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

Comments

  1. 鈴木 より:

    かうたっく様

    お世話になっております。鈴木です。

    質問の仕方がうまくできず、申し分ありませんでした。

    かうたっく様のおっしゃっる通り、

    『サイトタイトル・キャッチフレーズ』だけを『Mplus 1p(WEBフォント)』に変更したい。

    と考えております。

    ネットで検索したところ、Google Fontsを使用してフォントを変更することが可能のようでしたので(「Mplus 1p」は初めて知りました)、それを試してみたのですが、6種類ほどフォントがあるにも関わらず実際に使用できるのが1種類だったため、大丈夫なのか不安になった次第です。

    少し調べてみたところ、Google Fontsも「Mplus 1p」同様にHTMLとCSSへの編集で使えるようですので、明日以降調べてみようと思います。

    質問の意図としましては、Google Fontsで使用できる日本語のどのフォントのコードをHTMLとCSSにコピペして入力しても、私の場合全て同じ1種類のフォントでサイトに表示されたため、不具合があるのではないかと心配になったということでした(うまく表現できていないかもしれませんが)。

    CSSはともかくHTMLを触るのは初心者の私にとってはかなり怖いことなので、なにか間違えたかな、と思いました。

    質問の仕方が下手ですみません。

    「Mplus 1p」の使用を明日試してみて、またご報告いたします。

    鈴木

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

    鈴木さんに❦

    Google Fontsで使用できる日本語のどのフォントのコードをHTMLとCSSにコピペして入力

    どこにどのようなHTMLを書きましたか?CSSはどのように書きましたか?

    ここでは画像が使えないので、Cocoonフォーラムが良ければそちらで質問されても大丈夫です。
    文字列だけで詳細を書いて頂けるのであれば、コチラでも大丈夫です^^

  3. 鈴木 より:

    かうたっく様

    いつもいつも、大変お世話になっております。鈴木です。

    ご返信いただきまして、どうもありがとうございます。

    HTMLには、以下をコピペしました。貼り付けた場所は、子テーマheader.phpの内です。

    Cocoonのテーマエディター→css内には、以下をコピペして貼り付けています。

    .site-name-text{
    font-family: ‘Noto Serif JP’serif;
    color:#ffffff;
    }

    .tagline {
    font-family: ‘Noto Serif JP’serif;
    color:#ffffff;
    }

    cssのコードに関しては、Google Fontsに用意されているものをコピペするとエラーが出てしまったので、ネットで検索して見つけたcssコードをコピペし、font-familyの「‘Noto Serif JP’serif;」部分のみをGoogle Fontsから該当フォント名を拾って入力しました。

    フォントごとにHTMLとcssのコードが用意されていて、それをコピペして貼り付けるだけの仕様になっているのですが、どのフォントのどのコードをコピペしても同じフォントが表示されてしまいます。

    私のやり方が間違っているのかもしれませんが、1番の不安は、このままGoogle Fontsを使い続けて不具合が生じてしまわないかということです。

    もし何かご存知でしたら、お手すきの際にでも教えていただけますでしょうか。

    とりあえず、私のような症状が他の事例でもないか、今一度検索してみようと思います。

    鈴木

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

    鈴木さんに

    HTMLには、以下をコピペしました

    HTMLは以下のようなコードでしょうか?

    <link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP" rel="stylesheet">

    参考:https://fonts.google.com/specimen/Noto+Serif+JP?selection.family=Noto+Serif+JP

    cssのコードに関しては、Google Fontsに用意されているものをコピペするとエラーが出てしまった

    どのようなエラーがでましたか?具体的に教えていただけますか?

     

    font-family: 'Noto Serif JP', serif;

    head内にlinkタグを入れたら、上記を装飾したい場所に貼り付ける感じだと思いますよ。

    /*---------------------------------
    サイトタイトルのカスタマイズ
    --------------------------------*/
    .site-name-text-link,
    .tagline {
    	font-family: 'Noto Serif JP', serif;
    }

    フォント使用ビフォーアフター

    ちなみにご提示いただいたCSS(以下)はダメなパターンです。が大文字なので。。

    font-family: ‘Noto Serif JP’serif;
  5. 鈴木 より:

    かうたっく様

    さっそくお調べくださいまして、どうもありがとうございます。鈴木です。

    head内にコピペ・入力しましたコードを入れ忘れておりました。
    たいへん失礼いたしました。

    かうたっく様が聞いてくださったように、head内に入力したのは以下のものになります。

    Google Fontsに用意されているcssのコードエラーにつきましては、かうたっく様のご指摘のとおり「’」が問題だったようです。

    再度コピペして試してみたところ、英語による警告文は以下のようなものでした(以前に警告文が出た際には、恐ろしくてすぐにコードを消してしまっていたので、きちんと見ていませんでした)。

    expectid a function or indent after colon at line 392 col 12
    (392行目の12行目で、関数の指定またはコロンの後のインデント)

    かうたっく様がご指摘されているとおり、「‘」と「’」が大文字なのでダメだったようなのですが、自分でそれに気付くことができませんでした(警告文でお知らせしてくれているにも関わらず、恥ずかしながらどこがエラーなのかわかりませんでした)。

    かうたっく様がご用意くださった正しいコードを入力したら、あっさり反映されました。

    初歩的なことばかり伺ってお時間を取らせてしまい、恐縮する限りですが、おかげさまでとりあえずの不安が解消されました。

    本当に、いつもどうもありがとうございます。

    今回も貴重なお時間を割いてご確認・ご指示くださいまして、心から感謝いたします  

    鈴木

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

    鈴木さんに❦

    無事解決されたようで良かったです^^

    貼り付けた場所は、子テーマheader.phpの内です。

    書き忘れてましたが、head内に挿入する方法ですが子テーマに導入したheader.phpより、アップデートにより影響が少ないファイルはtmp-user/head-insert.php・tmp-user/amp-head-insert.phpです。

    もっと簡単なのはCocoon設定・『アクセス解析』タブ、『その他のアクセス解析・認証コード設定』の『ヘッド用コード』です。

    ※『解析全般』の『サイト管理者も含めてアクセス解析する』にチェックがある場合、(ログインユーザーには表示しないので)シークレットモードで見れば確認できます。

    お疲れさまでした❦

  7. 鈴木 より:

    かうたっく様

    いつも大変お世話になっております。鈴木です。

    昨晩もコメントいただきまして、どうもありがとうございます。

    かうたっく様に教えていただいたCocoon設定の『アクセス解析』タブを確認いたしました。

    今まではCocoon設定の外観→テーマエディターでheader.phpの入力ができなかったため、filezillaにて子テーマheader.phpに恐る恐るコードをコピペしておりました。

    今後は、かうたっく様に教えていただいた場所で触りたいと思います(もうほとんど触る必要はないかとは思いますが)。

       *  *  *

    連日で大変申し訳ないのですが、実はかうたっく様にもう1点伺いたいことがあります。

    FileZillaに関する質問なので、「WordPressバックアップ、FileZillaの使い方!ダウンロード・インストール・設定方法の手順」ページにコメントさせていただきました。

    毎度毎度で恐縮ですが、お時間のある時にでも、お目通しいただければ幸いです。

    どうぞ、よろしくお願いいたします。

    鈴木

  8. Cocoon ヘッダー画像を画面横幅いっぱいに表示する方法について

    ビバ★りずむ かうたっくさま

    41歳 主婦です。
    はじめてワードプレス&Cocoonでサイトを作成しています。
    たくさんのカスタマイズ方法を参考にさせて頂き、大変助かっており、本当にありがたいです。
    作成中のサイトは、かれこれ4ヶ月が経過しておりますが、中身はほぼ0です…。
    早速本題なのですが、Cocoon設定→ヘッダー→ヘッダー画像を選択して、下記の通り、CSSを加えたのですが、どうしても横幅いっぱいに広がらないです。
    .header{background-size: cover;}
    固定ページでも同様で広がりません。
    色々試しましたがかれこれ一週間。ですが、だめでした。
    当初は、Cocoon設定のみで可能だと思っていたのですが、スマホでは問題ないです。
    恐れ入りますが、ご確認いただけますと幸いです。
    どうぞよろしくお願い致します。

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

    坂梨 可愛子sanに

    ヘッダー画像領域内では、Maxに広がってますよ。

    .wrap {
    	width: 100%;
    }

    こうすればひろがりますけど、全領域の幅がひろがります。ヘッダーからフッターまで。

    mainをCocoon設定で指定した幅に戻すよう追記すればOKですが、今後Cocoon設定で設定しても反映されないと思います。

    #main {
    	width: 860px;
    }
    @media screen and (max-width: 1240px) {
    	#main {
    		width: 67%;
    	}
    }

    もしくはPHPを触ってヘッダーの領域のみCSSで指定できるようdivで囲ってclass属性を付けてあげるかどちらかですかね。

  10. かうたっくさま

    御無沙汰しております。

    早速ですが、ページ毎にヘッダー画像を変更しているのですが
    404ページのIDが分からず悪戦苦闘していました。。

    SNSの開設がまだ済んでいないので、開設すれば良いとは思うのですが
    ある程度ページを作成してからと考えております。

    404ページのヘッダーも変更することは可能でしょうか。
    また、可能な場合、ご教授いただければ幸いです。
    (ページの画像は、設定で変更することが可能と分かったのですが…)

    度々の質問で申し訳ございませんが
    よろしくお願い致します。

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

    坂梨 可愛子さんに

    こんにちは^^

    Cocoonの404ページは.error404となってましたよ。

    WordPressのbody classで検索したらわかりやすいかもです。

    テンプレートタグ/body class – WordPress Codex 日本語版

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

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

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