前略、KIDO さん

過去に似たようなトピックがあったので、貼り付けてみます。

でも、条件が全く同じじゃないかもしれません。

あまり詳しく見ていません。（すみません。）

[解決済] PCとスマホでロゴを切り替える

スマホ ヘッダーロゴ画像

あとは、やったことがないのですが、JavaScript でできるのかなぁ・・？（やったことがないので実は、わかりません ? ）

KIDO さん

実際に、やったことはないですが、ググってみると、それっぽい記事がありそうな気もします。

jQueryでウィンドウサイズによって画像を切り替える

【レスポンシブ】jQueryでウィンドウサイズによって画像を差し替え

PCとスマホで表示する画像を変える方法あれこれ

@leafytree 参考サイトのご提示誠にありがとうございます！

理想の形に近づいてきたのですが、ロゴが左右切れてしまいます。

こちらの解除方法についてご存じでしたらご教示いただけますと幸いです。

[追加したCSS]

@media screen and (min-width: 10px) {
/* 元のロゴ画像を非表示 */
.logo > a img {
visibility: hidden;
}

.logo > a .site-name-text {
display: inline-block;
background: url("http://lfc.chu.jp/malasadawagon.test/wp-content/uploads/2020/09/malasadawagn_header4.png") no-repeat;
background-size: cover;
background-position: center;
}
}

このCSSを追加したところ、

フッターロゴを個別に設定していたものも、

反映されなくなってしまいました。。。

KIDO さん

background-size: cover; をやめて、background-size: contain; にする。

すると、PC用の画像が小さくなってしまうので、スマホ用のロゴ画像の左右に透明な背景を足す。

スマホ用の画像のアスペクト比が横長になるので、背景画像であるPC用の画像のスペースが大きくなる。

というのは、いかがでしょうか？

ちょっと試してみないとわからないですが・・

※黄色の部分ぐらいの透明な背景の横長の画像を用意する。

@KIDO さん

投稿者:: @KIDO

このCSSを追加したところ、

フッターロゴを個別に設定していたものも、

反映されなくなってしまいました。。。

これは、また別の対策が要るかもしれません。

@leafytree 様（先ほど敬称がぬけておりました。申し訳ありません。）

ご教示頂いたとおりに修正したところ、理想的な表示となりました。

本当にありがとうございます。

フッターは独自タグをいじりながら試行錯誤してみます。

無理そうでしたらまたスレを立てます。

本当にありがとうございました。

@KIDO さん

フッターロゴを非表示にしているのは、子テーマのCSSではなくて、Cocoonのテーマのような気がします。

どこかの設定で非表示にされていませんか？