真面目に効率的に0から資産を増やす方法

安全安心確実に資産を増やす方法をお伝えします

アフィリエイトはじめました

楽天のモーションウィジェットをスマホとパソコンで上手く表示する方法

投稿日:2018年8月30日 更新日:

楽天のモーションウィジェット

楽天のモーションウィジェットを、パソコンとスマホで上手く表示できる方法記事にしました。

アフィリエイトをしていると、パソコンとスマホでそれぞれアフィリエイト画像の大きさを使い分けないといけないので面倒ですね。

この方法を使用すれば、楽天のモーションウィジェットを自然に並べて表示させることができます。

楽天のモーションウィジェットをパソコンとスマホで上手く表示させるには

パソコンとスマホそれぞれに違う大きさのウィジェットを表示させる方法を模索していましたが、何度やっても上手くいきませんでした。

明らかに私の知識不足なんですけどね。

ですので代替方法として、スマホには小さなウィジェットを2個上下に表示させ、パソコンには同じ大きさのウィジェットを2個並べて表示させる方法に変更しました。

違和感なく並べるために、サイズは300×160がちょうど良いです

モーションウィジェットがパソコンも上下に2個並んでしまう

しかしながら、2個並べてアフィリエイトを掲載すると、本来パソコンでは横並びで2つならべたいと考えているのに、縦に二つ表示されていまいます。

パソコンで見られている方はこんな風に↓

これを回避するにはどうすればよいのでしょうか?

モーションウィジェットを横並びにさせるにはfloatを使う

これを解決させるために、CSSで楽天の広告を左に寄せてあげないといけません。

CSSとは何ぞや?となりますが、CSSはHPのデザインを規定するための記述になります。

具体的には、Word Pressの外観⇒テーマの編集で<body></body>部分に

/*楽天の広告を左寄せ始まり*/
.rakuten{
float:left
}
/*楽天の広告を左寄せ終わり*/

と入力しましょう。

そしてWord Pressのテキスト編集画面で、1つめの楽天アフィリエイトのコピペを

<div class=”rakuten”></div>の間に入れましょう。(2つ目のアフィリエイトは間に入れてはいけません)

具体的には<div class=”rakuten”><楽天アフィリエイトのコピペ></div>てな感じになるはずです。

すると、下のような表示になります。

 

floatには浮かせるという意味があり、最初のアフィリエイトリンクを浮かせて左に寄せているわけです。

すると後に続くアフィリエイトはその右側に滑り込んでくれるんですね。

【まとめ】楽天のモーションウィジェットをスマホとパソコンで上手く表示するには

楽天のモーションウィジェットをパソコンとスマホで使い分けるには、300×160サイズを使おう。

パソコンは横並びに、スマホは縦並びにすると上手く表示できる。

-アフィリエイトはじめました
-,

執筆者:たぬ

              

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

STINGER8のサイドバーをカスタマイズ、新着記事を削除しタイトルを見やすくする

今回は、STINGER8でサイドバーを見栄え良くする方法をお伝えいたします。 デフォルトの状態ですと、サイドバーは見栄えがあまりよくありません。 少し装飾を加えて、見た目がお洒落なサイドバーを作成して …

ノートパソコンと手

パンくずリストを作成するには?そのSEO効果と共に解説

「パンくずリスト」という言葉を聞いたことがあるでしょうか?無いかたも多いのでは?この「パンくずリスト」アフィリエイトブログを行うにあたり、割と重要な機能なのです。 「パンくずリスト」が何なのか、またど …

パソコンとタブレット

wordpressに内部リンクを貼るとコメントが投稿される(セルフピンバック)時の対処方法

今回はwordpressの機能のうち、セルフピンバックの解説とその対応方法について解説をしていきます。 自分のブログに内部リンクを貼ると、何故かコメントが投稿されている。 そんな経験ありませんか?それ …

表

WordPressで表が画面からはみ出た時の対処法

ワードプレスの表は、列が増えると(横にのびると)画面に表示されず途中で切れてしまいます。 その改善方法を記事にしました。 WordPressで表を作成すると、機種によっては画面からはみ出ることがある …

悩む女性

STINGER8でauthorがありませんが頻発した時の対応

この記事はいたってシンプルです。Google Search Consoleの「検索の見え方」⇒構造化データで「authorがありません」というエラーが出た場合の対応方法を記事にしています。 細かい理論 …


管理人の「たぬ」です。
株式投資・不動産投資・オプション取引をメインに日々最も安全かつ効率的な投資方法を模索しています。

どのように資産を増やしていくのか、具体的手法をお話していきたいと思います。