飛び出すバナーについて

Question

https://www.rakuten.ne.jp/gold/maqua/tokusetu/sale_item/index.html?s-id=item_SP_BigBannerS_2
のようにページに飛んだ時に飛び出すバナーの設置はどうすればよいでしょうか？
ゴールでページに設置したいのですが、以前ECマスターさんで紹介していたと思いますが、
どこだったか見つけることが出来ず。

お手数をおかけしますが宜しくお願い致します。

Answer

ECマスターズの伊藤です。

> https://www.rakuten.ne.jp/gold/maqua/tokusetu/sale_item/index.html?s-id=item_SP_BigBannerS_2
> のようにページに飛んだ時に飛び出すバナーの設置はどうすればよいでしょうか？
> ゴールでページに設置したいのですが、以前ECマスターさんで紹介していたと思いますが、
> どこだったか見つけることが出来ず。

デザインレシピの

ポップアップバナーを表示させる方法
https://club.ec-masters.net/index.php?design_popup_bunner

にて、ご紹介しております。

Answer

ありがとうございます。
画像の位置が一番上に来てしまい、真ん中ぐらいに設置したいのですが、どこをすれば高さ調整出来ますでしょうか？
それと2度と表示しないというチェックBOXを付けることは可能でしょうか？

Answer

ECマスターズの伊藤です。

> 画像の位置が一番上に来てしまい、真ん中ぐらいに設置したいのですが、どこをすれば高さ調整出来ますでしょうか？
> それと2度と表示しないというチェックBOXを付けることは可能でしょうか？

確認させていただきますので、
実際に適用頂いているページのURLを
ご連絡いただけますでしょうか。

Answer

https://www.rakuten.ne.jp/gold/avril/timesele.html
になります。

Answer

ECマスターズの伊藤です。

> https://www.rakuten.ne.jp/gold/avril/timesele.html
> になります。

URLのご連絡ありがとうございます。


> 画像の位置が一番上に来てしまい、真ん中ぐらいに設置したいのですが、どこをすれば高さ調整出来ますでしょうか？

width: 280px; /

などのように、/が残ってしまっているのが原因となりますので、
修正をお願いいたします。
（上記以外にも複数ございます。）


> それと2度と表示しないというチェックBOXを付けることは可能でしょうか？

チェックボックスではございませんが、
下記を記述いただくことで、
一度表示されると、次回以降表示されなくなります。


jQuery(function($){
var k = 'modal';
var v = 'done';
if( localStorage.getItem(k) !== v ) $('#modal').prop('checked',false);
$('#modallabel, #modallabel a').click(function(){ localStorage.setItem(k,v); });
});

Answer

ありがとうございます。
無事に修正出来ました。

『チェックボックスではございませんが、
下記を記述いただくことで、
一度表示されると、次回以降表示されなくなります。


jQuery(function($){
var k = 'modal';
var v = 'done';
if( localStorage.getItem(k) !== v ) $('#modal').prop('checked',false);
$('#modallabel, #modallabel a').click(function(){ localStorage.setItem(k,v); });
});

』

ですが、数時間か1日経つとまた表示するようになりますでしょうか？
ずっと表示されない場合、リピーターの方も見れなくなるので、
再度表示するタイミングもお手数をおかけしますが、ご確認のほど宜しくお願い致します。

Answer

ECマスターズの伊藤です。

> ですが、数時間か1日経つとまた表示するようになりますでしょうか？
> ずっと表示されない場合、リピーターの方も見れなくなるので、
> 再度表示するタイミングもお手数をおかけしますが、ご確認のほど宜しくお願い致します。

数日非表示となりますので（保存期間はブラウザの仕様によって異なります）
下記のタグをお試しください。

https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js
にアクセスし、内容をメモ帳などに
jquery.cookie.min.js
の名前で保存後、
下記タグをページに貼り付けてください。

var d = 7; /* 有効期限（日） */
7の数字を保存したい日数に変更をお願いします。




jQuery(function($){
var k = 'modal'; /* ポップアップ固有の名前 */
var d = 7; /* 有効期限（日） */
var v = 'done',p = 'ecmmmodal_';
if( $.cookie(p+k) !== v ) $('#modal').prop('checked',false);
$('#modallabel, #modallabel a').click(function(){ $.cookie(p+k, v, { expires: d }); });
});

Answer

ご連絡ありがとうございます。

『https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js
にアクセスし、内容をメモ帳などに
jquery.cookie.min.js
の名前で保存後、』
とありますが、GOLDサーバーに入れるということでしょうか？

何度もお手数をおかけしますが、ご確認のほど宜しくお願い致します。

Answer

ECマスターズの伊藤です。

> 『https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js
> にアクセスし、内容をメモ帳などに
> jquery.cookie.min.js
> の名前で保存後、』
> とありますが、GOLDサーバーに入れるということでしょうか？

ご案内が漏れており失礼いたしました。

おっしゃるとおり、保存後、GOLDにアップしていただく
必要がございます。

GOLDにアップロードいただくと、URLが
確定しますので、



を修正してご登録くださいませ。

Answer

度々申訳ございません。
先日はありがとうございました。
無事に設置することが出来ました。

それで次は、横並びで２つバナーを設置したいのですが、その場合どのようにすれば宜しいでしょうか？

お手数をおかけしますが、ご確認のほど宜しくお願い致します。

Answer

ECマスターズの星です。

週明け担当よりご案内いたしますので、
今しばらくお待ちください。
お待たせして申し訳ございませんが、
何卒よろしくお願いいたします。

Answer

ありがとうございます。
お手数をおかけしますが宜しくお願い致します。

Answer

ECマスターズの伊藤です。

> それで次は、横並びで２つバナーを設置したいのですが、その場合どのようにすれば宜しいでしょうか？

https://club.ec-masters.net/index.php?design_popup_bunner

にて、下記2箇所を修正してください。


(1)画像を2枚並べてください。




↓↓









(2)
input#modal + label div {

の

width: 300px; /*画像の横幅*/
height:330px; /*画像の縦幅*/


となっている箇所を画像2枚並べたサイズに変更してください。

例
300px x 300pxを2枚並べる場合は
width: 600px; /*画像の横幅*/
height:300px; /*画像の縦幅*/