タグ: コーディング

＼超簡単！／上書きした楽天GOLDページ
画像をすぐに反映させる裏技

Posted on by ワンプルーフ

今回のテーマは、「楽天GOLDページの画像を更新後に、すぐ反映させる裏技」についてです。

楽天GOLDのページでは、ページを修正したり、画像を差し替えたりと、FTPにアップしたときに、キャッシュで変更した画像が反映されないケースがございます。

※楽天市場を運営されている店舗様なら、だれでも一度は感じたことがある、あのジレンマです…

忙しくない時期ならまだしも、お買い物マラソンや、楽天スーパーSALEなどの繁忙期かつ、短期決戦の際には、一刻も早く更新反映してほしい！価格を直さないとトラブルになってしまう！

というとき、本当に焦りますよね。

本日は、そんなトラブルを一発で解消出来てしまう、裏技をご紹介いたします。

————————————————–
これで即解決！
—————————————————

以下のように、重複していない文字列に対して、URLのクエリ文字列を付けたす。それだけです！

<img src="画像名.jpg">

がURLだとしたら、末尾に引数をつけて

?123456

を、下記のように記述します。

<img src="画像名.jpg?123456">

こちらは、楽天GOLDだけでなく、Javascriptや、CSSなどのファイルにも有効です。

<script type="text/javascript" src="テスト.js?123456">

—————————————————

この裏技、本当にCSVで作業を加えれば、さらに使い勝手が良いです。

同じGOLDのHTMLファイルを何度も更新したり、既に更新内容が決まっている時の事前対応など、様々な場面で有効活用できます。

特に、マラソンやスーパーSALE時の対応などに、ご活用頂けたらと思います。

ワンプルーフでは、こうした施策のご提案、実務を含め、楽天・Yahoo!ショッピングを中心に、EC運営代行支援、コンサルティングを手掛けております。

サービスについて、詳しく話を聞いてみたい！

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

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

＼ただでは離脱させません！／
楽天スマートフォン商品ページ別に設置出来る、
店舗オリジナル、追従お気に入りボタンの
設置方法を公開！

Posted on by ワンプルーフ

＼ただでは離脱させません！／楽天スマートフォン商品ページ別に設置出来る、
店舗オリジナル、追従お気に入りボタンの設置方法を公開！

今回、楽天市場店の運営に活かせるノウハウを一つ公開いたします。

楽天市場のスマートフォン版商品ページに、店舗様オリジナルのデザインで、さらに、スマホでスクロールしてもちゃんと追いかけてきてくれる、商品お気に入り登録ボタンの設置方法を公開いたします。

楽天市場は、ストアのお気に入りボタンというのは比較的楽に色々と設置できていました。

ただ、商品ごとのお気に入りボタンは、スマホページですとページの下段の方にしかなく、押しづらい、押されないという課題がございました。

今回は、弊社のクリエイティブチームメンバーにより、スマホ商品ページ別に、オリジナルのボタンを作成して、さらに、スクロールしても追いかけてくれる設置方法をご紹介いたします。

その前に、まずは手を加える前のページを見てみましょう

—————————————————

□対策前　「初期設定（デフォルト）時」

—————————————————

—————————————————

このような形でデザインされています。

※正直、分かりにくい、押しにくい、ですね。。

そこで、ワンプルーフが対策すると、以下のようなデザインになります。

—————————————————
■対策後
—————————————————

—————————————————

こうなります。

必ず商品横にお気に入りボタンがついてくるので、常に、お客様が気になっちゃ瞬間に、ボタンが押せるよう工夫しました。

—————————————————
コーディング方法
—————————————————
以下のソースを、


#shareButtons ul {
　　border-bottom: 1px solid #ccc;
}

#shareButtons li:first-child {
　　border-left: none;
　　position: fixed;
　　 right: 6px;
　　 z-index: 9999999;
　　 bottom: 290px;
　　 background: #f6f6f6;
　　width: 46px;
　　 border-radius: 3px;
　　 border: 1px solid #ccc;
　　 height: 67px;
}

#shareButtons a{
　　-webkit-box-orient: vertical;
　　 -webkit-flex-direction: column;
　　 flex-direction: column;
　　 position: relative;
　　 width: 100%;
　　 height: 100%;
　　 color: #333333;
}

#shareButtons .iconWrap {
　　 width: 100%;
　　 height: 50%;
}

#shareButtons .iconWrap.favoriteIcon > div {
　　 background: transparent url(お気に入りボタンの画像URL) 0px 0px no-repeat;
　　 background-position: -1px 0;
　　 width: 46px;
　　 height: 65px;
　　 background-size: contain;
}

#shareButtons li:first-child .text {
　　 font-size: 10px;
　　 display: none;
}


RMSの以下に記述▼

RMSトップ＞デザイン設定＞スマートフォンデザイン設定＞商品ページ設定＞説明文

に入れて頂ければ追いかけてくる、商品ごとのお気に入りを設置可能です。

ボタンはデザインする必要が出てきますが、他店舗との差別化が図れますし、セール時に、その場では買わなくとも比較検討頂くきっかけづくりとしてお気に入り登録を促すことができます

さらに、お気に入り登録数を増やすことで、セールでの山を作る準備にもなりますので、ぜひ、楽天店の店長さん、スタッフさんは実践してみてください。

—————————————————
注意点
—————————————————

上記対策を行う場合、デフォルトのお気に入りボタンを上書きして指定しているため、こちらは消えてしまうので、ご注意くださいませ。

※弊社では責任を負いかねます。

ワンプルーフでは、こうした小さなRMSの設定や小技テクニックも含めて、楽天・Yahoo!ショッピングを中心に、EC運営代行支援、コンサルティングを手掛けております。

サービスについて、詳しく話を聞いてみたい！

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

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

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

Posted on by ワンプルーフ

楽天市場店や、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運営代行支援、コンサルティングを手掛けております。

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

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

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