ブレイントラスト EC LEARNING(ec・ラーニング)

ビギナーにも使えるヒントが満載。 ネットショップコンサルのプロがノウハウをお届け。

開店構築費5万円、最短5	営業日で完成! ECサイトの更新、コンサルティング ECサイトの更新、コンサルティング ECサイトの更新、コンサルティング
楽天スマホの大バナー、小バナーの縦幅を変更している店舗があったのですが、どのような方法で変更しているのでしょうか?

楽天スマホの大バナー、小バナーの縦幅を変更している店舗があったのですが、どのような方法で変更しているのでしょうか?

スマホページにCSSを読み込むことで、縦幅を任意のサイズに変更する事ができます。
下記ソースを各共通説明文(TOPページ、カテゴリー、商品ページ)に入力してください。

【トップページ・カテゴリーページ】
/* 大バナー */
.rstBigBnr li img {
width: 100%;
height: 000px; /* ←任意の高さを指定する */
max-width: none !important;
max-height: none !important;
}
/* 小バナー */
.rstSmallBnr .smtBannerItem03 img {
width: 100%;
height: 000px; /* ←任意の高さを指定する */
max-width: none !important;
max-height: none !important;
}

【商品ページ】
/* 大バナー */
#shopInfoSliderLarge .bannerImageFrame img {
max-height: none !important;
}
/* 小バナー */
#shopInfoSliderSmall img {
max-height: none !important;
}

この方法を使えば、PCとスマホのそれぞれにサイズの違うバナーを作らなくてもよくなる為、作業効率の向上に期待できます。
PCのバナーをスマホ用に作り替えている方は、是非この方法を試してみて下さい。