Amazon広告を複数コピペしたら、縦並びになってしまった。どうやったら横並びになるか調べたらdivタグを追加すればいいだけだった。その方法をたまに忘れるので、メモります。
縦並びになったAmazon広告
ifremeタグのHTMLをそのまま貼り付けたら、次のようになってしまった。
これは、いくら何でも酷すぎるぅwww
解決方法:divタグを追加
ifremeタグの外にdivタグを追加する。例えば次のような感じで。
修正前
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
修正後
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
できあがり
解決方法を適用すると下記のような仕上がりになります。
Blog/WordPress関連記事
他のBlog/WordPress関連の記事はこちらのページに一覧があります。宜しければどうぞ。