ブログサイトをみていたらアイキャッチ画像が暗転したことありませんか？画像を新規タブで開くと「dammy.gif」と出て画面は真っ暗。
アイキャッチ画像が暗転する理由
アイキャッチ画像が暗転する理由は以下のことが考えられます。
- 画像の読み込みが遅いだけ
- THE THOR（ザ・トール）画像の設定が悪い
- プラグインが問題
- THE THOR（ザ・トール）とプラグインの機能が喧嘩している
画像の読み込みが遅いだけ
元々黒い画像のままでしたら、画像遅延読み込みのせいかネット環境のせいです。いずれにせよ画像の読み込みが遅いだけかもしれないので、ネット環境の確認をしてみましょう。
ネット環境の問題であれば以下の方法を試してみてください。
- ネット回線の受信方法をWi-Fiから有線に変える
- Wi-Fiルーターの場所を変えてみる
- Googleなどで開いているタブの数を減らす
- PCを再起動してみる
ネット環境が原因であれば、大体はこれらの方法で解決します。それでも解決しない場合は次の原因を疑いましょう。
アイキャッチ画像が一度表示されてから暗転するか、元々暗いままなのかで対策が変わるよ！
THE THOR（ザ・トール）画像の設定が悪い
THE THOR（ザ・トール）の長所であり短所の「設定が多い」ところ。一言に画像の設定と言ってもいろいろな項目から変更できるので、いくつかの設定が合わさってアイキャッチ画像が暗転している可能性があります。
画像の設定に関しては後述するのでそのまま読み進めてください。
プラグインが問題
プラグインがアイキャッチ画像を暗転させていることも考えましょう。画像の遅延読み込み処理が問題の可能性があります。以下のプラグインを入れていたら確認してみてください。
- BJ Lazy Load
- Lazy loader
- a3 Lazy load
画像を遅延読み込みさせるプラグインを導入していると、アイキャッチ画像の暗転する可能性があります。ちなみにわたしは、画像遅延読み込みのプラグインを消去したら改善されました。
ただし、一概にこれというのは断定できません。なぜなら、WordPressテーマとプラグインの互換性が原因とも考えられるから。
今回はTHE THORに焦点を当ててお話をしていますが、他のテーマでも起こり得ることかもしれません。いくつかの原因を考えてそれぞれトライするようにしましょう。
THE THOR（ザ・トール）とプラグインの機能が喧嘩している
心配性ゆえ念には念をと思っていろんなプラグインを入れていたことが、今回のアイキャッチ画像暗転事件の発端。プラグイン機能とTHE THOR（ザ・トール）の機能がかち合って表示が変になっていたんです。
THE THOR（ザ・トール）の機能は本当に充実していて、プラグインの機能がテーマのカスタマイズでだいぶまかなえてしまいます。
THE THOR（ザ・トール）を使っている方はプラグインの機能とテーマの機能を照らし合わせて、どちらかで機能していることは重複させないように注意しましょう。
解決法①THE THOR（ザ・トール）の設定を見直す
具体的にTHE THOR（ザ・トール）のどの部分の設定を触ったら解決できるか深掘りしていきます。設定を確認するのは2箇所だけですのですぐ終わります。
外観→カスタマイズ→基本設定→アイキャッチ画像の設定と進みます。
この画面までこれたら、アイキャッチホバーエフェクトの設定を無しにしてください。この設定はカーソルを画面に合わせるとズームされる機能で、初期設定ならズームされるようになっているみたいです。画像ズームしても意味がないのでこの設定は外しておきましょう。
もう一つの設定です。外観→カスタマイズ→SEO設定→img非同期読み込み設定と進みます。
img非同期読み込み設定にチェックを入れてないのがデフォルトかもしれませんが、もしチェックが入っていたら外しておきましょう。多分ですが、これが原因ではないと思うんですが、念には念を入れて画像関連の設定を見直すということでやっておきます。
このあたりの設定は表示速度改善のための設定で、SEO対策にモロにヒットする内容なのでやっていない方はついでにやってしまいましょう。THE THOR（ザ・トール）のSEO設定についてで詳細を説明しているのでご参考ください。
解決法②画像表示系のプラグインを見直す
わたしが今回削除したプラグインは以下の2つ。
- BJ Lazy Load
- PWA for WordPress
BJ Lazy loadは画像の遅延読み込みをしてサイトの表示速度を向上させるというもの。こちらを消したらアイキャッチ画像が暗転することがなくなりました。SEO対策の効果はあるんですが、そもそも画像が表示されないのでは意味がないので泣く泣く消去です。
PWA for WordPressは画像表示と関係なさそうなのですが、消したり戻したり試行錯誤していてこのプラグインを消した時に改善されました。
安心してください。このプラグインを使わなくてもTHE THOR（ザ・トール）ならPWAの設定ができます。外観→カスタマイズと進めばPWA設定とあるのでそちらで設定しておきましょう。
THE THOR（ザ・トール）設定の注意点
今回はアイキャッチ画像暗転の解決法についてお話しましたが、ついでにTHE THOR（ザ・トール）の設定について注意点を。それは、プラグインと機能が被っていないかどうかです。
THE THOR（ザ・トール）は設定できることが様々あり、ネットの声をみる限りでも「設定が多すぎて訳がわからない」と言われるほどです。
ネットの記事も網羅性をとるためにあれこれプラグインを提示してくれていますが、THE THOR（ザ・トール）とプラグインのかみ合わせについて説明している記事はみたところありません。
それぞれの機能をちゃんと理解して被っている設定はプラグインを使わないようにしないと、今回のような不具合が起こるので慎重にプラグインは選びましょう。プラグインを減らせばそれだけサイトが軽くなるのでSEO効果もあります。
まとめ
- アイキャッチ画像の暗転は、画像表示系のプラグインを一部消去すればOK
- 画像表示系のプラグインで減った機能はTHE THOR（ザ・トール）の機能設定で補えば問題無し
便利なものも使い方次第でよくも悪くもなるという教訓になりました。同じ問題を持っている方の参考になれば幸いです！
THE THOR（ザ・トール）の設定は本当に山ほどあってどれをやればいいかわからないと思うので、以下の記事もご参考ください。
