画像が表示されない！WordPressで記事の画像部分が空白になって表示されない場合の原因と対処(1×1.trans.gif)

WordPressで記事に画像を貼り付けているにもかかわらず、記事を表示した際に画像が全く表示されずに画像部分が空白で表示されてしまう場合の原因と対処方法について覚書。

画像が表示されない代わりに画像と同じ大きさの空白、実際には、本来の画像の代わりに1x1.trans.gifが表示されてしまう場合の原因と対処方法です。

症状とその例

記事に画像を貼り付けた際に、記事を編集しているときにはきちんと画像が表示されますが、記事をプレビューした際や公開状態にして記事を表示した場合に画像が表示されません。

記事のプレビューの際は、画像部分がない状態で表示されます。

以下のように記事の冒頭に写真画像を貼り付けた記事があるとします。

この記事をプレビューで見てみるとこんなふうに画像部分が抜け落ちて表示されます。

さらに記事を更新(公開)にして普通にブラウザで見てみると、ちょうど画像部分がそのまま白抜きの状態で、記事に貼り付けた画像が表示されません。

画像は表示されませんが、画像の大きさ分のスペースが存在ます。

画像が表示されるはずの部分を右クリックしてみると、画像を右クリックしたときと同じショートカットメニューが表示されます。

実際に[画像アドレスをコピー]をクリックして、ブラウザのアドレスバーに貼り付けてURLを確認してみます。

本来の画像ではなく、"1x1.trans.gif"という画像ファイルが参照されていることがわかります。

原因

記事に貼り付けた画像が白抜きになって表示される場合の原因としては、以下の2つが考えられます。

1. 「Lazy Load」プラグインもしくは、画像の遅延読み込みを実装するためのプラグインを使っている
2. テンプレートで「Lazy Load」と同様の機能を有効化している

「Lazy Load」とは

「Lazy Load」は、ページ読み込み速度を高速化するための画像の遅延読み込み機能を提供するWordPressのプラグインです。

ページが読み込まれる際に、画面に表示されていない画像は読み込まず、画面がスクロールされてその画像が表示される部分に来る直前に画像の読み込みを開始して画像を表示させることでページの読み込み速度の向上をはかるというものです。

ページが表示される際にすべての画像をダウンロードせず、必要なときに必要な画像だけをダウンロードすることでページの読み込み速度が向上するというものです。

対処方法

対象方法について以下に説明します。

「Lazy Load」プラグインを使っている場合の対処方法

「Lazy Load」プラグインもしくは、同じように画像遅延読み込み機能を提供するようなプラグインを使用しているのであれば、プラグインを停止してしまえばとりあえず症状はなくなります。

どのプラグインか特定できない場合は、とりあえず一旦すべてのプラグインを停止して1つ1つ有効化して影響しているプラグインを特定してください。

テーマで「Lazy Load」と同様の機能が有効化されている場合の対処方法

私のブログでは、「Simplicity」という素晴らしい無償のテーマを使わせていただいていますが、「Simplicity」には、テーマに「Lazy Load」の機能を実装しており、有効/無効の設定ができるようになっています。

Simplicity

内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

wp-simplicity.com

もし「Lazy Load」プラグイン(同様の機能を提供するプラグインを含む)をインストールしていないのに画像が表示されない症状が発生する場合は、使っているテーマにそういった機能が実装されていないか確認して、有効化されていれば無効化にもどせばなおるはずです。

参考までに「Simplicity」を使っている場合の設定の無効化手順を以下に記載しておきます。

SimplicityのLazy Load機能無効化手順

まず最初にWordPressにログインします。

次にWordPressの上部メニューの[カスタマイズ]をクリックします。

画面左にカスタマイズメニューが表示されるので、[画像]を選択します。

[Lazy Loadを有効(画像の遅延読み込み)]のチェックボックスがオンになっているので、チェックを外してオフにします。

チェックボックスをオフにしたら[公開]をクリックして設定を有効化します。

これでLazy Load設定をオフになったので、こんなふうに画像が表示されるようになったはずです。

記事を通常の状態で表示させてもきちんと画像が出るようになったはずです。

参考(Cocoonテーマ使用時)

コメント欄に有名な無料テーマ「Cocoon」を使っている場合の設定解除方法を記載してもらったので、参考までに追記しておきます。

ダッシュボードから[Cocoon設定] > [高速化]をクリックします。

[サイト高速化]画面が表示されます。

画面下にスクロールすると、[Lazy Load設定]欄があるので、設定の「Lazy Loadを有効にする]にチェックが付いていたらチェックを外して[変更を保存]をクリックして設定内容を保存してください。

Cocoonテーマの場合は、以上の操作で「Lazy Load」の設定が無効になります。

まとめ

WordPressで記事に画像が表示されない場合の原因と対処方法について説明しました。

私のブログでは、MixHost + Simplicity2の組み合わせでLazy Loadの機能を有効化して運用していますが、今のところ同様の問題は発生していません。

ローカルのテスト環境で再現したのでサーバー側に原因があるのかもしれないです。