楽天アフィリエイトの商品やバナーを横に並べたい

楽天アフィリエイトの商品やバナーなどを横に並べる方法をご紹介します。Amazon、Yahooショッピングなど、他社ASPのアフィリエイトでも同様に使えると思いますので参考にしてみてください。

楽天アフィリエイトの商品を横に並べる方法

その１．
tableタグに入れて横に並べる方法

最初はtableに入れて横に並べる方法です。楽天アフィリエイトの商品リンクを下記のアフィリエイトコード部分に差し替えます。

※tableを利用した場合の注意点：モバイルなど横幅が狭い端末で表示した際には、商品画像が切れてしまう可能性があります。自動的に縦表示に切り替わるわけではありません。

---

その２．
DIV要素に入れてcssで横に並べる方法

次はDIV要素に入れて、floatプロパティを指定するオーソドックスな方法をご紹介します。※paddingの数字で余白を設定できます。上、右、下、左の順番です。

※モバイル表示などで横幅が狭い場合には、自動的に縦並びになります。

さいごに

おすすめは”css”を利用した方法

上記で二つの方法をご紹介しましたが、おすすめはモバイル表示にも対応できる「その２」のcssを利用した方法です。実際の表示を確認しながら、参考にしてみてください。