AMP対応ページにすると、広告の下に空白が表示されることがあります。
これは、企業が広告のカウントを取得するために<img src～>で小さい画像<width=”1″ height=”1″ border=”0″>が埋め込まれているからです。
この<img>タグを削除すれば解決することがあるのですが、色々とまずいようですのでCSSで対策しました。
まずは、AMPのスタイルシートCSSに次のように記述して、インラインブロックで改行しないように設定。
/* AMP広告改行しない*/
span.img-inline amp-img {
display: inline-block;
}
（例）ルクセリタスの記述場所。
- Luxeritas
- 子テーマの編集
- AMP用スタイル：style-amp.css
次に、アフィエイトのタグを<span>で囲みます。これで妙な改行は表示されなくなるはず。尚、スパンのクラス名は（この場合はimg-inline）他のクラス名でも構いません。
<span class=”img-inline“>
アフィリエイトタグ
</span>
CSSのdisplayとは？と思う方は、こちら【CSS】displayの使い方を総まとめ！inlineやblockの違いは？が分かりやすくて良いと思います。
楽天アフィリエイト
URLの末尾に「amp」を付けてパソコンからAMPサイトを表示させると、バナーは表示されていますが…
Googleの検索ページからAMPマークが表示されている当ブログを開いてみると…
なんと真っ白。楽天市場と楽天トラベルのバナーは表示されていませんでした。この場合もCSSのインライン表示を行ったところ表示されるようになりました。
ただし、CSSでも表示できないバナーがあります。理由は分かりません。尚、楽天ウィジェットはJAVAScriptを使っているのでAMP対応ページでは表示されません。残念。
テキスト広告もただ設置しただけではこのように空白が空いてしまう場合がありますので、<display: inline-block>で設定します。
Amazonアソシエイト
<ifame>タグなのでAMP非対応。
試しに＜amp-iframe＞に直してみましたがエラーでした。
現状では、こういったバナーは貼れないということになります。
Amazon商品ページの左上に表示されるアソシエイトツールバーの場合、テキストと画像のリンクは貼れますが、「テキスト＋画像リンクは✖」ということになります。
ちなみに、アソシエイトツールバーは、ホーム画面➡ツール➡アソシエイトツールバーから設定できます。
A8.netの場合
バナーを貼りたい場合は「通常のリンク」ではなく「AMP対応リンク」を貼ります。
テキストリンクの場合は、このように<img>表示がありますので、CSSで空白が表示されないよう設定します。
バリューコマース
バナーを貼りたい場合は、通常のリンクではなく「AMP対応リンク」を貼ります。
テキストリンクの場合は、A8.netと同様にCSSで空白が表示されないよう設定します。
カエレバ、トマレバ、カエレバ
当ブログでは「amazle風-2(cssカスタマイズ用)」で作成しています。
パソコンから確認すると間延びした感じで表示されましたが、スマホから確認したところ問題はありませんでした。
GoogleのAMPテストでも異常なし。
後書き
AMPは本当にややこしい。
楽天もAmazonも、もう少しAMP対応のバナーやウィジェットを作ってほしい。
他にも、リンクシェアやTGアフィリエイトを登録していますが、使い勝手がいまいちでしたので放置しています。
アクセストレードは「通常画像バナーもAMP対応広告になりました！」と書かれてあるので貼りやすいのでしょうか？今度試してみます。
※じゃらんはこの方法では無理なようです。また今度やってみます。
