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

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

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


上記を記述したhtmlコード

[html autolinks=”true”]


[/html]

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

ソースコードはこちら

[html autolinks=”true”]

[/html]

コードを見てもらえば分かると思いますが、<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



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

Nico Nico Community

Calendar

2020年9月
« 6月    
 12345
6789101112
13141516171819
20212223242526
27282930  

Archive

↓↓Please support me!↓↓

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