【Cocoon】ヘッダー画像をレスポンシブル対応にする方法（コピペ可）

COCOONを使っていてヘッダー画像を使いたいけどＰＣとモバイルでイメージ通りにいかないから諦めてるひとや画像の中央を使いたい人に簡単解決！コピペできるＣＳＳをご紹介します

こんな感じで困っている人に最適です

今回ご案内するＣＳＳはこんな希望をかなえられます

ＰＣではヘッダー画像を使いたいけどモバイルは画像なしの単色背景でいい
画像の左端が画面の左端にくるのではなく画像の中央が画面の中央にきてほしい

当サイトも（2024年2月現在）上記のように表示しています

以下当サイトの例で詳しくご説明します

下記は当サイトの横解像度1500のモニターでの表示状況です

意図としてはロゴエリアは白、「彩」の文字は中央やや右に、「Produced by….」の文字は画面から常にはみ出ないようにしたいわけです

下記はヘッダー画像の全体像です

この画像を標準設定のままで表示させるとの左側の白い部分ばっかりの画面になってしまいます。例えば横1920pxのモニターでは「彩」の文字は意図に反してかなり右よりになる訳です。この画像は横3000pxの為、横解像度3000のモニターでなければ意図した通りの表示にならないからです。

このような場合は画像の左端が画面の左端にくるのではなく画像の中央が画面の中央にきてくれればおおよそどの解像度の画面でも意図した通りの表示が可能になるという訳です。

ただしタブレットやスマホになるとロゴが「彩」の文字と重なってしまいとても見にくくなります。なので低解像度の場合だけは標準通り画像の左端から表示してほしい訳です。

cssはたったこれだけ

それらを実現するcssです

/*  ヘッダー画像位置*/
.header {
	background-position: center top;
	background-size:inherit;
}
/*1000px以下*/
@media screen and (max-width: 1000px){
.header {
	background-position: left top;
	background-size:inherit;
}
}

ここでは画面の横解像度が1000pxより下の場合から中央合わせではなく左端合わせにしています。これは7行目の@media screen and (max-width: 1000px){の1000の数字を書き換えれば他の解像度に変更できます。

また画像の上下位置については上合わせとしています。

css貼り付け場所：既に記述がある場合は一番下の行にお願いします

外観/カスタマイズ/追加ＣＳＳ/

「その背景画像はたまたま左が真っ白だからいいけど」とお思いの方もいらっしゃるかもしれません。その場合画像加工ソフトをつかってヘッダー画像の両サイドに余白を左右同じピクセル分だけ継ぎ足せばモバイル用のスペースを作る事も出来ます。ただしその場合とても大きなモニターで画像が繰り返し表示になった時の見栄えは諦めるしかないかもしれません。

前提条件としてヘッダー画像の設定は下記の様に