CocoonのCocoon設定からヘッダーにロゴ：画像をいれているけど、ページ毎にロゴ（header画像）を変更したい。背景画像をガラリと変えたい。アップデートの影響を考えてPHPファイルは触りたくない。
Cocoonユーザーさん専用スタイル指定です。
さっそくですが、固定ページやカテゴリ毎に表示を変更など…色んなパターンが膨大にあるので、記事IDを使用する方法を別ページで紹介してます。
.page-id-** **はページ毎に振り分けられたID（数字）をいれてください。
投稿ページ毎・カテゴリ一覧毎・投稿カテゴリ別・タグ一覧毎などに変更したい場合の指定方法は以下を参考にどうぞ。
はじめに。このページの画像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フォルダ内
これで画像のパスが、素敵なほど短くなり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
かうたっく様
お世話になっております。鈴木です。
質問の仕方がうまくできず、申し分ありませんでした。
かうたっく様のおっしゃっる通り、
『サイトタイトル・キャッチフレーズ』だけを『Mplus 1p（WEBフォント）』に変更したい。
と考えております。
ネットで検索したところ、Google Fontsを使用してフォントを変更することが可能のようでしたので（「Mplus 1p」は初めて知りました）、それを試してみたのですが、６種類ほどフォントがあるにも関わらず実際に使用できるのが１種類だったため、大丈夫なのか不安になった次第です。
少し調べてみたところ、Google Fontsも「Mplus 1p」同様にHTMLとCSSへの編集で使えるようですので、明日以降調べてみようと思います。
質問の意図としましては、Google Fontsで使用できる日本語のどのフォントのコードをHTMLとCSSにコピペして入力しても、私の場合全て同じ１種類のフォントでサイトに表示されたため、不具合があるのではないかと心配になったということでした（うまく表現できていないかもしれませんが）。
CSSはともかくHTMLを触るのは初心者の私にとってはかなり怖いことなので、なにか間違えたかな、と思いました。
質問の仕方が下手ですみません。
「Mplus 1p」の使用を明日試してみて、またご報告いたします。
鈴木
鈴木さんに❦
どこにどのようなHTMLを書きましたか？CSSはどのように書きましたか？
ここでは画像が使えないので、Cocoonフォーラムが良ければそちらで質問されても大丈夫です。
文字列だけで詳細を書いて頂けるのであれば、コチラでも大丈夫です＾＾
かうたっく様
いつもいつも、大変お世話になっております。鈴木です。
ご返信いただきまして、どうもありがとうございます。
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のコードが用意されていて、それをコピペして貼り付けるだけの仕様になっているのですが、どのフォントのどのコードをコピペしても同じフォントが表示されてしまいます。
私のやり方が間違っているのかもしれませんが、１番の不安は、このままGoogle Fontsを使い続けて不具合が生じてしまわないかということです。
もし何かご存知でしたら、お手すきの際にでも教えていただけますでしょうか。
とりあえず、私のような症状が他の事例でもないか、今一度検索してみようと思います。
鈴木
鈴木さんに
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
どのようなエラーがでましたか？具体的に教えていただけますか？
head内にlinkタグを入れたら、上記を装飾したい場所に貼り付ける感じだと思いますよ。
/*--------------------------------- サイトタイトルのカスタマイズ --------------------------------*/ .site-name-text-link, .tagline { font-family: 'Noto Serif JP', serif; }ちなみにご提示いただいたCSS（以下）はダメなパターンです。
‘と’が大文字なので。。かうたっく様
さっそくお調べくださいまして、どうもありがとうございます。鈴木です。
head内にコピペ・入力しましたコードを入れ忘れておりました。
たいへん失礼いたしました。
かうたっく様が聞いてくださったように、head内に入力したのは以下のものになります。
Google Fontsに用意されているcssのコードエラーにつきましては、かうたっく様のご指摘のとおり「’」が問題だったようです。
再度コピペして試してみたところ、英語による警告文は以下のようなものでした（以前に警告文が出た際には、恐ろしくてすぐにコードを消してしまっていたので、きちんと見ていませんでした）。
expectid a function or indent after colon at line 392 col 12
（392行目の12行目で、関数の指定またはコロンの後のインデント）
かうたっく様がご指摘されているとおり、「‘」と「’」が大文字なのでダメだったようなのですが、自分でそれに気付くことができませんでした（警告文でお知らせしてくれているにも関わらず、恥ずかしながらどこがエラーなのかわかりませんでした）。
かうたっく様がご用意くださった正しいコードを入力したら、あっさり反映されました。
初歩的なことばかり伺ってお時間を取らせてしまい、恐縮する限りですが、おかげさまでとりあえずの不安が解消されました。
本当に、いつもどうもありがとうございます。
今回も貴重なお時間を割いてご確認・ご指示くださいまして、心から感謝いたします
鈴木
鈴木さんに❦
無事解決されたようで良かったです＾＾
書き忘れてましたが、head内に挿入する方法ですが子テーマに導入したheader.phpより、アップデートにより影響が少ないファイルはtmp-user/head-insert.php・tmp-user/amp-head-insert.phpです。
もっと簡単なのはCocoon設定・『アクセス解析』タブ、『その他のアクセス解析・認証コード設定』の『ヘッド用コード』です。
※『解析全般』の『サイト管理者も含めてアクセス解析する』にチェックがある場合、（ログインユーザーには表示しないので）シークレットモードで見れば確認できます。
お疲れさまでした❦
かうたっく様
いつも大変お世話になっております。鈴木です。
昨晩もコメントいただきまして、どうもありがとうございます。
かうたっく様に教えていただいたCocoon設定の『アクセス解析』タブを確認いたしました。
今まではCocoon設定の外観→テーマエディターでheader.phpの入力ができなかったため、filezillaにて子テーマheader.phpに恐る恐るコードをコピペしておりました。
今後は、かうたっく様に教えていただいた場所で触りたいと思います（もうほとんど触る必要はないかとは思いますが）。
＊ ＊ ＊
連日で大変申し訳ないのですが、実はかうたっく様にもう１点伺いたいことがあります。
FileZillaに関する質問なので、「WordPressバックアップ、FileZillaの使い方！ダウンロード・インストール・設定方法の手順」ページにコメントさせていただきました。
毎度毎度で恐縮ですが、お時間のある時にでも、お目通しいただければ幸いです。
どうぞ、よろしくお願いいたします。
鈴木
Cocoon ヘッダー画像を画面横幅いっぱいに表示する方法について
ビバ★りずむ かうたっくさま
41歳 主婦です。
はじめてワードプレス＆Cocoonでサイトを作成しています。
たくさんのカスタマイズ方法を参考にさせて頂き、大変助かっており、本当にありがたいです。
作成中のサイトは、かれこれ４ヶ月が経過しておりますが、中身はほぼ０です…。
早速本題なのですが、Cocoon設定→ヘッダー→ヘッダー画像を選択して、下記の通り、CSSを加えたのですが、どうしても横幅いっぱいに広がらないです。
.header{background-size: cover;}
固定ページでも同様で広がりません。
色々試しましたがかれこれ一週間。ですが、だめでした。
当初は、Cocoon設定のみで可能だと思っていたのですが、スマホでは問題ないです。
恐れ入りますが、ご確認いただけますと幸いです。
どうぞよろしくお願い致します。
坂梨 可愛子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属性を付けてあげるかどちらかですかね。
かうたっくさま
御無沙汰しております。
早速ですが、ページ毎にヘッダー画像を変更しているのですが
404ページのIDが分からず悪戦苦闘していました。。
SNSの開設がまだ済んでいないので、開設すれば良いとは思うのですが
ある程度ページを作成してからと考えております。
404ページのヘッダーも変更することは可能でしょうか。
また、可能な場合、ご教授いただければ幸いです。
（ページの画像は、設定で変更することが可能と分かったのですが…）
度々の質問で申し訳ございませんが
よろしくお願い致します。
坂梨 可愛子さんに
こんにちは＾＾
Cocoonの404ページは
.error404となってましたよ。WordPressのbody classで検索したらわかりやすいかもです。
テンプレートタグ/body class – WordPress Codex 日本語版
かうたっくさんおはようございます。
Cocoonフォーラムでは度々お世話になっております。
ご質問があり、コメントさせていただきました。
可能であれば、お力添えいただければ幸いです。
こちらの記事を参考にさせていただき、ヘッダー画像をカテゴリごとに変更するところまでは無事に進みました。
ただ、ヘッダーロゴのリンク先をカテゴリごとに変更するところでめちゃくちゃ躓いています。
Cocoonフォーラム（http://urx2.nu/VbaB）ではFunction.phpはサポート外とのことで、あれからランサーズにて依頼を行いましたが一向に応募がありません。
過去にかうたっくさんが回答を行っていたこちら（http://urx2.nu/QxaZ）を応用すればできるかも？と思いましたが、自力ではできず・・・。
何かとお忙しいかと思いますが、有料でも結構ですのでコード記述にご協力いただけないでしょうか？
前川さんに
私もそのような記事を書いてないのでnoサポートです＾＾；
あと『リンク先をカテゴリごとに変更』は、どれだけカテゴリがあって、どれだけ分岐すればいいのか具体的に分からないので、参考程度でnoサポートとさせていただきますね。
Cocoon: html-forms.php (lib/html-forms.php)にある
上記を検索。現状のバージョン: 1.9.5であれば、330行目。バージョンがかわれば、行もかわるので、ctrl+Fキーでファイル内検索してくださいね。
function generate_the_site_logo_tag($is_header = true){上記コードから、以下コード
endif;の上閉じカッコ}までコピー。
子テーマfunction.phpにペーストして追記する。
現状親テーマの374行目の以下コードのaタグのhrefの中身を編集する。
上記の行の以下を編集
a href="'.esc_url(get_home_url()).'" class=上記を以下のように
a href="'.esc_url(get_home_url()).'"その行の上にでもif文で分岐
if ( is_category( 3 ) ) { $url = 'https://bibabosi-rizumu.com/category/hogehoge/'; } else { $url = 'https://bibabosi-rizumu.com'; } $logo_before_tag = '<'.$tag //表示されないので以降コード略上のif文でドンドン分岐し、最後にそれ以外はトップページとして、保存すれば良いと思います。
if ( is_category( 3 ) ) { $url = 'https://bibabosi-rizumu.com/category/hogehoge/'; } elseif ( is_category( 6 ) ) { $url = 'https://bibabosi-rizumu.com/category/geho/'; //略もしis_category()カッコ内には、(カテゴリIDもしくはスラッグ)を。検索したら色々出てくるかな。って感じまででおねがいします。
ローカル・サブドメインのテスト環境などで、行ってくださいね。
かうたっくさんお返事が遅くなってしまい、申し訳ないです。
また、むちゃくちゃ丁寧で分かりやすい回答ありがとうございました！
一部少しだけ手直しさせていただきましたが、ほぼそのままでやりたいことが行えました。
ほんと神サポートに感謝でイッパイです。ありがとうございます。
有料対応以上の対応に、頭が上がりません。
何かしらの形でお礼ができればいいのですが・・・
前川さんに
良かったです❦
カテゴリIDなどは、人によって違うけど。Cocoonでは上記コードのように該当部分を分岐するのが分かりやすいかと思われます。おそらく？
お疲れさまでした＾＾
かうたっくさんこんばんは!!
はいっ！
とーーーってもわかりやすかったですよ〜＞＜
ほんと感謝感謝です・・・ッツ！！
なんか欲しいものリスト的なのあれば言ってくださいまし。
前川さん、ご連絡ありがとうございます＾＾
そう言ってもらって良かった！っとホントにおもいます❦
欲しいモノリストは以前から考えてるんですが、今のとこ
公開するまでに至らないんです。
いつか未定ですけど公開するかも？？
って所なので、お気遣いだけ感謝していただきますね。
うまくいって良かったって、ホントに思います！おつかれさまでした＾＾
ありがとうございます！
かうたっくさんこんばんは!!
お返事からかうたっくさんの人柄の良さが・・・
欲しいものリストの公開、是非是非前向きにご検討くださいましー!!
かうたっくさんのサイトには以前からちょこちょこ足を運ばせて勉強させてもらってますので、わかりやすいところに設置していただければ多分気づくと思います。
なんか時間と労力だけ使わせる形になってしまって申し訳ないです。
でもでも、ほんとにありがとうございます。
これでサイト運営の幅が大きく広がりました！
また遊びにきます♪
前川san
ご丁寧にありがとうございます＾＾
また機会があれば、遊びに来てくださいね❦