本記事はスマホ表示で画像が縦に延ばさず正確に表示する方法を初心者向けに解説しています。
この記事ではワードプレスでのスマホの画像表示がおかしい！縦に伸びてしまう！という人を対象とした記事になります。
アスペクト比の設定方法まで解説しているのでぜひ最後までご覧ください。
【Wordpress】スマホでの表示がおかしい場合の解決方法
それではさっそく解決方法を解説します。
1～2分で終わるので最後までお付き合いください。
① 画像ブロックを選択して設定を表示
まずは画像ブロックを選択して上記の設定画面を目指してください。
テーマによってちょっとした差異はありますが、基本的には同じになっています。
② 設定内容を変更して修正
設定内容を以下のように設定してください。
アスペクト比：元のサイズ（お好みで）
幅 : 自動
高さ : 自動
解像度 : フルサイズ
画像の元のサイズと同じアスペクト比で表示されるようになります。
アスペクト比とは？
アスペクト比とは、画像の幅と高さの比率のことです。例えば、写真の幅が10、高さが5の場合、アスペクト比は2：1というように表示されます。サイトに乗せる画像のアスペクト比に決まりはありませんが、4：3が最も無難でしょう。
これにて設定終了です。
次に各種設定の解説とアスペクト比の変更方法について解説します。
各種設定について
各種設定について簡単に解説します。
アスペクト比の設定
さて、ワードプレス6.3から細かくアスペクト比を指定できるようになりました。
対応しているアスペクト比は以下の通りです。
- 正方形 – 1:1
- 標準 – 4:3
- ポートレイト – 3:4
- クラシック – 3:2
- クラシックポートレイト – 2:3
- ワイド – 16:9
- 縦長 – 9:16
お好みのアスペクト比がない場合は画像を目的のアスペクト比に整形して、アスペクト比から「元のサイズ」を指定しましょう。
ゆるめ特にこだわりがないなら標準 – 4:3が最も無難です。
幅・高さ
幅・高さを設定することで画像の表示サイズを変更することができます。
アスペクト比を「元のサイズ」以外に設定している場合は、どんな大きさでもアスペクト比にあるように調整されますが、元のサイズに設定している場合は調整されず画像が変に表示されてしまいます。
そのため、先ほどの設定で幅・高さを自動にすることで画面にあるように画像が表示されるように設定しました。
画像の最適化に関してはこちらの記事がとても参考になるので、初心者の方は是非ご覧ください。
解像度
その名の通り、画像の解像度を変更することができます。
基本的に「フルサイズ」に設定すべきですが、画像サイズを軽くしてサイトを高速化するときに使えます。
とはいってもワードプレス上で解像度を変更すると劣化が激しいのであまりおすすめしません。
画像を軽量化したいなら、画像形式をWebPに変更することで画像の劣化を防ぎながら容量を大幅に削減することができます。
こちらのサイトで画像形式を自由に変更することができます。
ゆるめ広告が一切なく使いやすいので愛用しております。
まとめ
いかがだったでしょうか？
ワードプレス6.3のリリースに伴い、スマホでの表示がおかしくなってしまう人がいたので、この記事を作るに至りました。
参考になった、あるいは疑問点があるという方は気軽にコメントしてくださいね。
それでは皆様、ごきげんよう。
