楽天市場の縦バナーが商品ページに被さってくるのなんとかしたい。

こないだふと、タブレットで楽天の自社サイトを見ると、縦バナーが商品ページに干渉して邪魔なことに気づいてしまったんですよね。

個人的にはPCで見ててもサイドに貼ってあるバナーって邪魔だなぁ～と思うことが多いため、設置したくはないんですけど、会社的にやっといた方がいいよねって空気が流れているので、一応設置してるといった感じです。そんな人多いですよね。きっと！

それで話は戻り、表示画面が小さくなると、バナーが商品ページに干渉してくるのはよろしくない。せっかく頑張って作った商品ページ、ちゃんとお客様に見てほしいものですよね。

というわけでネットにいらっしゃる偉大な先輩方に教えていただこうとグーグル先生に尋ねると一発でした。（残念ながらこの記述を真似させてもらったHPを見失ってしまいました…）

これです！

これをヘッダー・フッター・レフトナビの中の縦バナーを記述しているCSSの後ろにぶち込めば完成です。

この記述により、幅が1220px以下の画面になるとバナーが表示されなくなります！やったー！ちなみにサイズは好みによって変更してもオッケー。「@media」は色んなパターンがあって、機種によっての表示がバリエーション豊かになるので好きです。