サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年1月25日 09:29
初めまして、こんにちは。
Cocoonを利用させていただいてます、けろりと申します。
本当に本当にいつもお世話になっております。
本当に本当にいつもお世話になっております。
ブログを始めて半年程度の、まだまだ初心者の私に、
ぜひお力添えをいただきたく連絡差し上げました。
■現象
AMP化した記事に貼りつけたアフィリエイトバナーが、
ゆがんでいたり、画質が極端に劣化して表示されます。
当サイトで現象が出ている一部の記事になります。
例１）
こちらは iPhoneX＋ Safari または iPhoneX＋Google Chromeで
添付画像のように、アフィリエイトバナー（画像）が、
極端に画質が劣化した状態で表示されます。
※レスポンシブテストでは、問題ありませんでした
https://kerotsuzuri.com/onlymineral-osaka-store/?amp%3D1&source=gmail&ust=1579956510806000&usg=AFQjCNGWtccj9WYgvpxKZfp-jXg6_swe8 g"> https://kerotsuzuri.com/onlymineral-osaka-store/?amp=1
例２）
こちらはPCでも、iPhoneXから見ても、
AMPページだとアフィリエイトバナーがゆがんで表示されます。
https://kerotsuzuri.com/wrinkleshot/?amp%3D1&source=gmail&ust=1579956510806000&usg=AFQjCNE_KDjJ2UvKbcvZRhfb4qDkhSaKV A"> https://kerotsuzuri.com/wrinkleshot/?amp=1
■試してみたこと
・Cocoon側でAMPキャッシュの削除
・アフィリエイトバナーの貼り直し
・iPhoneXで、Safari・GoogleChomeのキャッシュ削除
・ アフィリエイトバナーをamp-imgにタグを書き換え、widthなどを指定してみる
なども試しましたが、特に変化が見られませんでした
■その他、確認していること
楽天アフィリエイトだけでなく、
Amazonアソシエイトや、A8の横長のバナーでも現象を確認しています
自分でWordpressにアップロードした画像においては、
このような問題は出ていません。
そもそもAMP用の画像は、幅が1200px以上の高画質画像であることが
推奨されていますが、その関係でしょうか？
大変お手数おかけしますが、ご確認いただけましたら幸いです。
どうぞよろしくお願いいたします。
2020年1月25日 11:25
画像に width 属性と height 属性がないのが原因だと思います。
外部 URL の画像を埋め込む際に、2 つの属性を付けるとどうなるでしょうか。
尚、WordPress にアップロードした画像を埋め込む際は、何もする必要はありません。
わいひら reacted
2020年1月25日 12:06
これとかは、Google上のAMPキャッシュが表示されているので、それを見てみる必要があるかもしれません。
なんと検索したら、そのページが出てきますか？
Googleの検索結果から見てみる必要があるかも。
Topic starter
2020年1月25日 14:45
>Akira様
widthを指定してみたところ、A8のゆがんで表示されていた横長バナー画像が、
正しく表示されるようになりました！
調査不足で恐れいります。本当にありがとうございます。
>わいひら様
なるほど！Google側のキャッシュの可能性もあるのですね...。
検索の仕方ですが、「オンリーミネラル 大阪 店舗」で、8番目あたりに表示されます。
2020年1月25日 23:21
パソコンのブラウザのスマホエミュレータで見る限りは、問題ないように見えます。
ただ、解像度の高いスマホで見る場合は、画像が粗く見えてしまうことは、十分ありえることかと思います。
そういった対策に「Retinaディスプレイ対応」みたいな対策方法もあります。
以下みたいなもんです（詳しくは検索してください）。
そもそもAMP用の画像は、幅が1200px以上の高画質画像であることが推奨されていますが、
見たところ、画像はこちらなのでこの解像度の画像なら、粗く見えてしまうかもしれません。
ttps://thumbnail.image.rakuten.co.jp/@0_mall/cosmecomonline/cabinet/item-img28/item_1000065872_3.jpg?_ex=400x400
画像へ
ただこれのURLクエリを外せば、もっと大きな画像になるのでこっちを使った方が良いのかもしれません。
ttps://thumbnail.image.rakuten.co.jp/@0_mall/cosmecomonline/cabinet/item-img28/item_1000065872_3.jpg
画像へ
Topic starter
2020年1月26日 12:53
色々とお調べいただきありがとうございます。
スマホエミュレータでは問題がなかったとのこと、安心しました。
だとすると、Retinaディスプレイの可能性が大ですね。
家のものに他のモバイル端末を借りて検証してみたいと思います。
それと、教えていただいた「Retinaディスプレイ対応」も試してみます。
iPhoneでAMPページをのぞくと、アイキャッチ画像も綺麗とはいいがたい画質で表示され、
とはいえサイトスピードも気になりますし、どこまで高画質にすればよいのか悩んでいました。
楽天アフィリエイト側には、
AMPに対応した高画質の画像を掲載できるようにしてほしいと要望はすでに出してまして、
今後の需要によってどうなるかなと見守っているところです。
まだまだ自分で切り分け・対処できる部分が見えてきましたので、
いったんこれでクローズさせていただければと思います。
また何か参考になる情報が見つかりましたら、ぜひご報告させてください。
本当に重ねてありがとうございました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。