【HTML】Amazonのアフィリエイトリンクを横に並べる


ネット調べてるとiframe等を使ったアフィリエイトのリンクがあるかと思います。
一般に、HTMLで<br>等がなければそのライン上を続けて表示と思いますが、
Amazonのアフィリエイトのリンクは以下のように縦で表示されてしまいます。

ネット上で結構調べている方がいるみたいなので、当サイトでの方法を展開したいと思います。


上記を記述したhtmlコード

<iframe style="width: 120px; height: 240px;" src="http://rcm-jp.amazon.co.jp/e/cm?t=jforf-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=B009LGO26W&amp;ref=qf_sp_asin_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr" height="240" width="320" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
<iframe style="width: 120px; height: 240px;" src="http://rcm-jp.amazon.co.jp/e/cm?t=jforf-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=B008DRIR20&amp;ref=qf_sp_asin_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr" height="240" width="320" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

で、これを横並びにするには、

ソースコードはこちら

<div style="display: inline-block; _display: inline;"><iframe style="width: 120px; height: 240px;" src="http://rcm-jp.amazon.co.jp/e/cm?t=jforf-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=B009LGO26W&amp;ref=qf_sp_asin_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr" height="240" width="320" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></div>
<div style="display: inline-block; _display: inline;"><iframe style="width: 120px; height: 240px;" src="http://rcm-jp.amazon.co.jp/e/cm?t=jforf-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=B008DRIR20&amp;ref=qf_sp_asin_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr" height="240" width="320" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></div>

コードを見てもらえば分かると思いますが、<div></div>で<iframe>部分を囲ってやるだけ。

ポイントとなっているのが、styleとして設定している、display: inline-block; と _display: inline; が今回のミソになります。

<iframe>部分を<div>でボックス化、あとは並び方をボックスが隣り合うようにdisplay: inline-block;(IE6も考えてやるなら_display: inline;も記載)することで完成~♪となります。

これ使ったWebページがこちらにありますので、参考にしてみてください。


Mask_Siva

北の試される大地に生息しているSEです。
楽しみながらプログラムを作ったり、ゲームで遊んだりしています。

  1. Gatos Apt 2013.01.20 12:22pm

    こんにちは、検索で発見して拝見しました。できました!ありがとうございます。困ってたんです。

    • MaskSiva 2013.01.28 2:02am

      Gatos Aptさん はじめまして。本投稿が役に立って良かったです。

HTMLタグは利用できません

Advertising



新品/中古ゲーム販売 通販ショップの駿河屋

Twitter

仮面被り過ぎ@コンプレックス大佐
@Mask_Siva

  • まるでドラクエのモンスターだな。 #ポケモンGO https://t.co/To718xBwTD
    about 10時間 ago
  • これ本当だとしたらアパマンの危機管理を疑う。 というのも、つい数か月前にうちの近くのアパマンの店舗で火事があったばかりなんですよ。 普通は事後処理として予防策とか社員への啓もうとかやりますよね? https://t.co/DsduYRltPr
    about 11時間 ago
  • 札幌は平岸の爆発事故、現場隣のロイホにはちょくちょく行ってたから、巻き込まれた可能性ゼロじゃない。 さらなる爆発の可能性もあるらしいから、原因究明をしっかりやってほしいね。
    about 11時間 ago

BGM

「蒼穹のファフナー」コンプリートベストアルバム
1 FORTUNES -angela

↓の再生ボタンで再生できます
色々な楽曲を試聴したいなら
>>>こちら<<<

Nico Nico Community

Calendar

2018年12月
« 11月  
 1
2345678
9101112131415
16171819202122
23242526272829
3031 

Archive

↓↓Please support me!↓↓

ブログランキング・にほんブログ村へ


テストウィジェット