【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

    • ちょっと頭痛がひどいので休憩。 大小合わせて寝るまでのタスクは2つ。
      about 1時間 ago
    • 2つ目のバグ取りと今日の分の指示出し、それから顧客への連絡など終えました。 燃え尽きたぜ、、、 10分ほど休憩したら、今度は大学の作業だ。。。orz
      about 2時間 ago
    • 重いバグ1つ片付けた。 もう1つ重いのがあるから、それ直したら大学の方やろう。 さすがにここまで稼働するのはしんどいっす、、、
      about 4時間 ago

    BGM

    DEAD OR ALIVE (アニメ盤) - EP
    1 DEAD OR ALIVE -angela

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

    Nico Nico Community

    Calendar

    2021年10月
     12
    3456789
    10111213141516
    17181920212223
    24252627282930
    31 

    Archive

    My WIsh List

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

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

    https://amzn.to/3oof0rZ