【Cocoon】AMP設定をすることにより画像が重複してしまう問題を解決

cocoon

テーマ「Cocoon」には「AMP機能を有効化」する機能がついています。

しかしこちらの機能で有効化してところ、画像が上下に重複して表示されるバグが発生してしまいました。

こういった感じですね。

2重、物によっては3重に表示されています・・・。

何個表示すんねん・・・と思わざるをえません。。。

記事によっては画像により吐き気をもよおすレベルです。。。

ググっても解決策が出てこなかったので・・・

もう「Cocoon」のテーマ作ってるところで相談しちゃえっ!!

ということで

AMPページの画像が全て重複して表示されてしまいます。
いつもお世話になっています。 投稿ページ全てになるのですが、AMP機能を有効化させると全ての画像が重複して表示されてしまうのです。 画面に関しては、添付ファイルの画像をご覧ください。 あまりシステムに詳しいわけでもなく、 どの設定が悪いのか見当もつかない状態です。 ネットでも検索してみたのですが見つ...

はい、このようにですね、掲示板に書き込んで助けてもらいました😂

スポンサーリンク

画像が重複する原因

「Lazy Load 機能」が原因でした。

WordPressを使用していると「プラグイン」を幾つか入れることになると思います。

もちろん僕もその1人です。

僕は画像を圧縮する為に

Smush

というプラグインを使用しています。

アタシにまかせな!圧縮してあげるよっ!!!

と言い出しそうなキャラクターですね。

何とこちらに「Lazy Load 機能」がついていました。

Cocoon」本体には「高速化」の欄に

「Lazy Loadを有効にする」

という項目があります。

お分かりですか?

つまりのところ

Coccon」側と

Smush」側で2度表示されていた為

2重に表示されていたんですね。

尚「Cocoon」側のチェックを外しても直らなかったので、外すなら追加のプラグインの方が確実です。

Lazy Loadとは

さっきから当たり前のように言ってる「Lazy Load」って何ですか?

説明が遅れましたすみません💦

「Lazy Load」とは画像データを遅延読込させる機能です。

遅延・・・え、遅くなるなら要らなくないんですが・・・

ややや、言葉の雰囲気は良くないですが、

実際は見えてるところ(可視領域)の画像だけ表示させて、見えてないところは表示されない、という機能です。

見えていない分の読み込みをしない分、表示が早くなる、というものです。

分かりやすい資料をこちらに・・・

Lazy Loadとは?画像読み込みを遅延ロードするWordpressプラグインと、jQuery(jsライブラリ)の設定
Lazy Load とは・・・Webページのスクロールに応じて、画像データを遅延読込させる事で、Webページの表示速度を高速化するプラグインになります。 今回の記事では、このプラグインの設定手順(Wordpressプラグインと、「lazy load plugin for jquery」)について、順に解説しています。

【Smush】Lazy Loadの解除方法

「Smush」の「Dashboard」を開くと、「Lazy Load」の項目が出てきます。

初期設定だとこちらの横に✅が入っていると思います。

「Lazy Load」を選択し、下へスクロールしていくと

「無効化」のボタンが出てきます。

英語で「Invalidation」かもしれません。

こちらをクリックすることで、「Smush」の「Lazy Load」を停止させることができます。

まとめ

ということで、今回は追加したプラグインに

「Lazy Load」機能が入っていたことが原因でした。

追加したプラグインにどのような機能が入っているか、

それを知っておくとエラーの回避に繋がりますね。

別のテーマで同じ現象が発生する方は一度全プラグインに「Lazy Load」が入っているかを確認して

1つだけ起動させるように調整すると大丈夫だと思います。

「Cocoon」に関しての過去の記事は↓をご覧ください☺️

cocoon
「cocoon」の記事一覧です。

コメント