楽天のモーションウィジェットを、パソコンとスマホで上手く表示できる方法記事にしました。アフィリエイトをしていると、パソコンとスマホでそれぞれアフィリエイト画像の大きさを使い分けないといけないので面倒ですね。この方法を使用すれば、楽天のモーションウィジェットを自然に並べて表示させることができます。楽天のモーションウィジェットをパソコンとスマホで上手く表示させるにはパソコンとスマホそれぞれに違う大きさのウィジェットを表示させる方法を模索していましたが、何度やっても上手くいきませんでした。明らかに私の知識不足なんですけどね。代替方法として、スマホには小さなウィジェットを2個上下に表示させ、パソコンには同じ大きさのウィジェットを2個並べて表示させる方法に変更しました。違和感なく並べるために、サイズは300×160がちょうど良いです。モーションウィジェットがパソコンも上下に2個並んでしまうしかしながら、2個並べてアフィリエイトを掲載すると、本来パソコンでは横並びで2つならべたいと考えているのに、縦に二つ表示されていまいます。パソコンで見られている方はこんな風に↓これを回避するにはどうすればよいのでしょうか?モーションウィジェットを横並びにさせるにはfloatを使うこれを解決させるために、CSSで楽天の広告を左に寄せてあげないといけません。CSSとは何ぞや?となりますが、CSSはHPのデザインを規定するための記述になります。Pressの外観⇒テーマの編集で<body></body>部分に/*楽天の広告を左寄せ始まり*/.rakuten{float:left}/*楽天の広告を左寄せ終わり*/と入力しましょう。class=”rakuten”></div>の間に入れましょう。class=”rakuten”><楽天アフィリエイトのコピペ></div>てな感じになるはずです。すると、下のような表示になります。floatには浮かせるという意味があり、最初のアフィリエイトリンクを浮かせて左に寄せているわけです。すると後に続くアフィリエイトはその右側に滑り込んでくれるんですね。【まとめ】楽天のモーションウィジェットをスマホとパソコンで上手く表示するには楽天のモーションウィジェットをパソコンとスマホで使い分けるには、300×160サイズを使おう。パソコンは横並びに、スマホは縦並びにすると上手く表示できる。コメントをキャンセルメールアドレスが公開されることはありません。*サイト関連記事STINGER8でauthorがありませんが頻発した時の対応この記事はいたってシンプルです。Consoleの「検索の見え方」⇒構造化データで「authorがありません」というエラーが出た場合の対応方法を記事にしています。今回は、WordPressでアフィリエイトブログを開始してすぐにやるべき事を3つ書きたいと思います。ブロックされたリソースが出た時の原因と対応策を記事にしました。「パンくずリスト」という言葉を聞いたことがあるでしょうか?無いかたも多いのでは?この「パンくずリスト」アフィリエイトブログを行うにあたり、割と重要な機能なのです。...WordPressで表が画面からはみ出た時の対処法ワードプレスの表は、列が増えると(横にのびると)画面に表示されず途中で切れてしまいます。その改善方法を記事にしました。オプション取引をメインに日々最も安全かつ効率的な投資方法を模索しています。どのように資産を増やしていくのか、具体的手法をお話していきたいと思います。