[WordPress]スマホで画像が縦に伸びて表示されてしまう問題を解消する
WordPressで構築したブログをスマホで表示させたとき、画像が縦に伸びて(縦横比がおかしく)表示されてしまう問題を解消する方法を記します。
その方法とは、縦に伸びて表示される画像のheightをautoに指定するというものです。
このブログでは、singlePostというクラスの中にある画像だけが縦に伸びていたので、CSSに以下の記述を加えました。
.singlePost img { height: auto; }
以上です。
問題が解消されたか確認する際、スマホのブラウザのキャッシュをクリアして、CSSファイルを読み込み直す必要があることに注意して下さい。
ちきゅーの活ログのスマホ画像縦長表示対処法が非常に参考になりました。
過去のブログ画像について、上司から編集画像をクリックして、ビジュアルからテキストに変更して、Heightを削除すれば、モバイルでも縦長画像は解消されると聞いて過去のブログページの画像を全て上記の様に改修しています。
今後新たに編集するブログ画像は、最初の設定だけで
そのままPCで貼り付けても問題なくモバイルでも縦長には表示されませんか?
こんにちは。
設定後は縦長に表示されてしまうことはなくなると思いますよ。