WordPressを使ったブログなどのサイトを運営していて、よりユーザの使い勝手を良くしようと考えるのは人情です。
しかしユーザー利便性を上げようとして「あること」をしてしまうと、サイトに掲載した画像が表示されなくなってしまいますので要注意です！
この記事ではWordpressサイトに画像が表示されなくなる原因と、表示されなくなってしまった時の対策を紹介します。
問題の切り分け
一口に「Wordpressサイトに画像が表示されない」と言っても、様々な原因が考えられます。まずは真の原因は何なのか、切り分けてみましょう。
画像のURLアドレスへ飛ぶと404エラーとなる
「壊れた画像のイメージ」が表示されている場合は高確率でこのパターンです。
真の原因としては
- ブログサービスをWordpressへ移行したが、画像ファイルの投稿先は移行前サービスのままにしていて旧サービスの契約が切れた
- ファイル名指定（大文字小文字など）が間違っている
- そもそも何らかの理由でアップロードできていない
などが考えられます。
この場合の対処法は下記のサイトに詳しいです。
画像のURLアドレスへ飛ぶと403エラーとなる
このパターンはあまり多くないと思いますが、画像のアクセス権の設定が何かの拍子に変わってしまった場合にこのエラーが出ることがあります。
Webに投稿した画像ファイルはサイト主や管理者にとっては「読み書き可能」で閲覧者にとっては「読み取りだけ可能」となっているのが通常ですが、閲覧者にとって「読み取りすら不可能」という権限に変わってしまっている状況です。
このアクセス権設定のことを「パーミッション」といいます。
WordPressサイトへ投稿した画像はサーバー内の wp-content/upload というフォルダに収められていますが、サーバーの管理画面からこのフォルダ中の各フォルダ・ファイルの設定内容を確認することができます。
通常は「644（rw-r–r-）」という設定になっています。これが「管理者は読み書きできるが、閲覧者は読み取りだけできる」という設定です。
詳しくは下記のサイトを参考にしましょう。
画像位置をクリックすると「1×1.trans.gif」という空白画像ファイルが表示される
この記事では主にこのパターンの解決法を書きます。
このパターンの特徴は下記の通りです。
- 「壊れた画像」のアイコンは表示されない
- 画像のサイズは正常に記録されているようだが、「透明な四角形」として表示される
- 記事編集画面や投稿前プレビューでの確認では正常に画像が表示される
- 画像が表示されるべき位置をクリックすると、「1×1.trans.gif」という透明な四角形のファイルが表示される
この場合、画像を表示させなくしている犯人はほぼ「Lazy Load」というプラグインです。
Lazy LoadはWordpressサイトの画面表示の高速化を狙うためのプラグインで、ユーザー利便性を真剣に考えるサイト主の方の多くが導入したり、少なくとも導入検討はされたと思います。
1×1.trans.gifが出てくる場合の対処法
というわけで、Lazy Loadをプラグイン画面で「停止」して無効化すれば解決です！
という説明をしているサイトが多いのですが、それでは足りません。
私はプラグイン画面でLazy Loadを無効化すれば画像が見えるようになると信じて実行したのですが相変わらず画像が表示されず、かなり困りました。一時はWordpressの再インストールまで覚悟したほどです。
しかし、プラグイン無効化にプラスしてもう一つ別の画面で設定を加えれば、再び画像が表示されるようになりました。
その設定画面は、Wordpressのメニューから「外観→カスタマイズ→画像」です。
ここに「Lazy Loadを有効（画像の遅延読み込み）」というチェックボックスがあるので、外しましょう。「保存して公開」ボタンを押すのを忘れずに！
これでやっと画像が表示されるようになりました。
そう、お気づきの方もいると思いますが、私はプラグインだけでなくテーマ(Simplicity2)の機能設定でもLazy Loadを有効にしていたのでした。
Lazy Loadと1×1.trans.gifの正体
そもそもLazy Loadは重い画像を読み込む前にまずは真っ白な仮の画像(=軽い画像)を読み込んで表示しておいて、テキストを表示した後から本当の画像を読み込んで表示するという仕組みです。
この仮の画像が1×1.trans.gifなのです。
しかし実際には1×1.trans.gifの表示だけが行われて、そのあとの本当の画像読み込みが行われないことがあります。
これがLazy Loadのせいで画像が表示されなくなる現象の正体です。
おわりに
Lazy Loadは「重い画像ファイル」の読み込みのせいでサイトの表示が遅くなるのを防ぐ機能ですが、そもそも今はよほど巨大な画像ファイルでなければ、モバイルでも０コンマ数秒でダウンロードできてしまいます。
モバイルが3G波だった時代にはLazy Loadの導入に意味があったと思いますが、今や日本の都市部の大部分はLTE化されているので、画像の読み込みを遅らせてテキストを速く表示するという手法は実質あまり効果がないと考えます。
効果がないばかりか画像がそもそも表示されなくなる現状では、この機能の存在価値はもはやマイナスにしかならないと思わざるを得ません。
それと、Lazy Loadに限らずAMPなどでも言えることですが、プラグインと同じ名称のテーマの機能があることがあるので、プラグインの設定だけでなく「外観→カスタマイズ」でテーマの機能を使っていないかチェックしてみましょう。二重に設定している場合があります。
ちなみに私はバリバリの文系でCSSだのPHPはおろかHTMLすらよくわからないレベルですが、数冊の本を読んだだけでWordpressサイトを全くの独学で立ち上げることができました。
WordPress自体が(プログラム言語よりは)分かりやすいということも大きいですが、分かりやすい入門書との出会いはやはり大切だと思いました。
