Amazon新生活セール開催中

詳細はこちら
ブログ・HP

WordPress(6.3)スマホで画像の縦横比が縦長表示になるのを解決

ブログ・HP

2023年の9月前後にワードプレスのバージョンを6.3にあげた辺りからスマホだけ画像表示が崩れる異常が出始めました。
記事を編集したり空投稿したりした後、スマホから記事を見るとアイキャッチ以外の記事内画像全てが縦長に引き延ばされているのです。
PCでは正常に見えますのでおかしくなることに気付くのに時間がかかりました。

↓この画像のように横のサイズに対して縦が長く、ものによっては正方形のようになり非常に見づらいです。

wordpress(ワードプレス)のアップデート後、スマホから記事内の画像を見ると縦横比が狂い、見づらい状況に。縦長の画像になる不具合について。コード追加にて解決法したので紹介です。
スマホのスクショです

異常が出る前までであれば以下のように普通に表示されていましたので明らかに見ずらいです。

スマホのスクショです

エディター画面から画像をクリックし「ブロック」から手動で一つ一つ「アスペクト比」を変えることで治すことも出来ますが、相当数の画像にエラーが起きている場合は手動では難しいです。

スポンサーリンク
スポンサーリンク

子テーマのstyle.cssに数行追加

外観」→「テーマファイルエディター」→「スタイルシート.css」へと進み末尾に以下のコードを追加します。

img[class*="wp-image-"][style*="height\:"]{
	height:auto !important;
}

コードを追加後は異常のあった記事をスマホから見ても画像の縦横比が狂っておらず、とりあえずは解決したようです。

基本的に一般的なレスポンシブ化をしていればスマホ表示での最適化は行われますが、今回はWordPress側の仕様変更により表示が崩れていたようです。
今後のwordpressのアップデートに関してはすぐに行わずに少し状況を見てからアプデするようにしようと思います。

スポンサーリンク
ブログ・HP
XcarLIFE

コメント

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