【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

    • 追加で購入していた防犯カメラの設定完了。 と言っても安いやつなんでできることは限られてますがね。
      about 5時間 ago
    • これいいなぁ。 https://t.co/ENp0eIGwVK
      about 6時間 ago
    • Mask_Sivaが闇堕ちすると… 主に『腹黒さ』がヤバくなります! https://t.co/0vJFPcYrJQ #闇堕ちしたときのステータス #shindanmaker https://t.co/sQpGvGeK0T 既に一度闇落ちしてますから、腹黒さには定評があります(笑
      about 7時間 ago

    BGM

    「蒼穹のファフナー」コンプリートベストアルバム
    1 fly me to the sky -angela

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

    Nico Nico Community

    Calendar

    2020年10月
     123
    45678910
    11121314151617
    18192021222324
    25262728293031

    Archive

    My WIsh List

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

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

    https://amzn.to/3oof0rZ