ぷよぱんブログ

牛飼いと投資と日常ときどきサッカー

はてなブログ 楽天モーションウィジェット スマホ用にカスタマイズ

皆さんごきげんいかがでしょうか?

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

レスポンシブ対応について書いていこうと思います‼️

当ブログのフッターに楽天モーションウェジェットを

使用していたのですが

スマホ画面で見るとはみ出てまして・・・

サイズ調整すると小さくなるし

調べると楽天モーションウェジェットは

レスポンシブ対応してないみたい🌀

よし検索だ‼️あったあった✨

参考にしたのはアフィリエイターのいたるさんのブログ

www.thoughtbuzz.net

 
自分的にわかりやすかったのとコピペでオッケーなところ✨

軽く内容を説明すると

PC画面だと1列ですがスマホだと2列になります 

PC画面

f:id:puyo_pan:20201126221105p:plain

スマホ画面

f:id:puyo_pan:20201126221509j:plain

楽天モーションウィジェットのサイズは300×160がおすすめ‼️

フッターに貼りたい場合は

ダッシュボード→デザイン→カスタマイズ→フッタ

HTMLの記述にコピペ✨

設置方法のソースコードはこちら

<center>
<div style="float;left;">
<!--楽天モーションウィジェット-->
</div>
</center>

<!--楽天モーションウィジェット-->

楽天からコピーしてきたソースコードをコピペ‼️

左寄りに表示されるのが嫌だったので

上下に<center>を付け足して

真ん中での表記になってます

いや〜とっても簡単✨

しかし欠点が・・・

2つ同じウィジェットを並べると、

表示される商品がだぶる場合があるので

楽天モーションウィジェットのレスポンシブ対応に

悩んでいたら試してみたらいかがでしょうか

ではまたどー