WORDPRESSで画像が正常に表示されない時の対処

• オリジナル原稿は2020年6月10日作成。

編集している時にはちゃんと表示されているのに、投稿すると画像が消えてたり、もしくは一部だけ消えてたり、或いは携帯で見るとちゃんと表示されているのにPC上では表示されない、そんな事を経験した時の対処法を書いた。

とはいえ、これが答えとは限らないし、また何かの拍子に元に戻るかもしれないので、参考にする際は自己責任でお願いします。

編集する画面に入って問題のある「画像」を選択し「ビジュアル」から「コード」、つまりHTMLにしてみる。

すると、よーく見ると、表示されているものとされていないもので違いがあった。

こちらは正しく表示されていた記述。

{“id”:0000,”width”:600,”height”:360,”sizeSlug”:”large”}

class=”wp-image-0000″ width=”600″ height=”360″/>

こちらは画像が表示されていなかった記述。

{“id”:0000,”width”:600,”sizeSlug”:”large”}

class=”wp-image-0000″/>

上の数字は仮で適当に入れたものだが、問題は正常に表示されたものは「width=”600″ height=”360″」が記述されていたのに、きちんと表示されていないほうは、この「width=”600″ height=”360″」がなかった。あるいは片方だけが消えていた。

なので、投稿すると消えてしまった画像のこの部分を{“id”:0000,”width”:600,”height”:360,”sizeSlug”:”large”}, class=”wp-image-0000″ width=”600″ height=”360″/>に書き換える。

※数字は各々違う。

すると、PC上でもきちっと表示されるようになった。

※あくまで一対処法なので、全てに適用できるとは限らないです。

もしくは、プラグイン で複数のスピードを改善するキャッシュ系があったので、一つだけ残して全て削除したのが結果的に良かったのかもしれないが、そこは不明。

補足

画像を貼り付ける時にはサイズを変更することが多いかと思いますが、その時に右側に表示されているサイズ変更のダイアログの「幅」を変更していくと見た目には縦横固定で均等にサイズが拡大縮小されています。しかし、画像の見た目は正常なのに「高さ」の数値が変わらない場合、コードにはこの「高さ」が抜けている場合があるようです。なので、この場合「高さ」の数値も変えてあげると正常に表示されました。