ポップアップバナーでクーポンを2枚を表示させる方法

Question

ポップアップバナーでクーポンを2枚を表示させる方法はないでしょうか？
横長長方形画像を縦に2枚並べるか、正方形画像を横に2枚並べたいです。

Answer

ECマスターズの田中です。

ポップアップバナーの仕組みによって変わるため
一概に申し上げることは難しいのですが、
基本的に、表示部分にクーポン２枚分のHTMLタグをご記載いただき、
スタイルシートで見た目を調整することで
表示させることは可能です。

Answer

ご回答いただきありがとうございます。

自分でやってみましたが、どうもうまくいきませんでした。

例えば、width:616px height:120pxの画像を縦に2枚表示する場合、どこをどのように変更すればよいのでしょうか？

Answer

ECマスターズの田中です。

変更箇所をご案内差し上げるためには、
実際に設置された様子をご確認させていただく必要がございます。

テストページでも結構ですので、
実際に設置をお試しいただいた上で、
その様子が確認できるページのURLを
返信もしくは「投稿内容について報告する」よりお知らせ願います。
（一部伏せていただいても結構です）

Answer

デザインレシピの「ポップアップバナーを表示させる方法」なのですが、
どの部分の変更が必要でしょうか？










p{
margin:0 auto;}
input#modal {
display: none;
}
input#modal + 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 + label div {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
position: fixed;
width: 300px; /*画像の横幅*/
height:330px; /*画像の縦幅*/
bottom: 0;
left: 0;
margin: auto;
position: fixed;
right: 0;
top: 0;
}
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; /*画像の横幅*/
height:330px; /*画像の縦幅*/
}

Answer

ECマスターズの田中です。

お知らせいただき、ありがとうございます。

Genieさんのショップの商品ページを確認したところ、
実際に設置されている様子を確認できました。

実際に設置されているソースにて、タグの中に








のように、2枚のリンクつきバナーが並ぶようにご設置いただいた上で、

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 + label div::after {
    content: "× Close";
    display: block;
    text-align: center;
    margin: 0 auto;
    font-size: 3em;
    font-weight: bold;
    color: #ffffff;
    line-height: 1em;
}

に置き換えていただき、

input#modal + label div {
の下にございます
height:120px; /*画像の縦幅*/
を、2枚分の
height:240px; /*画像の縦幅*/
に置き換えていただきますようお願いします。

Answer

ありがとうございます！
設置することができました！