Amazonアソシエイト│商品リンクを簡単に横並びにする方法CSS不要！

Amazonアソシエイトのアフィリエイト商品リンクを簡単に横に並べる横並びにする方法を教えます！CSSでのカスタマイズ不要でショートコードなども一切不要！ほんとこんな事で簡単に横に並びます！ご存じの方は「そんな事ドヤ顔で言う事かよ(笑)」とは言わないで(笑)

Amazonアソシエイト│商品リンクを横並びに

Amazonアソシエイトのアフィリエイト商品リンクを通常連続で表示させようとするとこんな感じに縦並びになってしまいます。

記事のレイアウト上、連続で表示させたいとき無駄な空白を作らないために横に並べたいと思う方も多いと思います。 

その横並びの方法とっても簡単ですよ！CSSでカスタイズしたりHTMLのショートコードなども一切不要です。

<iframe style=”width: 240px; height: 480px;” marginwidth=”0″ marginheight=”0″ scrolling=”no” frameborder=”0″ （略）</iframe>
<iframe style=”width: 240px; height: 480px;” marginwidth=”0″ marginheight=”0″ scrolling=”no” frameborder=”0″ （略）</iframe>

上記の縦並びはテキストエディタに切り替えるとコードはこういうレイアウトになっています。それを…

<iframe style=”width: 240px; height: 480px;” marginwidth=”0″ marginheight=”0″ scrolling=”no” frameborder=”0″ （略）</iframe><iframe style=”width: 240px; height: 480px;” marginwidth=”0″ marginheight=”0″ scrolling=”no” frameborder=”0″ （略）</iframe>

とするだけです！一つ目の商品リンクのコードの終わり</iframe>から改行したり空白を入れずにそのまま続けてコードをペーストして下さい。

ほんとたったそれだけです(∵・ω・）ｻｰｾﾝ｡

するとこのように横並びになります。いかでですか？

ちなみに当サイトは記事のプラウザ表示を横幅1230pxへカスタマイズしているので。

横に6つ並びます！

モバイルページでは横に2つづつまで並べられます。

しかしモバイルAMPページでは、このように横に並べられないだけでなく商品リンク同士がかなり空白を開けて改行されてしまいます。

AMPページでAmazonの商品リンクを貼る場合は1つづつ張るか、もしくはAmazon商品リンクを貼りたい記事は非AMPページ Hideにしておいたほうが見栄えが良くなると思います。

豆知識、お役立ちましたか？

以上！

Amazonアソシエイト│商品リンクを簡単に横並びにする方法CSS不要！

でした。