×
~ご契約初月無料キャンペーン~  2018年10月18日 ~ 10月26日9:59まで お申込はこちら >>> 1MF1008
  • 楽天
  • Yahoo!

楽天『shop of the year 2016』投票受付バナーの設置テンプレート

1111_main

楽天「ショップ・オブ・ザ・イヤー 2016」の投票受付が開始しました!(受付期間:2016年10月24日(月)10:00~2016年11月22日(火)9:59)

既に皆さんメルマガなどで告知を開始しているとは思いますが…。『やばい、出遅れてるいるぞ!今からなんとかせねば…』という店舗様のために、投票受付バナーの素材と設置テンプレートを用意しましたー!

リンク先URL

自店舗へ投票するためのリンクURLは各店舗様によって異なります。分からない方は、以下URLの末尾(shopナンバー)部分を、自店舗のショップナンバーに書き替えればOK。

https://award.rakuten.co.jp/?menu=top&s=(shopナンバー)

ショップナンバーは、自店舗の商品を買い物かごに入れた際の「買い物かごページ」URLで確認できます。『shop_bid=******』という記述が途中に入ってますので、『******』部分を抜きだします。当て込むとこんな感じ。

https://award.rakuten.co.jp/?menu=top&s=123456

ヘッダー用大バナー

%e5%90%8d%e7%a7%b0%e6%9c%aa%e8%a8%ad%e5%ae%9a-2

 

ショップページを訪れた際に、まず目に入る位置にバナー画像を設置しましょう。バナー画像と設置用のHTMLテンプレートは以下からお使いください。

▼バナー画像素材(右クリックして保存の上お使いください)

<a href="https://award.rakuten.co.jp/?menu=top&s=******"><img src="画像のURL"></a>

縦帯バナー

楽天ショップオブザイヤー投票受付バナー

 

右側へ縦長のバナー画像をリピート表示して、画面をスクロールしても常にバナー画像が目に入る状態にします。

▼バナー画像素材
2016_soy_banner2

 

▼バナー画像設置用HTMLテンプレート

<style type="text/css">
<!--
.tateobi-common{
	height:100%;position: fixed;top:0;z-index:9999;overflow:hidden;
}
.tateobi-common a{
	height:99999px;display:block;
}
#tateobi_right{
	right:0;
}
#tateobi_right a{
	width:80px;
}
body{
	background-repeat:repeat-y!important;
	background-image:url(画像URL)!important;
	background-position:right!important;
}
-->
</style>
<div id="tateobi_right" class="tateobi-common"><a href="https://award.rakuten.co.jp/?menu=top&s=******" target="_blank"></a></div>

※参考記事:スーパーSALEにも使える!繰り返し表示縦帯バナーにリンクを付ける方法

右側スクロール固定バナー

01924abb7b944a9a38e08e66f07852b6

 
右側にバナーが張り付き、スクロールしても固定位置に表示されます。マウスオーバーすると少し画像が伸びます。さりげなく且つ効果的に導線をおくのに効果的です!

▼バナー画像素材
%e5%8f%b3%e5%81%b4%e5%9b%ba%e5%ae%9a%e3%83%90%e3%83%8a%e3%83%bc

▼バナー画像設置用HTMLテンプレート

<style type="text/css">
<!--
a.Side_Banner {
 position: fixed;
 display: inline-block;
 transition: all .2s ease;
 z-index: 9999;
}

/* 右側 */
a.Side_Banner.right { right: -40px;} /*マウスを乗せた時に出てくる幅*/
a.Side_Banner.right:hover{ right: 0;}

/* 並び位置 */
a.Side_Banner.top1 { top: 200px; }
-->
</style>

<a class="Side_Banner right top1" href="https://award.rakuten.co.jp/?menu=top&s=******">
<img src="画像のURL" />
</a>

※参考記事:【最新版・超かんたん!】楽天/Yahoo!のページに「スクロール追従バナー」を左右複数並べる方法

 
 
お客様へ投票を呼びかけるために、バナー画像へ店長の顔写真やスタッフの集合写真を掲載したり、店長の人柄が出るようなメッセージを書くのも効果的です。

普段からショップを利用してくれているお客様に対して、更にショップへ愛着を持ってもらえる様に活用しましょう!

この記事を書いた人

中村 茉実

中村 茉実ディレクター

元楽天ショップ店長やってました。歩くときに他人との距離感が掴めないところがあり、よくオジサンのかかとを踏んでしまいます。

この記事のあとによく読まれています!

繁盛レシピの人気記事3選!

コメントはお気軽にどうぞ

セキュリティチェック *

内容をご確認の上、送信してください。