新規ウィンドウの開き方

Question

お世話になっております。
下記、楽天のイベントページを新規ウィンドウで開きたいのですが・・
イベントページへ普通に飛びますTT

ここまで半角スペースを入れてみたりと色々試しましたができないため
どこか間違えてるんだと思います。正しいタグを教えて頂けますか？



よろしくお願いします

Answer

ECマスターズの田中です。

いただいたタグに誤りはないように見えますので、
閲覧する方法に原因がある可能性がございます。

いただいたバナーの動作を、
・（Windows/Mac）のブラウザ（Chrome/Safari/IE/Edge/Firefox/……）
・スマートフォン（iOS/Android）のブラウザ（Chrome/Safari/……）
・スマートフォンの楽天アプリ
など、どのような環境でご確認いただいたか、
お知らせいただきますようお願いします。

わからない場合は、
実際にバナーが表示されている様子の
スクリーンショット（写真）を
お送りいただきますようお願いいたします。

Answer

ECマスターズの田中様

遅くなりすみません！新規ウィンドウに立ち上がってるのは確認出来ました。
大変申し訳ないのですが・・
新規ウィンドウではなくこれをポップアップバナーに立ち上げることは可能ですか？
よろしくお願いします。

Answer

ECマスターズの小野です。

いただいたご質問ですが、
連休明けに担当より回答させていただきます。

引き続きよろしくお願いいたします。

Answer

ECマスターズの伊藤です。

> 新規ウィンドウではなくこれをポップアップバナーに立ち上げることは可能ですか？

デザインレシピにて、ポップアップバナーを表示させる方法を
ご紹介していますので、こちらをご参照くださいませ。

ポップアップバナーを表示させる方法
https://club.ec-masters.net/index.php?design_popup_bunner

Answer

ECマスターズの伊藤です。

失礼いたしました、上記の方法ですと、
ページを訪れた際に、ポップアップを表示してしまいますので
改めてご案内いたします。

恐れ入りますが、少々お時間を頂戴したいと思います。

また、ポップアップは、どのページ（PC、アプリ、スマホ）の
どちらに設定をご希望でしょうか。

一部、設置できない可能性がございますので
予めご了承いただきたいと思います。

Answer

ECマスターズの伊藤です。

画像クリックで、ポップアップを表示させる方法ですが、
スマホのみ、ご対応いただけます。

PCは、ポップアップを表示するためのタグが
禁止されており、スマホのように
登録ができるようになるバグが存在しないため
ご対応いただくことができません。

また、アプリは表示することができますが
商品説明文内にのみ表示されます。
画面全体に表示することはできませんので
こちらの点も、ご了承の上ご利用くださいませ。


下記のソースを一部、内容に合わせて修正後
スマーフォン用商品説明文などに
登録をお願いいたします。









.ifrm-container {
width: 300px; /* iframeの横幅 */
height: 300px; /* iframeの縦幅 */
overflow:auto;
-webkit-overflow-scrolling:touch;
background:#ffffff;
}
.ifrm {
width:100%;
height:100%;
border:none;
}
p{
margin:0 auto;}
input#modal {
display: none;
}
input#modal_ifre + label {
width: 100%;
height: 120%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2147483646;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
input#modal_ifre + label div.modal_container {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
position: fixed;
width: 300px; /* iframeの横幅 */
height: 300px; /* iframeの縦幅 */
bottom: 0;
left: 0;
margin: 15% auto;
position: fixed;
right: 0;
top: 0;
}
input#modal_ifre + label div.modal_container::before {
content: "× Close";
position: absolute;
bottom: -25%;
right: 50%;
margin: 0 -60px 0 0;
font-size: 3em;
font-weight: bold;
color: #ffffff;
}
input#modal_ifre:checked + label {
display: none;
}
input#modal_ifre + label img{
width: 300px; /* iframeの横幅 */
height: 300px; /* iframeの縦幅 */
}

Answer

ECマスターズの伊藤様
遅くなりすみません！ありがとうございます！
色々と活用してみます。