このようにアフィリエイトで商品リンク画像を横に並べることができます。

Anker PowerCore 10000 (10000mAh 最小最軽量 大容量 モバイルバッテリー) 【PSE認証済/PowerIQ搭載】iPhone&Android対応 *2019年2月時点(ブラック)
Anker PowerCore 10000 (10000mAh 最小最軽量 大容量 モバイルバッテリー) 【PSE認証済/PowerIQ搭載】iPhone&Android対応 *2019年1月時点 (ブルー)
Anker PowerCore 10000 (10000mAh 最小最軽量 大容量 モバイルバッテリー) 【PSE認証済】iPhone&Android対応 *2019年2月時点 (ホワイト)
Anker PowerCore 10000 (10000mAh 最小最軽量 大容量 モバイルバッテリー) 【PSE認証済/Power IQ搭載】iPhone&Android対応 *2019年2月時点 (レッド)

 

 

 

 

それでは、商品リンクを横に並べる方法をご紹介します。

商品リンク画像を横に並べる方法



2つの画像を並べる場合

<div style="float:left;padding-right:10px;">
商品リンク情報
</div>
<div style="float:left;padding-right:10px;">
商品リンク情報
</div>
<div style="clear:both;"></div>

 

3つの画像を並べる場合

<div style="float:left;padding-right:10px;">
商品リンク情報
</div>
<div style="float:left;padding-right:10px;">
商品リンク情報
</div>
<div style="float:left;padding-right:10px;">
商品リンク情報
</div>
<div style="clear:both;"></div>

 

4つの画像を並べる場合

<div style="float:left;padding-right:10px;">
商品リンク情報
</div>
<div style="float:left;padding-right:10px;">
商品リンク情報
</div>
<div style="float:left;padding-right:10px;">
商品リンク情報
</div>
<div style="float:left;padding-right:10px;">
商品リンク情報
</div>
<div style="clear:both;"></div>
横幅が狭い時は、自動的に画像が折り返されます。