べつに、私は、おすしさんの担当じゃないのですが・・

こんな記事ありましたよ。

PCとスマホでヘッダー画像を切り替える方法

私は、やったことないですが・・

Cocoonでも、出来るかどうか、おすしさんが試してくださると、皆さんも真似できるかもしれませんね。

おすしさんのサイトの場合は、1023pxが切り替えポイントみたいですね。

もし、Cocoonでも、出来るようでしたら、CSSのコードも紹介していただけると、皆さん、参考にできるかもしれませんね。

頑張ってみてください。

PHPか、JavaScriptじゃなきゃできないかと思ったのですが・・

前述のリンクの記事のやり方でもできるのかな・・

@media screen and (max-width: 1023px) {
.logo-menu-button img {
display: none;
}
.logo-menu-button .menu-button-in::after {
background-image: url(モバイル時の画像のパス);
background-size: 100% auto;
content: "";
display: block;
height: 44px;
width: 209px;
margin: 0 auto;
}
}

またまた、適当に書いたものなので、間違っているかもしれません。

実際のところは、私もよくわかりません。

モバイルのときとPCのときで、違う画像という発想がありませんでした。

おすしさん

私、思ったのですが・・・

前のトピックで、１枚の画像だけで、ヘッダー画像を上手く配置する方法のアドバイスをさせていただいたのですが、それだと、当然、モバイル表示のときは、中央の文字が小さくなっちゃう訳ですよ。

そこで、モバイルのときだけ、画像を取り替えたくなっちゃう訳ですよ。（すみません。これは、推測です。）

そうじゃなくて、振り出しに戻って、２枚の画像を使ってヘッダーのデザインをすればいいのではないかと思います。

このCocoonのサイトは、ヘッダーの背景画像に、1024px × 309px の画像を使い、ヘッダーのロゴ画像の方に、200px × 88px のサイズの画像を使っているようです。

つまり、ロゴ画像と背景画像を分離して２枚の画像を用意すれば良い話なんです。

おすしさんのヘッダー画像のサイズは、1900px × 400px ですから、そっちを、フライトアナウンスだけの画像にして、ロゴ画像は別に作ればいいんです。

png画像は透明をサポートしているので、ロゴ画像の方は、背景色を半透明の白にすれば、今までと、ほぼ同じデザインにできるはずです。

２枚の画像を重ねて表示するイメージです。

当然、前のトピックで、１枚の画像だけでヘッダー画像を配置するために設置した、CSSのコードは、不要になりますよね。

そう言う私のサイトも、１枚の画像とテキストのサイト名で作ってるんですけどね。

ちなみに、「エアライン情報を発信」は、ロゴ画像には含めずに、Cocoon設定のキャッチフレーズのところに入力するようにすれば、このCocoonのサイトと同じ仕様になるのではないかと思います。

ロゴ画像のサイズは、Cocoonのサイトに近いサイズでいいのではないかと思いますが、ご自身で、いろいろ試してみてください。

@leafytreeさん

毎回本当にありがとうございます！
お返事が遅くなり誠に申し訳ありません。

アドバイスいただいた通り今夜試してみよう思います。
また結果報告させていただきます。

https://airlineman.com/
試してみたのですが、うまくいきませんでした汗

背景画像：1900×400ピクセル
ロゴ：101×262ピクセル
（cocoon設定上では1300×800に今はなっています）

PC画面だとなぜかロゴ画像も全体に広がっており、モバイルでは依然として小さくなってしまっております。

モバイルでは横全体（メニューや検索部分にかかるくらい）まで伸ばしたいと考えているのですが、何か方法はありますでしょうか。

@おすし さん

ちょっと、良く見ている時間がないのですが、このまえ、追記した、ヘッダー画像用のCSSをコメントアウトするか、削除するかしないと、ロゴ画像も大きくなってまうはずです。

どのCSSを追記したか、覚えていますか？

前のトピックを参照してください。

投稿者:: @おすし

モバイルでは横全体（メニューや検索部分にかかるくらい）まで伸ばしたいと考えているのですが、何か方法はありますでしょうか。

