画像が巨大化！？ CocoonのAMP設定と対処法

画像が勝手に巨大化！？ CocoonのAMP設定と対処法

ブログ運営

2020.01.18 2019.07.20

ある日突然、記事内に挿入していたランキングサイトのバナーが巨大化。
あまりの主張の強さに笑ってしまうほどの大きさ笑
今回は巨大バナー出現の原因と対処法について調べてみました。

Contents

1 バナーが突然巨大化！？
2 原因
- 2.1 CocoonとAMP
3 原因箇所
4 対処方法
5 まとめ

バナーが突然巨大化！？

ある日、更新した記事をスマホで確認していたところ….

………ん?????

なんとなく巨大な違和感が…

……えっなんか…大きくない????

…!?
なぜか記事の末尾に入れているランキングサイトのバナーが巨大に。

記事内の文章と比較してみてもかなりの大きさ笑
ここまで巨大化し、ランキングサイトの主張をしていたらランキングも上昇しているだろう…

そう思いますよね。

いいえ。ランキングはめちゃくちゃ下がってました….泣

こんなにランキングの主張してるのに笑

そこで今回は巨大バナー出現の原因と対処法について調べてみました。

原因

CocoonとAMP

このブログではわいひらさんの開発されている、Cocoonというテーマを使用しています。
Cocoonではモバイルページを高速表示するための規格であるAMPを容易に使用することができます。

CocoonでのAMPの使い方

Cocoon設定→ＡＭＰ→AMP機能を有効化するにチェックを入れる

しかし2019/7/19時点のバージョン(1.8.9.1)ではAMPを有効化すると外部リンクから取得している画像は300px×300pxに自動リサイズされてしまうようです。

原因箇所

Cocoonのlib/amp.phpを見てみると下記の記述があります。

//widthとheight属性のないものは画像から情報取得
      if ($url && (empty($width_value) || empty($height_value))) {
        $size = get_image_width_and_height($url);
        //_v($class_value);
        if ($size) {
          //$class_attr = ' class="internal-content-img'.$class_value.'"';
          $width_value = $size['width'];
          $width_attr = ' width="'.$width_value.'"';//width属性を作成
          $height_value = $size['height'];
          $height_attr = ' height="'.$height_value.'"';//height属性を作成
        } else {
          //外部サイトにある画像の場合
          //$class_attr = ' class="external-content-img'.$class_value.'"';
          //var_dump($url);
          if (
            strpos($url,'//images-fe.ssl-images-amazon.com') !== false ||
            strpos($url,'//thumbnail.image.rakuten.co.jp') !== false ||
            strpos($url,'//item.shopping.c.yimg.jp') !== false
          ) {
            //Amazon・楽天・Yahoo!ショッピング商品画像にwidthとheightの属性がない場合
            $width_value = get_amp_product_image_width();
            $width_attr = ' width="'.$width_value.'"';//width属性を作成
            $height_value = get_amp_product_image_height();
            $height_attr = ' height="'.$height_value.'"';//height属性を作成
          } else {
            $width_value = get_amp_default_image_width();
            $width_attr = ' width="'.$width_value.'"';//width属性を作成
            $height_value = get_amp_default_image_height();
            $height_attr = ' height="'.$height_value.'"';//height属性を作成
          }

        }
      }

外部サイトからの画像は
$width_value = get_amp_default_image_width();
$height_value = get_amp_default_image_height();
でデフォルト値を設定する仕様になっていることがわかります。

対処方法

AMPを無効化する

最も簡単な対策です。このブログではこの方法を採用しました。

画像バナーを自作する

リサイズされるのは外部サイトの画像だけなので、自サイトで画像をアップロードして、画像にリンクを貼ればリサイズされません。ランキングサイトから画像を抜くのが規約的に許されているかが分からなかったので、この対応は保留しました。

Cocoonのamp.phpを修正する

画像サイズをあわせるだけであれば下記の修正で対応可能です。

            $size = getimagesize($url);
            $width_value = $size[0];
            $width_attr = ' width="'.$width_value.'"';//width属性を作成
            $height_value = $size[1];
            $height_attr = ' height="'.$height_value.'"';//height属性を作成

ＡＭＰは画像幅の最小値があるようなので、単純な修正ではうまくいかないのでしょうか。
また、テーマのバージョンがあがる度に修正をいれるのも面倒です。

親テーマの更新に耐えるため子テーマのfunctions.phpにget_image_width_and_heightを定義する方法も試してみましたが、うまくいきませんでした泣

そこは今後試行錯誤していく予定です。

まとめ

今回は、バナー巨大化の原因と対策について書きました。私のように突然巨大化したバナーにお困りの方の参考になればと思います笑
現在は対処療法としてAMPを無効化していますが、これからモバイルサイトの高速化表示は需要があると思うので、今後対策していくつもりです。
AMPの規格はまだ新しいものなので今後も動向に注目ですね！
また記事にする予定です。

そして、今回の巨大化を一緒に笑ってくれた方、ありがとうございました笑
私のTwitterをまだフォローしてないよ、という方はフォローよろしくお願いします^^
そして下のランキングサイトの応援もして頂けると喜びます！