【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

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

    BGM

    機動戦士ガンダムUC オリジナルサウンドトラック
    iTunes Music

    10 RX-0 -澤野弘之

    ↓の再生ボタンで再生できます

    色々な楽曲を試聴したいなら
    >>>こちら<<<

    Calendar

    2024年10月
     12345
    6789101112
    13141516171819
    20212223242526
    2728293031 

    Archive

    My WIsh List

    Amazonで気になっている物をまとめています。

    「これは良かった!」「こっちの方がいいよ!」というものがあれば、教えてください<(_ _)>

    https://amzn.to/3oof0rZ