楽天
【コピペで簡単！】楽天の店舗ページに縦バナーを設置する方法
2018年09月01日 18:00 2018年09月16日
こんばんは！社員Aです。
みなさん、もう今日から9月ですね🍇🍁
といってもこの暑さはいつまで続くんでしょうか…? 体力レベルが☆1（もはやマイナス）の私にとっては地獄です。日傘を指してみたり、化粧水を夏用のものに変えてみたり細々と工夫してみたのですが、日本が暑すぎるので解決に至りません！（笑）
切実に、はやく涼しくなって欲しいです。
みなさんも引き続きからだにはご自愛くださいませ…！
さて本日は、楽天でよく見かける店舗ページに縦バナーを設置する方法を紹介していきます。
これを設置するだけで一気に賑わい感を演出することができます。
コピペだけで簡単に実装できるのでぜひお試しください！
縦バナーを作成し、R-Cabinetにアップ
まずは予め縦バナーを作成し、R-cabinetにアップしておきます。
私のおすすめのサイズは（縦）100px （横）1000px です！
そして、R-cabinetにアップできる縦幅の最大値は1200pxになりますので、なるべくそれ以内に収まるように作成しましょう！
もし縦幅が1200px以上の縦バナーを反映させたいときは、楽天goldにアップロードすることで対応できます！
ヘッダー・サイド・レフトナビにアクセスしてコードを追加
店舗設定＞デザイン設定＞ヘッダー・フッター・レフトナビ へと進みます。
ヘッダー・フッター・レフトナビの編集画面が表示されましたら、どこでも良いですが、一番上に下記コードをコピペしてください。
<style>
.body{
background-image: url(左側縦バナーの画像URL),url(右側縦バナーの画像URL);
background-repeat: repeat-y;
background-position: left, right;
}
</style>
そして、先程R-cabinetもしくはgoldにアップした画像URLをそれぞれ上記コードの「左側縦バナーの画像URL」「右側縦バナーの画像URL」の部分に入力します。
そうすることで、店舗の左右に縦バナーが反映されます！とっても簡単に賑わい感が出せます。
縦バナーを非表示にしたいときは？
イベントやポイント○倍などの独自ポイント企画が終わり、縦バナーを非表示にしたいときがあるかと思います。
その場合は先程のコードはそのまま残したままで、下記部分をカッコだけにしておくことで、表示されません。
background-image: url(),url();
また縦バナーを反映したいときに、カッコ内に画像URLを入力することで反映できます！
【関連記事】
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
