ぎたろーの邦ロックブログ

バンドを見るとニヤけてしまうくらい音楽、バンドが好き。邦ロックに関する記事がメイン。他、ジャンルレスでオピニオン記事など(雑記)も書いています!

amazonアソシエイトの商品リンクの横並び表示時、改行されないときの対処法

ちょっとした備忘録。
amazonアソシエイトに受かって商品リンクを貼る際、横並びにすればたくさん貼れますよね?



そんなときこんなことになったことはありませんか?
f:id:hr-tk:20190412131520p:plain:w400


こう書けば
f:id:hr-tk:20190412132233p:plain:w400


書いた位置に文言等が出ると思いますよね?



しかし実際は
f:id:hr-tk:20190412132029p:plain:w400



横並びされてしまう。



初めてアフィリンクを横並びしたときに困ったんです。
ちゃんと書いたとおりの位置に、つまり改行されるようにする方法を紹介します。
f:id:hr-tk:20190412170204p:plain:w400


対処法は2つ

<div style="clear:both;"></div>

商品リンクを貼った下にこのHTMLタグを入れてみてください。
こんな具合
f:id:hr-tk:20190412135233p:plain:w400


こうすれば
f:id:hr-tk:20190412132233p:plain:w400

ちゃんと改行されます。

商品リンクを貼った位置から大きく間隔(行)を空ける

さっきのタグを使わないやり方としてはこの方法があります。
f:id:hr-tk:20190412164928p:plain:w400


この場合6行分改行して間隔を空けました。
そうすると表示させたい位置に「てすと」がきました。
f:id:hr-tk:20190412165804p:plain:w400



どうでしょうか?参考になれば幸いです。


よかったらフォローもよろしくね~!