当サイトに表示される画像がグレーになる現象が約半年前から確認していました。約2ヶ月近く中々解決できなかったものの、つい昨日解決したので書いていく。
画像の表示がグレーになる現象とは以下の画像の通りである。
目次
画像がグレーになる現象について
サイトを表示したときには一枚、二枚ほどの画像がグレーで表示されており、サイトをリロード・更新をしても変わりませんでした。
しかし当時の僕はブラウザキャッシュが悪さをしているのかなと思い放置をしました。これがダメでした。
そしてちょっと気になる現象の発生から約2ヶ月後、グレーが表示される現象が頻繁に起き、解決に重い腰を上げました。
画像がグレーになる現象はトップページの上の部分にあるピックアップした記事の部分やサイドバーにある新着記事の部分のみで、コンテンツの部分にある画像はグレーにもならず特に問題はありませんでした。
筆者もつい昨日解決したのでその解決をした方法を書いていくので、もし同じような症状があなたにも起きている場合は以下のことを順番にしていくと良い。
解決策
キャッシュを消す。
ブラウザのキャッシュ
Google Chromeの場合は右上の3つ並んでいる点をクリックして設定を選択する。
設定ページを開いた後、一番下へスクロールして「詳細設定を表示…」をクリックし
「閲覧履歴の消去」ボタンをクリックして「キャッシュされた画像とファイル」にチェックを入れ「閲覧履歴データを消去する」をクリックするとキャッシュを消すことができる。
WordPressのキャッシュプラグインのキャッシュ
キャッシュプラグインを利用しているならその設定を見てキャッシュを消すようにしよう。
当サイトが利用しているキャッシュプラグインは「W3 Total Cache」のみ。
W3 Total Cacheの消し方は「W3 Total Cache」の設定ページを開いて「empty all caches」をクリック
Cloud Flare
Cloud Flareを使っているならCloud Flareサイトを開いてキャッシュを消すようにする。
やり方はCloud Flareサイトのキャッシュページ開いて「purge individual files」ボタンの横にある下向き三角を押して表示される「purge everything」をクリック
もし効果がなかったら次へ。
検証
Google Chromeのツールの一つ「検証」でグレーになっている画像を確認してみよう
ただしツールの使用方法は今回は書きませんのでツールの使い方は調べてください。
検証で、もしかしたらグレーの画像を使っているだけかもということがあるかもしれません。
使い方や検証でわからないなら次へ。
プラグインやテーマを確認してみよう
先にプラグインから…と言いたいがプラグインをたくさん使っているならば先にテーマからチェックしておこう。
テーマ
テーマはFTPを使いテーマディレクトリをすべてダウンロードして、テーマにある画像の中にグレーの画像があるかないかチェックしてみよう。ちなみにテーマハミングバードはそんなものはなかった。素晴らしい。
プラグイン
プラグイン…WordPressでは一番問題を起こす原因の一つだ。
プラグインはすべてを一度に停止するとページが表示されなくなるなどの問題が発生することがある。
プラグインをすべて停止して確認する前にまずはキャッシュプラグインから停止しよう。
キャッシュプラグイン
有名なキャッシュプラグインは以下の通りである。他にもキャッシュプラグインがあるかと思われるので同様に停止しよう。
- w3 Total Cache
- wp Super Cache
- WP File Cache
- DB Cache Reloaded Fix
- Unveil Lazy Load
- 001 Prime Strategy Translate Accelerator
少し注意してほしいのが、キャッシュプラグインを停止してサイトが表示されなくなる現象が稀にあります。
キャッシュプラグインで原因不明なら次へ
セキュリティプラグイン
セキュリティプラグインを停止して確認してみよう。
それでも解決ならなかったら次へ。
画像関連とリンク関連プラグイン
有名なプラグインは以下の通りだ。
- Broken Link Checker
- EWWW Image Optimizer
- Pixabay Images
- Simple Local Avatars
- WP to Twitter
今回の件と関係なさそうなプラグインもとりあえずやってみよう。
解決できなかったら次へ
最後は全て停止
プラグインを全て停止して確認してみよう。
他の対処方法
問題となっている記事ページのアイキャッチの設定をもう一度設定してみよう。
僕の力ではここまでしか解決はできない。なぜなら大抵ここにある方法で解決するからだ。
それでもわからないならばここはテーマを変更するか、ダメ元でレンタルサーバーのお問い合わせをしてみよう。
原因が判明した
うちのサイトでグレーが表示される原因がここで判明した。このプラグインだった
Unveil Lazy Load
このプラグインは「画像データの読み込みタイミングを最適化しページの表示速度を向上させる」機能を持つ。
インストールするだけで効果は現れるので便利なプラグインの一つだ。
そういえば2ヶ月前にサイトを高速化しようか！ふむふむこのプラグインを入れればいいのか！と導入したそのうちの一つが「Unveil Lazy Load」だ。
このプラグインは便利で良かったのだが画像が表示されないのも大問題なので停止をしておく。
最後に
このサイトが利用しているテーマは「ハミングバード」でLazy Loadプラグインは有名なのでもしかしたら…と思い、ハミングバードを提供しているOPEN CAGEさんのサイトでチェックしてみると。
あるやないかい！
何か困ったことがあれば説明書を見るべきだった。
以上です！
追記
「Unveil Lazy Load」の代わりを探してみたところ、似たような効果を持つプラグイン「BJ Lazy Load」があったので使ってみたところ、画像がグレーになる等の問題発生しなかったのでこれでいこうと思います。
以上です！
追記2
上記の「BJ Lazy Load」プラグインは以前紹介したプラグインPixabayと相性が悪い、エラーが出ることが分かったので停止です。
WordPressで記事を作るとき画像を探す手間が省けるプラグイン【Pixabay】
また代わりのプラグインを探してみようと思います。トホホ。。。