これは、PC用にきちんと設定できてから、考えれば良いかと思います。

何もかも、いっぺんにはできないです。

お忙しい中ありがとうございます。

コメントアウトしたところ、ロゴ画像が大きくなる問題は解消できました！
モバイル画面でロゴ画像を大きく表示させるとこはもう少し調べてみようと思います。

@おすし さん

おお、イケるじゃないですか。

PC用のロゴもちょっとデカすぎなので、たしか、Cocoon設定で、サイズ指定できたような気が・・

「ヘッダー」タブの設定項目を見てください。

@おすし さん

ロゴ画像の背景は、白無地の半透明には作れませんか？

画像加工ソフトか何かで・・

フライトアナウンスボードの画像がロゴの背景にも混ざってしまっています。

文字の背景は白無地で、半透明にしましょう。

あ、でも、そうすると、モバイルのときにヘッダーモバイルボタンの白地に馴染んでしまうかな？

Cocoonのサイトは確か白地にロゴだったような・・

ああ、間違えました。

Cocoonのサイトは、青い背景色にしているんですね。

@おすし さん

良く考えて、デザインしないと、難しいですね。 ? 

でも、やり方は、理解できてきたみたいなので・・（言い訳（汗））

そうそう、いろいろ試して！！

試せば、好きなデザインにできるかも！

@おすし さん

PCのブラウザの画面幅も広げたり、縮めたりしてみて、見え方が、どのように変わるのか、確認してください。

背景とロゴのつながりは少し理解できた気がしたので、ちょっとずつずらして納得のいく形に持っていきたいと思います！

@おすし さん

そうですね。

その理解が大切なんだと思います。

確か、いくみさんのサイトが、とても参考になるはずです。

えーと、どこにリンクあったかな・・

ありました。

こちらです。

[Cocoon] ヘッダー画像サイズと選ぶポイント

ありがとうございます！
明日また試してみたいと思います！

毎回とても丁寧に説明していただき誠にありがとうございます。

今更かもしれませんが、参考になると思います。

https://bibabosi-rizumu.com/cocoon-header-logo-each-page/

私もまったく同じことをしたくて、今はアピールエリアのスペースを利用しています。（プラス、フォーラムで見つけたコードを使っています。）

リフィトリーさんのコードでできるんですね～ ? 。今度試してみます！

もしも、ヘッダー背景画像とロゴ画像のバランスや位置を２枚の画像で調整するのが難しいと感じるデザインの場合、以下の記事がお役に立てるかもしれません。

[Cocoon] デザイン性アップ! アピールエリアにヘッダー画像挿入

あ・・・。大分前のトピックでした！

@ikumi さん

投稿者:: @ikumi

リフィトリーさんのコードでできるんですね～ ? 。今度試してみます！

いや、これ、苦しまぎれに検索したら、見つけたもので、疑似要素を使ってやる方法なので、もっと良い方法が他にありそうな気がします。

私は、久しぶりに、おすし さんのサイトを見てみたら、２枚の画像で、バッチリできているので、なんだか嬉しいです。

きっと、Ikumi さんの記事（[Cocoon] ヘッダー画像サイズと選ぶポイント）が参考になったのだと思います。

投稿者:: @ikumi

もしも、ヘッダー背景画像とロゴ画像のバランスや位置を２枚の画像で調整するのが難しいと感じるデザインの場合、以下の記事がお役に立てるかもしれません。

[Cocoon] デザイン性アップ! アピールエリアにヘッダー画像挿入

Ikumi さんの記事は、Webサイト作成の専門的な知識を持っていなくても、デザインの幅を広げてくれるとても有用な記事だと、またまた関心しています。

デザインの事例も素敵で魅かれます。

恐縮です、ありがとうございます ? ！

投稿者:: @uiko

今更かもしれませんが、参考になると思います。

https://bibabosi-rizumu.com/cocoon-header-logo-each-page/

あっ、懐かしの1ページ

ありがとうございまっす ?