ヘッダーロゴの画像がスマホで見ると崩れている現象を解決！と、設定の仕方

ヘッダーロゴ画像の表示を直す

CSSコードをスタイルシートに書く

ヘッダーロゴの画像がパソコンやタブレットでは普通に表示されるのに、スマホで見たときだけ表示が崩れてしまう！という場合。

↑画像では、スマホで見るとギュッと凝縮されてしまっています。
これを直すために…

以下のCSSコードをスタイルシートにコピペします。

@media screen and (max-width: 599px){
.logo-header img { 
height: auto;
width: auto;
}

heightやwidthが、px指定で固定されていると、表示される画面の大きさに合わせることができないため、変に伸びたり縮んでしまったり表示がおかしくなってしまいます。

そのため、heightとwidthをautoにすることで、画面のサイズが変わっても自動的に調整するように指示します。

autoにしたことで、画像の凝縮がなくなりました。

番外。ロゴを縮めたい場合

@media screen and (max-width: 599px){
 .logo-header img {
  height: auto;
  width: 80%; 
}

ヘッダーにロゴ画像や背景画像を設定する

ヘッダーにロゴ画像を設定する方法を少し載せておきたいと思います。

ヘッダーには、背景画像とロゴ画像（タイトルなど）の2種類を設定することが出来ます。

画像をアップロードする

先にヘッダーに載せるロゴ画像を作成してアップロードします。

ヘッダー用の背景やロゴは、いつも通り画像をアップロードする要領と同じで、メディアから新規追加をしていきます。

※画像のサイズ感が分からない場合は以下『ヘッダーと画像の大きさ』もご参考ください。

ヘッダーの設定メニュー

ヘッダーの設定メニューから背景画像やロゴの設定をしていきます。

ヘッダー背景画像の”選択”を押すと、メディアから画像を取得したりアップロードすることができます

ロゴも同じ要領です。
ロゴサイズは縦と横のサイズを指定することもできます。

ヘッダーと画像の大きさ

ヘッダーの大きさを検証ツールで確認してみると、
1263×147．63となっていました。

というわけで、
ヘッダー画像もヘッダーのサイズに合わせて作成します。
ヘッダーの高さは調整出来るので、お好きなサイズ感で作成されてください。

後々、背景画像のサイズが合わない！なんてことにならないよう、この高さを決めてから画像の作成をすると良いでしょう。

どのくらいの大きさにすればのか分からないという方は、ヘッダーに背景色を付けて高さを調整すると、どのくらいのサイズの画像を作ればいいのかイメージが沸きやすいかもしれません。

画像の大きさが合っていないと…

画像のサイズを1260×150で作成し、ヘッダーの高さも150pxで設定するとぴったりとはまりました。

しかし、「ヘッダーが狭い気がするなー、そうだ、もう少し高さを広げてみよう」と、
画像は150pxのままヘッダーの高さだけを180pxにした場合。

画像が広がることはなく、30px分は空白となります。

また、「だったら最初から大きめの画像を作っておけばいいじゃない！」と思うかもしれませんが、今度は画像が途中で切られてしまい思ったようには反映されません。（画像は250pxで作成しました。）

ヘッダーは真っ先に目が付く場所です。
せっかくの画像がボケてしまったり、変に伸びてしまわないよう、サイズに合う画像を用意しましょう。