楽天アフェリエイト広告をサイトに貼った時に、スマホだと横幅が小さいため枠からはみ出てしまいサイトデザインが崩れてしまったので対処法を記載します。

画像とテキストにすると横幅が長くはみ出してしまう

楽天アフェリエイトで下図のように画像とテキストにすると、横に並び横幅が大きくなります。

楽天アフェリエイトはレスポンシブ対応していないようで、横幅が固定となりスマホなどの横幅が小さい画面だとはみ出てしまいました。

対処法：画像とテキストを縦に並べる

CSSをカスタマイズしてレスポンシブ対応する方法もあるようですが、サイトによっては難しいかもしれませんので、簡単で一番無難な方法を紹介します。

楽天アフェリエイトの広告を作る際に「カスタマイズする」メニューがあるため、ここで「商品名を移動」を”下”にすると、画像とテキストが縦に並び横幅をとらなくなります。

これなら横幅が短くなりスマホでもはみ出さずに掲載することができます。