amp対応ページでのamazonバナーリンク

wordpress
この記事は 約3分 で読めます。

テーマにCocoonを使っていてamp対応を有効化し
amazonバナーリンクを使っている人向けに参考になるかな?っていう記事です
自分はこの部分を見つけるのに苦労したので…

Ver0.6.4~この修正をしなくても高さ、幅の数値を取れるようになっています
Sponsored Link

デフォルト状態

このサイトではamazonアフェリエイトを使っていてバナーを貼っているのですが
amp対応を有効化した状態で対応ページを見るとこのような状態になっていました

こんな感じ

これはamazonの商品リンク用パーツ?がこのサイズのため
amp.phpでこの様に指定しているからとの事でした

$iframe_new = '<amp-iframe sandbox="allow-scripts allow-same-origin allow-popups" src="'.$m[$url_idx][$i].'" width="120" height="240">'.$amp_placeholder.'</amp-iframe>';

ただうちのサイトのように、他のサイズのバナーを使っている場合
画像を見る通りこれだと不都合があります
そこでこの部分を使用しているバナーのサイズに合わせてあげる訳です

修正後

修正後のバナー

$iframe_new = '<amp-iframe sandbox="allow-scripts allow-same-origin allow-popups" src="'.$m[$url_idx][$i].'" width="300" height="250">'.$amp_placeholder.'</amp-iframe>';

ただ高さ、幅のサイズを使用しているバナーサイズの数値に変更するだけです

ただし、この場合この指定したサイズ以外のバナーやリンクを使う事が出来なくなります
画像が小さい物は引き伸ばされ、大きな物はデフォルト状態にある画像のようになるためです

なので特定のサイズの物を1つだけ使用している事限定になります
商品へのリンクで使っている人やamp対応ページを作っていない場合
今回の修正は関係ないので気にしないでください

おわり

今回たまたまバナーリンクを使っていてampページを確認していて気づいた事なので
使用しているテーマで変わってくる部分だとは思うし
バナーリンクを使っている人がどれぐらい居るのかも分からないので
万人向けとは言えませんが、もし同じような状態で困っている人の参考になれば嬉しいです

タイトルとURLをコピーしました