楽天のモーションウィジェットを、パソコンとスマホで上手く表示できる方法記事にしました。
アフィリエイトをしていると、パソコンとスマホでそれぞれアフィリエイト画像の大きさを使い分けないといけないので面倒ですね。
この方法を使用すれば、楽天のモーションウィジェットを自然に並べて表示させることができます。
楽天のモーションウィジェットをパソコンとスマホで上手く表示させるには
パソコンとスマホそれぞれに違う大きさのウィジェットを表示させる方法を模索していましたが、何度やっても上手くいきませんでした。
明らかに私の知識不足なんですけどね。
ですので代替方法として、スマホには小さなウィジェットを2個上下に表示させ、パソコンには同じ大きさのウィジェットを2個並べて表示させる方法に変更しました。
違和感なく並べるために、サイズは300×160がちょうど良いです。
モーションウィジェットがパソコンも上下に2個並んでしまう
しかしながら、2個並べてアフィリエイトを掲載すると、本来パソコンでは横並びで2つならべたいと考えているのに、縦に二つ表示されていまいます。
パソコンで見られている方はこんな風に↓
これを回避するにはどうすればよいのでしょうか？
モーションウィジェットを横並びにさせるにはfloatを使う
これを解決させるために、CSSで楽天の広告を左に寄せてあげないといけません。
ＣＳＳとは何ぞや？となりますが、ＣＳＳはＨＰのデザインを規定するための記述になります。
具体的には、Word Pressの外観⇒テーマの編集で<body></body>部分に
.rakuten{
float:left
}
/*楽天の広告を左寄せ終わり*/
と入力しましょう。
そしてWord Pressのテキスト編集画面で、１つめの楽天アフィリエイトのコピペを
<div class=”rakuten”></div>の間に入れましょう。（２つ目のアフィリエイトは間に入れてはいけません）
具体的には<div class=”rakuten”><楽天アフィリエイトのコピペ></div>てな感じになるはずです。
すると、下のような表示になります。
floatには浮かせるという意味があり、最初のアフィリエイトリンクを浮かせて左に寄せているわけです。
すると後に続くアフィリエイトはその右側に滑り込んでくれるんですね。
【まとめ】楽天のモーションウィジェットをスマホとパソコンで上手く表示するには
楽天のモーションウィジェットをパソコンとスマホで使い分けるには、300×160サイズを使おう。
パソコンは横並びに、スマホは縦並びにすると上手く表示できる。
