Simplicityでamazonアフィリエイトのリンクカードを横並びに表示する方法

こんにちは!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>

これでサイトを再び見てみると…

きちんと横並びになりました!

スポンサードサーチ

注意点

1)うっかり最後の<div style=”clear: both;”></div>を入れ忘れると、下の段落がフロートしてきておかしくなるのでご注意を!

こんな感じに、上にせり上がって来てしまいますので、注意。

2)表示画面に横幅さえあれば、3つでも4つでも並べることは可能ですが、スマホ等の幅の狭い画面る場合は当然改行されていくので、デザインは崩れます。

スポンサーリンク



シェアする

  • このエントリーをはてなブックマークに追加

フォローする