WPのテーマCocoonでamp導入後、画像の前後に空白が現れた時の解決方法

今回は、WordPressのテーマ、CocoonでAMPを導入した際に空白が表示されてしまうという現象が起こりましたので、解決方法を書いて行きたいと思います。AMPとはモバイルページを高速に表示させる技術です。
CocoonではAMPへの対応は、チェックボックスにチェックを入れるだけで出来ます。
面倒なことはすべてテーマから出来てしまうので、作者であるわいひらさんに感謝ですね(^^)/

AMPに対応することでGoogle Discoverグーグルディスカバー)に登録されやすくなるなどのメリットがあります。そこで僕はいち早くAMPを導入しましたが、自分でいじった訳ではないので不具合など起こるはずもないと信じて、一年ぐらいそのままにしていたんですが、スマホから昨日アクセスしてみたところ謎の空白が出来ていました。

謎の空白の正体とは?

冒頭の赤の枠の位置、画像の前に白い空白が出来ていたのですが、ぱっと見、見当もつきませんでした。

一瞬、CSSが関係しているのではないかと恐怖しました。「うわーこれ自分じゃ解決できないぞどうしよう」という思いが頭をよぎりましたが、何度かアクセスしてみると、一瞬遅延ロードっぽい動作をしていることが判明しました。
そしてこの画像にカーソルを合わせてみるとなんと画像が保存できるではありませんか!?

画像の保存を試みてみると 「a Lazy なんたらかんたら」という名前でした。
a Lazy、と言えば、WordPressのプラグインである。 「Lazy Loader」のことですね。

「Lazy Loader」はページを読み込む際に画像の読み込みを後回しにしてページの読み込みを高速化するというものです。
AMPは画像の表示に

<amp-img>

というタグを使っていますが、

遅延ロードでは
<img>タグですので2つのイメージタグが被ってしまい、<img>の方では空白が表示されていたのだと思います。

僕は以前のテーマではプラグインを使って遅延ロードしていたのでそのままCocoonを導入したら今回のようなことが起こりました。

解決方法

遅延ロード系のプラグインを入れていてCocoonで今回のような空白が出来てしまった場合、「Lazy Loader」系のプラグインを削除すれば解決します。

遅延ロードさせたい方は、画像の遅延ロードは、Cocoonの設定→高速化→Lazy Loadを有効にするという項目をチェックすることで使うことができます。

無事解決できたどうか確認するには、Googleからページを検索して確認するとキャッシュされたページが表示されるためしばらく以前の空白のある状態のままのページが表示されると思います。

そこで、ページの最後に「?amp=1」と入れることで現在の状態をチェックすることが出来ます。

解決しない場合、Cocoonの項目からキャッシュ削除→AMPのキャッシュを削除もしくわ全てのキャッシュを削除してみましょう。その他のキャッシュ系のプラグインを入れている方はそちらも削除しておきましょう。

今回は、Cocoonで画像の前に空白が出来てしまった時の対処法について書きました。
思いついた機能は大体揃っているWordPressやCocoonですが、なんでも入れてしまうと今回のように不具合が起こることもあるということですね( ;∀;)

シェアする

  • このエントリーをはてなブックマークに追加

フォローする