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

私が現在作成しているサイトでもヘッダーロゴの画像が縮んでしまい、思ったように表示されていなかったので、この現象を解消しました。
ついでにヘッダーロゴの設定の仕方も記録しておきたいと思います。
\↓クリックするとジャンプするよ/
ヘッダーにロゴ画像や背景画像を設定する方法
スポンサーリンク

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

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

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

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

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

CSS追加方法

①wpダッシュボードを開く(編集画面の左側)

②外観/カスタマイズ

③追加CSS

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

 

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

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

 

例えば、
フォント(文字)の大きさを18pxで指定すると、パソコンではちょうど良い大きさなのにスマホで見ると大きい!なんてことがあるのと同じ状況です。
上手く調整が出来ない場合や、そもそもパソコン版でもスマホ版でも画像の表示がなんか変…といった場合は、画像サイズがヘッダーの大きさとうまく合っていないのかもしれません。

 

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

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

このサイトでは、auto指定することで画像の凝縮はなくなったけど、スマホで表示するとやっぱりロゴが大きいなー…という印象が強かったので少しロゴの大きさを縮めました。
pxで指定することも出来ますが微調整が必要となるので、簡単に縮めるために
@media screen and (max-width: 599px){
 .logo-header img {
  height: auto;
  width: 80%; 
}
というCSSに変更!!
width(幅)を80%に指定することで、ロゴの大きさが少し小さくなりました。
(分かりにくくてスミマセン…。)
スポンサーリンク

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

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

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

このサイトはcocoonを利用しているのでcocoonの設定の仕方です。
WordPressで導入するべき無料テーマ『cocoon』をインストールする方法

画像をアップロードする

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

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

ヘッダーの設定画面からもアップロードすることは出来ます。結局はメディアで管理されるのでどちらでも大丈夫です。

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

ヘッダーの設定メニュー

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

設定の仕方

①ダッシュボードcocoon設定

②ヘッダー

グローバルナビもヘッダー領域となるため、ナビの色や幅など一緒に設定することが出来ます。
cocoonでトップページにメニューバーを設置する方法

 

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

 

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

設定内の注意書きある通り、ロゴのサイズ設定は配置が「センターロゴ」の場合に行われます。それ以外は調整できないようです。(冒頭の章で載せているようなCSSでの調整になります。)

 

ヘッダーと画像の大きさ

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

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

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

デフォルトの場合は高さ150px程度になるかと思います。

 

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

 

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

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

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

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

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

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

 

タイトルとURLをコピーしました