WordPressに複数のAmazon広告を横並びに貼り付ける方法

  • ブックマーク
  • Feedly

Amazon広告を複数コピペしたら、縦並びになってしまった。どうやったら横並びになるか調べたらdivタグを追加すればいいだけだった。その方法をたまに忘れるので、メモります。

縦並びになったAmazon広告

ifremeタグのHTMLをそのまま貼り付けたら、次のようになってしまった。
Amazon広告が縦並びになっちゃった
これは、いくら何でも酷すぎるぅwww

解決方法:divタグを追加

ifremeタグの外にdivタグを追加する。例えば次のような感じで。

修正前

<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=zawawa-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B016ZF8RDA&linkId=778f6eff274dc58da2a960ea38033bf0"></iframe>
<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=zawawa-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B071JTHLBR&linkId=035b0b007365e95ac5613f2fcbabe3f3"></iframe>
<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=hazawswebsite-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B016ZE7K8O&linkId=9dde725c916b6ffedf68d6edc4adba3f"></iframe>

view raw
AmazonIframe.html
hosted with ❤ by GitHub

修正後

<div style="display: inline-block; _display: inline;">
<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=zawawa-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B016ZF8RDA&linkId=778f6eff274dc58da2a960ea38033bf0"></iframe>
</div>
<div style="display: inline-block; _display: inline;">
<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=zawawa-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B071JTHLBR&linkId=035b0b007365e95ac5613f2fcbabe3f3"></iframe>
</div>
<div style="display: inline-block; _display: inline;">
<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=hazawswebsite-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B016ZE7K8O&linkId=9dde725c916b6ffedf68d6edc4adba3f"></iframe>
</div>

できあがり

解決方法を適用すると下記のような仕上がりになります。
Wordpressに複数のAmazon広告を横並びに貼り付ける

Blog/WordPress関連記事

他のBlog/WordPress関連の記事はこちらのページに一覧があります。宜しければどうぞ。

この記事を書いた人

羽沢 仁

業務系システムのエンジニアとして、コンサルティング会社で5年、事業会社の社内SEとして5年、フリーランスとして6年、要求定義、設計、開発、テスト、リリース対応の業務に携わってきました。来年からは、街の○○屋さんと直接つながって、ITツールを提供するサービスを開始します。詳しいプロフィールはこちらをご参照ください。