こんにちは！Minaです。
今、Wordpressでせっせと自分のブログを作り、アフェリエイトリンクを貼り付けているのですが、複数の商品のタグを貼り付けていくと、リンクカードが縦に並んでしまうんですよね。
↑こんな感じ。余計な余白が嫌ですね。
カードを横並びにするには
2つのカードを横並びにするのは簡単。amazonアフィリエイトのタグをwordpressに貼り付ける時に、下記の赤字のタグで囲んじゃいましょう。（白地の部分がそれぞれamazonのアフィリエイトのタグです。実際には自分でamazonで生成したタグを入れてね）
<div style=”float: left; margin: 10px;”>
<iframe style=”width:120px;height:240px;” marginwidth=”0″ marginheight=”0″ scrolling=”no” frameborder=”0″ src=”●●●●●●●●●●”>
</iframe>
</div>
<div style=”float: left; margin: 10px;”>
<iframe style=”width:120px;height:240px;” marginwidth=”0″ marginheight=”0″ scrolling=”no” frameborder=”0″ src=”●●●●●●●●●●”></iframe>
</div>
<div style=”clear: both;”></div>
<iframe style=”width:120px;height:240px;” marginwidth=”0″ marginheight=”0″ scrolling=”no” frameborder=”0″ src=”●●●●●●●●●●”>
</iframe>
</div>
<div style=”float: left; margin: 10px;”>
<iframe style=”width:120px;height:240px;” marginwidth=”0″ marginheight=”0″ scrolling=”no” frameborder=”0″ src=”●●●●●●●●●●”></iframe>
</div>
<div style=”clear: both;”></div>
これでサイトを再び見てみると…
きちんと横並びになりました！
注意点
１）うっかり最後の<div style=”clear: both;”></div>を入れ忘れると、下の段落がフロートしてきておかしくなるのでご注意を！
2）表示画面に横幅さえあれば、3つでも4つでも並べることは可能ですが、スマホ等の幅の狭い画面る場合は当然改行されていくので、デザインは崩れます。