真面目に効率的に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のテキスト編集画面で、楽天アフィリエイトのコピペを

<div class=”rakuten”></div>の間に入れましょう。

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

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

 

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

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

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

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

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

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

執筆者:たぬ

              

comment

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

関連記事

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

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

電球

アフィリエイトブログを始めると決めたらするべき事、始め方

今回は副業として、アフィリエイトブログの話をさせていただきます。今、ご覧になっているこのサイトもアフィリエイトを目的の1つとして作成しています。 「WordPressで新しくアフィリエイトブログを始め …

googleadsenseの審査に受かった

Google Ad sense の審査を通過した時の記事数

今回は、WordPressでアフィリエイトを開始して、2.5カ月後の状況を報告していきたいと思います。訪問者数はほぼゼロのままですねw Google Ad senseの審査に合格しましたので、主にその …

WordPressでアフィリエイト

WordPress開始直後にやること3点

今回は、WordPressでアフィリエイトブログを開始してすぐにやるべき事を3つ書きたいと思います。 現在のことろ、絶賛訪問者数が0継続中ですが、果たして訪問者が増える日はやってくるのでしょうか・・? …

プロフィールを作成

STINGER8のサイドバーをカスタマイズ、プロフィールを追加

今回はSTINGER8のサイドバーをカスタマイズして、プロフィール画像と紹介文を追加する方法を書いていきます。 今やテンプレ化しつつあるブログのトップページですが、多くの方はプロフィール写真と簡単な紹 …