【CSSでAMP対策】アフィリエイト広告の下に謎の余白。楽天/Amazon/A8/バリューマコース

AMP対応ページにすると、広告の下に空白が表示されることがあります。

AMP - a web component framework to easily create user-first web experiences
Whether you are a publisher, e-commerce company, storyteller, advertiser or email sender, AMP makes it easy to create great experiences on the web. Use AMP to b

 

これは、企業が広告のカウントを取得するために<img src~>で小さい画像<width=”1″ height=”1″ border=”0″>が埋め込まれているからです。

この<img>タグを削除すれば解決することがあるのですが、色々とまずいようですのでCSSで対策しました。

スポンサーリンク

 

まずは、AMPのスタイルシートCSSに次のように記述します。

/* AMP広告改行しない*/
span.img-inline amp-img {
display: inline-block;
}

 

記述場所は、Cocoonの場合、ダッシュボード→外観→テーマエディター→Cocoon Child→amp.cssになります。

「/* AMP用のスタイルを書く */」の下に記載します。

 

次に、アフィエイトのタグを<span>で囲みます。これで妙な改行は表示されなくなるはず。

尚、スパンのクラス名は(この場合はimg-inline)他のクラス名でも構いません。

<span class=”img-inline“>
アフィリエイトタグ
</span>

楽天アフィリエイト

 

公式サイト

モバイルで見るとバナーは表示されていますが…

末尾に「?amp=1」を付けて見てみたら、真っ白でした。

この場合もCSSのインライン表示を行ったところ表示されるようになりました。

尚、楽天ウィジェットはJavaScriptを使っているのでAMP対応ページでは表示されません。残念。

 

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対応広告になりました!」と書かれてあるので貼りやすいのでしょうか?今度試してみます。

※じゃらんはこの方法では無理なようです。また今度やってみます。

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