最新のEC運営ノウハウ、各モールの市場動向、秀逸なECサイト紹介等、をまとめております。記事一覧はこちら >

coding code program programming developer compute web development coder work design software closeup desk write workstation key password theft hacking firewall concept - stock image

2018.4.5 htmlRMSコーディング楽天楽天市場

今さら聞けない!楽天市場店のバナー設置箇所と設置方法

楽天市場店や、Yahoo!ショッピングなど、モールはセールが多いことで有名です。

ワンプルーフのクライアント様からも、急遽開催されるセールに対して、バナーの設置と撤去を対応してほしい。
とったご依頼を頂く機会も多くございます。

その理由としては、実は、楽天市場の店舗構造自体をあまり理解してない、バナーの設置方法がよくわからない…
といったお悩みを、皆様が密かに抱えていらっしゃるのをよくお聞きします。

そこで、今日は、そんな楽天市場店運営者様におすすめ!

楽天市場店内のバナーの設置場所と、その設置箇所と設置方法をご説明させて頂きます。

バナー貼り付け方法
横バナー ▼横バナー貼り付け方法▼

RMS > デザイン設定 > ヘッダー

に下記のタグを入れてください。

—————————————-

<a href=”リンク先のページURLを入力” target=”_blank”>
<img src=”画像URLを入力” border=”0″></a><br>

—————————————-

縦バナー(右) ▼縦バナー(右)貼り付け方法▼RMS > デザイン設定 > 共通説明文(大)

に下記のタグを入れてください。

—————————————-

<style type=”text/css”>
<!–
body{

background-image: url(“画像URLを入力”);
background-repeat: repeat-y;
background-attachment: scroll;
background-position:right
}
–>
</style>

—————————————-

縦バナー(左) ▼縦バナー(左)貼り付け方法▼RMS > デザイン設定 > 共通説明文(大)

に下記のタグを入れてください。

—————————————-

<style type=”text/css”>
<!–
body{

background-image: url(“画像URLを入力”);
background-repeat: repeat-y;
background-attachment: scroll;
background-position:left
}
–>
</style>

—————————————-

縦バナー(両方) ▼ページ両端への縦バナー貼り付け方法▼RMS > デザイン設定 > レフトナビ もしくは 共通説明文(大)

に下記のタグを入れてください。

※両端にバナーを表示させたい場合はバナーの長さをそろえてください。

—————————————-

<div id=”obi-l”>
</div>
<style>
#obi-l{
background: url(“画像URLを入力”) left top repeat-y;
height:2200px;/*ページ全体の高さ(長さ)*/
width: 120px;/*帯の幅*/
left:0px;/*左バナー*/
position: absolute;
top:80px;
z-index:0;
}
</style>

<div id=”obi-r”>
</div>
<style>
#obi-r{
background: url(“画像URLを入力”) right top repeat-y;
height:2200px;/*ページ全体の高さ(長さ)*/
width: 120px;/*帯の幅*/
right:0px;/*右バナー*/
position: absolute;
top:80px;
z-index:0;
}
</style>

—————————————-

リンクつき縦バナー(右) ▼リンクつき縦バナー(右)貼り付け方法▼RMS > デザイン設定 > 共通説明文(大)

に下記のタグを入れてください。

—————————————-

<div id=”migi-obi”>
<a href=”リンク先のURLを入力” target=”_top”>
<style>
#migi-obi * {
margin: 0;
padding: 0;
outline: 0;
background: url(“画像URLを入力”) repeat-y right top ;
}
#migi-obi a {
position: absolute;
top:80px;
right:0px;
height:2200px;/*ページ全体の高さ*/
width: 120px;/*帯の幅*/
}
</style>
</a>
</div>

—————————————-

リンクつき縦バナー(左) ▼リンクつき縦バナー(左)貼り付け方法▼RMS > デザイン設定 > 共通説明文(大)

に下記のタグを入れてください。

—————————————-

<div id=”hidari-obi”>
<a href=”リンク先のURLを入力” target=”_top”>
<style>
#hidari-obi {
position: absolute;
top:80px;
left:0px;
background: url(“画像URLを入力”) repeat-y left top ;
}
#hidari-obi a {
display: block;
height:2200px;/*ページ全体の高さ*/
width: 120px;/*帯の幅*/
}
</style>
</a>
</div>

—————————————-

※撤去は、上記のソースをコメントアウトするだけ!

これで、緊急時の対応もバッチリです。

なお、ワンプルーフでは、セール時の施策ご提案、メルマガの配信などを含め、楽天・Yahoo!ショッピングを中心に、EC運営代行支援、コンサルティングを手掛けております。

運営代行サービスについて、詳しく話を聞いてみたい!

というお客様がいらっしゃいましたら、お気軽に、下記問い合わせフォームよりお問合せくださいませ。

※本記事の設定方法、作業サポートはお受けしておりませんので、予めご了承くださいませ。

記事一覧へ戻る