【SANGO】ヘッダーのロゴ画像を横いっぱいに表示するカスタマイズ

WordPressテーマSANGOの質問

KEN

2018/06/06

こんにちは、ヘッダーの高さとロゴの画質についての質問です。

PCで表示した際に高さを90pxぐらいにしたいと思ったため、CANVAを使ってロゴを幅1200 x 高さ90 のサイズで作成しました。
「ロゴ画像を横いっぱいに表示するカスタマイズ手順」を参考に設定したところ、PC・スマホ表示においてそれぞれ以下の様な状態になり、どうにか解決できないものかと模索しております。

【PC】
ロゴの画質が粗い・・・

【スマホ】
↓の画像内に赤い矢印がある部分(見にくくてすみません)がメニューの背景色になってしまう。

https://drive.google.com/open?id=1OdSIgIIqEf2gte1riNG6YHPNFx0QA3p3

ロゴ自体の高さを高くすれば解決できるのですが、そうするとPCで表示した際に高くなりすぎてしまいます・・・

PC表示において高さを90pxぐらいにしつつ、スマホ表示においては赤い矢印の部分まで白くしたいのですが、なにか解決策がありますでしょうか？

よろしくお願いいたします。

ヘッダーのロゴ画像を横いっぱいに表示するカスタマイズ

コメントへの回答

サルワカくん

2018/06/06

以下のCSSを追加してみるといかがでしょうか。

.header--center #logo {
    background: #FFF;/*ロゴ背面の色*/
}
@media only screen and (min-width: 1030px) {
 .header--center #logo img {
    max-width: 80%;/*最大幅に制限をもたせる*/
 }
}