【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

    • ヤン提督がフレデリカにしたみたいにさ、なけなしの勇気を振り絞ってDMを送ってみたわけですよ。 でももうすぐ2ヶ月経つけど、フレデリカからは返事もらえませんでした。
      about 7時間 ago
    • いよいよ来週から大学後期の講義スタートかぁ~。
      about 8時間 ago
    • よし! 設立した法人としての請求書第1号発射した! ボールは私の手から離れたからあとは先方サイドで処理してもらえればOK!
      about 8時間 ago

    BGM

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

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

    Nico Nico Community

    Calendar

    2021年9月
     1234
    567891011
    12131415161718
    19202122232425
    2627282930 

    Archive

    My WIsh List

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

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

    https://amzn.to/3oof0rZ