デザインレシピ(ポップアップバナー表示)

Question

いつもお世話になります

PC表示はできたのですが、スマートフォンAパターンをスマホ商品ページ共通説明文に挿入しましたが表示されないんです

※クーポンurl、画像はpc共通の正方形280x280です。

また、バナークリックよりページが離脱してしまう(pc)ので
別ウィンドウにて開く　target="_blank"は、可能でしょうか？

よろしくお願いします

↓










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); });
});


p{
margin:0 auto;}
input#modal {
display: none;
}
input#modal   label {
width: 100%;
height: 120%;
position: fixed;
top: 147px;
bottom: 0;
left: 0;
right: 0;
z-index: 2147483646;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
input#modal   label div {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
position: fixed;
width: 300px; /*280*/
height:330px; /*280*/
bottom: 0;
left: 0;
margin: 15% auto;
position: fixed;
right: 0;
top: 120px;
}
input#modal   label div::before {
content: "× Close";
position: absolute;
bottom: -25%;
right: 50%;
margin: 0 -60px 0 0;
font-size: 3em;
font-weight: bold;
color: #ffffff;
}
input#modal:checked   label {
display: none;
}
input#modal   label img{
width: 300px; /*280*/
height:330px; /*280*/
}

Answer

なんつれさん

ECマスターズの小野です。

いただいたご質問ですが、
明日、担当より回答させていただきます。

少々お待ちくださいませ。

Answer

ECマスターズの伊藤です。

> PC表示はできたのですが、スマートフォンAパターンをスマホ商品ページ共通説明文に挿入しましたが表示されないんです

私にて確認をしたところ、問題なくクーポンが表示されておりました。
Aパターンは、一度Closeを押してしまうと、表示されなくなるため、
ご確認いただくには、シークレットモードをご利用いただきますよう
お願いいたします。

シークレットモードの起動方法は、下記URLをご参照ください。
https://bit.ly/2Uup9r7


> また、バナークリックよりページが離脱してしまう(pc)ので
> 別ウィンドウにて開く　target="_blank"は、可能でしょうか？

はい。別ウィンドウにて開くご指定も可能です。
ご認識の通り


↓↓↓


としていだきますと、別ウィンドウにて開く事ができます。

Answer

伊藤さま

ありがとうございます。

target="_brank"も、うまくできクローム拡張機能iphone表示確認できました(^^)

ただ、自分の持っているandroidスマホは見れないのです。

今後のために、お聞きしたいのですが・・https://bit.ly/2Uup9r7
↓

ANDROID(CHROME)

1.Androidのブラウザを起動し、右上の詳細詳細ボタンボタンをタップ。
2.メニューで、「新しいシークレット タブ」をタップします。
そして新しいウィンドウが開かれます。これがシークレットモードのタブです。

で、止まってしまいます・・

これから先どのようにすれば？いいでしょうか？

Answer

ECマスターズの伊藤です。

> target="_brank"も、うまくできクローム拡張機能iphone表示確認できました(^^)

ポップアップバナーをご確認いただけたようでよかったです。


> 1.Androidのブラウザを起動し、右上の詳細詳細ボタンボタンをタップ。
> 2.メニューで、「新しいシークレット タブ」をタップします。
> そして新しいウィンドウが開かれます。これがシークレットモードのタブです。
> 
> で、止まってしまいます・・

上部に検索またはURLを入力
と記載されている箇所がございますので、この部分をタップして
URLを入力していただき、キーボードの決定ボタンをタップしてください。

そうしますと、入力したURLのページを表示することができます。

また、検索したいキーワードを入れれば、googleで検索することができます

Answer

伊藤さん

なるほど～
スマホ、検索窓に rakutenといれ見ましたら、ポップアップ表示されてました
勉強になりました。ありがとうございます

Answer

お世話になります。

些細な事なのですが、スマホ表示バナー外枠に、グレ黒い枠線みたいなものが表示されます。
これは、仕様上仕方ないのでしょうか？
また、教えてください###HR######IMG0f1944fdf31f4e0ac9c9234a2faf9295e.jpegIMG0######BR###

Answer

ECマスターズの伊藤です。

> 些細な事なのですが、スマホ表示バナー外枠に、グレ黒い枠線みたいなものが表示されます。
> これは、仕様上仕方ないのでしょうか？

ポップアップしたバナーが目立つように
背景を透過したグレーにしています。

ソースを拝見したところ
デザインレシピにて配布しているものを
変更されているようでしたので、
デザインレシピをご参照の上
修正をお願いいたします。

意図的に、背景を表示させたくないなどございましたら
ご希望のレイアウトをご連絡いただければ
対応可能かどうか、確認をさせていただきます。

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); });
});


p{
margin:0 auto;}
input#modal {
display: none;
}
input#modal label {
width: 100%;
height: 120%;
position: fixed;
top: 147px;
bottom: 0;
left: 0;
right: 0;
z-index: 2147483646;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
input#modal label div {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
position: fixed;
width: 300px; /*280*/
height:330px; /*280*/
bottom: 0;
left: 0;
margin: 15% auto;
position: fixed;
right: 0;
top: 120px;
}
input#modal label div::before {
content: "× Close";
position: absolute;
bottom: -25%;
right: 50%;
margin: 0 -60px 0 0;
font-size: 3em;
font-weight: bold;
color: #ffffff;
}
input#modal:checked label {
display: none;
}
input#modal label img{
width: 300px; /*280*/
height:330px; /*280*/
}

###HR######IMG02dc3ca5a0b614a79ec6302fb227529e7.pngIMG0######BR###

Answer

ECマスターズの伊藤です。

> デザインレシピより商品ページ共通説明文へ挿入したところ
> 今後は、ポップアップではなく、画面最下段に表示されるようになりました。(添付)

確認させていただいたところ

正：input#modal + label {
誤：input#modal label {

のように、コード内のすべての + が削除されており
CSSのの構造が変わってしまい、うまく
適用されていないようでした。

意図的に削除されていないようであれば
コードを修正の際に、
ご利用頂いているツールで
削除されている可能性がございますので

Mery
https://forest.watch.impress.co.jp/library/software/mery/

などのテキストエディタを
ご利用いただくことを
おすすめいたします。


また、どの部分の + が削除されているかは

テキスト比較ツール
https://difff.jp/

をご利用いただきますと
かんたんにデザインレシピと、
ご自身のコードを比較していただけますので
よろしければご利用くださいませ。

Answer

伊藤さん

お忙しい中、ご丁寧にありがとうございました。
はじめから、やり直し、うまくできました。