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

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

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

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

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

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

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

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

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

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

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

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