Simplicity2のAMPでAmazonJSの画像がひしゃげていた!ので、修正。

当ブログの AMP ページを確認していて、妙なことに気が付きました。

一部の画像が、ひしゃげているのです。少し分かりにくいかもしれませんが、次のような例です。

該当の画像は、とあるマンガの表紙の画像です。本来、若干の縦長の長方形になるはずですが、画像の比率が縦横同じになってしまっているため、少し潰れて見えます。

また、本来こちらの画像はもっと大きく表示されるはずなのですが、なぜか縦横 75px に縮まっていました。

どうも、AmazonJS で「単純なHTML」の「画像(大)」を選択した箇所で、上記のような事象が起こるようでした(他の大きさの画像でも起こるかも)。

なぜこんなことに・・・? と思いましたが、解決できました。

スポンサーリンク
スポンサーリンク

原因の調査

Simplicity2 の AMP ページ生成コードの下記が原因のようでした。

  //カエレバ・ヨメレバのAmazon商品画像にwidthとhightを追加する
  $the_content = preg_replace('/ src="(http:)?\/\/ecx.images-amazon.com/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="http://ecx.images-amazon.com', $the_content);
  //カエレバ・ヨメレバのAmazon商品画像にwidthとhightを追加する(SSL用)
  $the_content = preg_replace('/ src="(https:)?\/\/images-fe.ssl-images-amazon.com/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="https://images-fe.ssl-images-amazon.com', $the_content);
  //カエレバ・ヨメレバの楽天商品画像にwidthとhightを追加する
  $the_content = preg_replace('/ src="(http:)?\/\/thumbnail.image.rakuten.co.jp/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="http://thumbnail.image.rakuten.co.jp', $the_content);
  //カエレバ・ヨメレバのYahoo!ショッピング商品画像にwidthとhightを追加する
  $the_content = preg_replace('/ src="(http:)?\/\/item.shopping.c.yimg.jp/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="http://item.shopping.c.yimg.jp', $the_content);

(wp-content/themes/simplicity2/lib/amp.php より)

カエレバ・ヨメレバを使っている場合に、画像の大きさを調整するために縦横 75px の指定を入れる、というのが本来の趣旨のようですが、AmazonJS の「単純なHTML」の画像にも影響が出てしまう内容となっています。

私の場合は、カエレバ・ヨメレバは使用していないので、次のようにコメントアウトしました。

  //カエレバ・ヨメレバのAmazon商品画像にwidthとhightを追加する
//  $the_content = preg_replace('/ src="(http:)?\/\/ecx.images-amazon.com/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="http://ecx.images-amazon.com', $the_content);
  //カエレバ・ヨメレバのAmazon商品画像にwidthとhightを追加する(SSL用)
//  $the_content = preg_replace('/ src="(https:)?\/\/images-fe.ssl-images-amazon.com/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="https://images-fe.ssl-images-amazon.com', $the_content);
  //カエレバ・ヨメレバの楽天商品画像にwidthとhightを追加する
//  $the_content = preg_replace('/ src="(http:)?\/\/thumbnail.image.rakuten.co.jp/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="http://thumbnail.image.rakuten.co.jp', $the_content);
  //カエレバ・ヨメレバのYahoo!ショッピング商品画像にwidthとhightを追加する
//  $the_content = preg_replace('/ src="(http:)?\/\/item.shopping.c.yimg.jp/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="http://item.shopping.c.yimg.jp', $the_content);

Amazon の部分だけでこと足りそうですが、ついでなので楽天・Yahoo! 部分も合わせてコメントアウト。

結果の確認

AMP ページにて以下のように表示が改善しました。

おわりに

今回の修正(といってもコメントアウトしただけ)は、テーマのソースをいじるものなので、テーマをアップデートしたらまた同じ修正をしないといけないのが難点です。

また、カエレバ・ヨメレバを利用している人は採用できない方法かもしれません。

以上のような問題もありますが、取りあえずさしあたっての表示は直ったので良しとします。

なお、上記のマンガは次の記事で紹介しています。オススメです。

20歳鹿児島男児の上京物語、続編。東京での成功を夢見たすべての男性にオススメ。
image credit: Hajime Taguchi 先日、『東京23区内に月1万5千円以下で住んでみた』というコミックエッセイを読んだ。 上記の作品は、19歳だった田口始氏(作者)が上京してすぐの頃の話をま...

スポンサーリンク
スポンサーリンク
【雑記】PC
Kiryuをフォローする
宅建士合格ブログ