【CSSでAMP対策】アフィリエイト広告の下に謎の余白。株DIY料理ホームサイト運営AMP【CSSでAMP対策】アフィリエイト広告の下に謎の余白。楽天/Amazon/A8/バリューマコース2019.01.21スポンサーリンクAMP対応ページにすると、広告の下に空白が表示されることがあります。border=”0′′>が埋め込まれているからです。この<img>タグを削除すれば解決することがあるのですが、色々とまずいようですのでCSSで対策しました。スポンサーリンクまずは、AMPのスタイルシートCSSに次のように記述します。Child→amp.cssになります。*/」の下に記載します。次に、アフィエイトのタグを<span>で囲みます。これで妙な改行は表示されなくなるはず。スパンのクラス名は(この場合はimg-inline)他のクラス名でも構いません。楽天アフィリエイトAmazonアソシエイトA8.netの場合バリューコマースカエレバ、トマレバ、カエレバ後書き楽天アフィリエイト公式サイトモバイルで見るとバナーは表示されていますが...末尾に「?amp=1」を付けて見てみたら、真っ白でした。この場合もCSSのインライン表示を行ったところ表示されるようになりました。楽天ウィジェットはJavaScriptを使っているのでAMP対応ページでは表示されません。Amazonアソシエイト公式サイト<ifame>タグなのでAMP非対応。試しに<amp-iframe>に直してみましたがエラーでした。現状では、こういったバナーは貼れないということになります。Amazon商品ページに表示される「アソシエイトツールバー」の場合、テキストと画像のリンクは貼れますが、「テキスト+画像リンクは✖」ということになります。公式サイトバナーを貼りたい場合は「通常のリンク」ではなく「AMP対応リンク」を貼ります。テキストリンクの場合は、<img>表示がありますので、CSSで空白が表示されないよう設定します。バリューコマース公式サイトバナーを貼りたい場合は、通常のリンクではなく「AMP対応リンク」を貼ります。テキストリンクの場合は、A8.netと同様にCSSで空白が表示されないよう設定します。カエレバ、トマレバ、カエレバ当ブログでは「amazle風-2(cssカスタマイズ用)」で作成しています。スマホから確認したところ問題はありませんでした。GoogleのAMPテストでも問題なし。スポンサーリンク後書きAMPは本当にややこしい。楽天もAmazonも、AMP対応のバナーやウィジェットを作ってほしい。他にも、リンクシェアやTGアフィリエイトを登録していますが、使い勝手がいまいちでしたので放置しています。アクセストレードは「通常画像バナーもAMP対応広告になりました!」と書かれてあるので貼りやすいのでしょうか?今度試してみます。※じゃらんはこの方法では無理なようです。サイト運営スポンサーリンクTwitterFacebookはてブPocketLINEPinterestzわたしらしくAmazonプライム&Driveの更新を解除しました。Posts」【CSS】人気記事に番号を付ける。旅行540北海道64青森県26岩手県5宮城県10福島県8茨城県4群馬県3埼玉県25千葉県3東京都20神奈川県7福井県1山梨県3長野県7岐阜県5静岡県5愛知県5三重県17滋賀県16京都府28大阪府90兵庫県24奈良県41和歌山県29鳥取県6島根県4岡山県2広島県6徳島県5愛媛県15高知県12沖縄県44宿112高級ホテル・宿30車中泊25道の駅・サービスエリア45飛行機6温泉101食べ歩き126花火大会26ライブ/コンサート/舞台53美容27ダイエット15パソコン31家計・節約148AmazonDriveプライムフォト7スマホ/格安SIM/プラン24イオン7株88購入/レビュー/クチコミ107サイト運営81AMP13常時SSL6DIY19インテリア・雑貨6猫5料理13生活57タイトルとURLをコピーしました。