ヘッダーロゴ画像の表示を直す
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にしたことで、画像の凝縮がなくなりました。

番外。ロゴを縮めたい場合
@media screen and (max-width: 599px){ .logo-header img height: auto; width: 80%; }
(分かりにくくてスミマセン…。)

ヘッダーにロゴ画像や背景画像を設定する
ヘッダーにロゴ画像を設定する方法を少し載せておきたいと思います。
ヘッダーには、背景画像とロゴ画像(タイトルなど)の2種類を設定することが出来ます。
WordPressで導入するべき無料テーマ『cocoon』をインストールする方法
画像をアップロードする
先にヘッダーに載せるロゴ画像を作成してアップロードします。
ヘッダー用の背景やロゴは、いつも通り画像をアップロードする要領と同じで、メディアから新規追加をしていきます。
ヘッダーの設定画面からもアップロードすることは出来ます。結局はメディアで管理されるのでどちらでも大丈夫です。
※画像のサイズ感が分からない場合は以下『ヘッダーと画像の大きさ』もご参考ください。
ヘッダーの設定メニュー
ヘッダーの設定メニューから背景画像やロゴの設定をしていきます。
設定の仕方
①ダッシュボードcocoon設定
②ヘッダー
cocoonでトップページにメニューバーを設置する方法
ヘッダー背景画像の”選択”を押すと、メディアから画像を取得したりアップロードすることができます
ロゴも同じ要領です。
ロゴサイズは縦と横のサイズを指定することもできます。
ヘッダーと画像の大きさ
ヘッダーの大きさを検証ツールで確認してみると、
1263×147.63となっていました。
というわけで、
ヘッダー画像もヘッダーのサイズに合わせて作成します。
ヘッダーの高さは調整出来るので、お好きなサイズ感で作成されてください。
後々、背景画像のサイズが合わない!なんてことにならないよう、この高さを決めてから画像の作成をすると良いでしょう。

画像の大きさが合っていないと…
画像のサイズを1260×150で作成し、ヘッダーの高さも150pxで設定するとぴったりとはまりました。
しかし、「ヘッダーが狭い気がするなー、そうだ、もう少し高さを広げてみよう」と、
画像は150pxのままヘッダーの高さだけを180pxにした場合。
画像が広がることはなく、30px分は空白となります。
また、「だったら最初から大きめの画像を作っておけばいいじゃない!」と思うかもしれませんが、今度は画像が途中で切られてしまい思ったようには反映されません。(画像は250pxで作成しました。)
ヘッダーは真っ先に目が付く場所です。
せっかくの画像がボケてしまったり、変に伸びてしまわないよう、サイズに合う画像を用意しましょう。