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

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

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

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

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

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

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

スポンサーリンク

原因の調査

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

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

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

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

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

結果の確認

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

おわりに

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

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

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

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

image credit: Hajime Taguchi先日、『東京23区内に月1万5千円以下で住んでみた』というコミックエ...

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