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

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

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

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

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

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

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

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

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

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

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

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