Thought Buzz通信

は必須項目です。

メールアドレス
(例)nihon@example.co.jp
メールアドレス(確認)
(例)nihon@example.co.jp

楽天アフィリエイトのモーションウィジェットをレスポンシブ対応させる最も簡単な方法

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

こんにちは。いたるです。

楽天アフィリエイトで商品を掲載するとき、直接商品を張る方法だけでなく、モーションウィジェットを設置する方法があります。

モーションウィジェットは、サイトを訪れた人が楽天で検索したことのある商品を自動で表示してくれるので、成約率の高い設置方法として有名です。

ただ、こちらのモーションウィジェットは、サイズが決まっていてレスポンシブ対応されていないので、
画面サイズによっては表示がおかしくないってしまうことがあります。

一般的な方法としては、画面サイズごとに別々のウィジェットを設置する方法がありますが、SEO的にあまりよくないような気がしたので、もっと簡単な方法として、ちょっと荒々しいですが僕が実際にやっている設置方法をご紹介します。

楽天モーションウィジェットをお手軽にレスポンシブ対応させる方法

その方法は、300×160のモーションウィジェットを2つ、このように設置します。

設置方法は、以下のようにしています。

これで、サイズによって横並びになり、スマホの場合は縦に並んで表示されます。

いちいちサイズごとにウィジェットを設定するのが面倒な方も、これなら簡単に設置することができますね。

この方法の難点としては、2つ同じウィジェットを並べると、所々表示される商品がかぶってしまうことがあるということですが、気にしない人ならこの方法を試してみてはいかがでしょう?

おすすめの画像素材サイト

今なら無料登録で……
100点以上のアイコン、パーツ素材がもらえる!
無料画像加工ツールGIMP完全マニュアルがもらえる!
ヘッダー、バナーのひな型各10点がもらえる!
⇒アフィピクの公式サイトはこちら