-
アンケート回答後に特典が表示されるようにしたい
トピックス by
160 pt
2023年11月17日 13:32
151
PV
【該当Version】
https://sb-preview.squadbeyond.com/articles/_mTVfqqmqtjmbbhRdbQ/preview
【ご相談事項】
・記事下部にある、アンケートの最後の質問に回答後にそれ以降の（アンケートにご回答いただき～）のコンテンツを表示させたいです。
・コンテンツを表示させる際、紙吹雪のwidgetを入れたいです。
よろしくお願いいたします！
-
9 コメント
-
ご相談ありがとうございます！
確認させていただきます！！！
-
お待たせいたしました！
下記コードに入れ替えてください！
【HTML】===============================
<div class=”question-reveal-scroll js-scroll-reveal-enquete-select”>
<form name=”form-scroll-enquete”>
<div class=”questionArea js-form-radio”>
<div class=”imagebox”>
<picture>
<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820222/0165ba83-adf8-4335-8acc-93c4fafe1ec9.webp”>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820222/0165ba83-adf8-4335-8acc-93c4fafe1ec9.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820222/0165ba83-adf8-4335-8acc-93c4fafe1ec9.jpg” width=”718″ height=”233″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”navi”>
<div class=”navi__numbers”><span class=”current”>01</span><span>02</span><span>03</span></div>
</div>
<div class=”imagebox”>
<picture>
<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2324342/d0b257dc-482c-497a-aacd-7688e6a83220.webp”>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2324342/d0b257dc-482c-497a-aacd-7688e6a83220.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2324342/d0b257dc-482c-497a-aacd-7688e6a83220.jpg” width=”718″ height=”403″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”linkbox”><input id=”q1-1″ type=”checkbox” name=”q1″><label for=”q1-1″>
<div class=”btn”>おでこ</div>
</label><input id=”q1-2″ type=”checkbox” name=”q1″><label for=”q1-2″>
<div class=”btn”>目元</div>
</label><input id=”q1-3″ type=”checkbox” name=”q1″><label for=”q1-3″>
<div class=”btn”>口元</div>
</label><input id=”q1-4″ type=”checkbox” name=”q1″><label for=”q1-4″>
<div class=”btn”>頬</div>
</label><input id=”q1-5″ type=”checkbox” name=”q1″><label for=”q1-5″>
<div class=”btn”>首</div>
</label><input id=”q1-6″ type=”checkbox” name=”q1″><label for=”q1-6″>
<div class=”btn”>その他</div>
</label></div>
</div>
<div class=”questionArea js-form-radio”>
<div class=”imagebox”>
<picture>
<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820248/3c2afabb-74e8-4926-8bbc-b77b0d32b474.webp”>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820248/3c2afabb-74e8-4926-8bbc-b77b0d32b474.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820248/3c2afabb-74e8-4926-8bbc-b77b0d32b474.jpg” width=”718″ height=”233″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”navi”>
<div class=”navi__numbers”><span>01</span><span class=”current”>02</span><span>03</span></div>
</div>
<div class=”imagebox”>
<picture>
<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2336673/db304bf8-0404-45f4-85cd-90cde7ff950f.webp”>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2336673/db304bf8-0404-45f4-85cd-90cde7ff950f.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2336673/db304bf8-0404-45f4-85cd-90cde7ff950f.jpg” width=”718″ height=”478″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”linkbox”><input id=”q3-1″ type=”radio” name=”q3″><label for=”q3-1″>
<div class=”btn”>はい</div>
</label><input id=”q3-2″ type=”radio” name=”q3″><label for=”q3-2″>
<div class=”btn”>いいえ</div>
</label>
<div style=”text-align: left;”><span style=”font-size: 10px;”><br>※ ナイアシンアミドと7種のコラーゲンを配合した日本初の朝用・夜用「シワ改善」オールインワンシリーズ(2022年8月時点 TPCマーケティングリサーチ調べ)</span></div>
</div>
</div>
<div class=”questionArea js-form-radio”>
<div class=”imagebox”>
<picture>
<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820277/16bc5c61-e3bb-4178-a8b0-b0fe38f6194e.webp”>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820277/16bc5c61-e3bb-4178-a8b0-b0fe38f6194e.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820277/16bc5c61-e3bb-4178-a8b0-b0fe38f6194e.jpg” width=”718″ height=”160″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”navi”>
<div class=”navi__numbers”><span>01</span><span>02</span><span class=”current”>03</span></div>
</div>
<div class=”imagebox”>
<picture>
<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2322748/c4d0b4e0-17f5-478e-96e4-d58ac2999469.webp”>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2322748/c4d0b4e0-17f5-478e-96e4-d58ac2999469.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2322748/c4d0b4e0-17f5-478e-96e4-d58ac2999469.jpg” width=”718″ height=”478″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”linkbox”><input id=”q6-1″ type=”radio” name=”q6″><label for=”q6-1″>
<div class=”btn”>「朝用」「夜用」それぞれで、朝と夜の肌状態に合わせてしっかり使い分けができる。</div>
</label><input id=”q6-2″ type=”radio” name=”q6″><label for=”q6-2″>
<div class=”btn”>医薬部外品としてシワを改善する効果が認められている有効成分「ナイアシンアミド」が配合されている。</div>
</label><input id=”q6-3″ type=”radio” name=”q6″><label for=”q6-3″>
<div class=”btn”>「朝用オールインワン」でシワだけでなくシミ対策もできる。
<span style=”font-size: 10px;” class=”sb-fs-free”>※1</span>
</div>
</label><input id=”q6-4″ type=”radio” name=”q6″><label for=”q6-4″>
<div class=”btn”>「夜用オールインワン」はパック効果もあり、1つのケアだけでそのまま寝ることができる。</div>
</label><input id=”q6-5″ type=”radio” name=”q6″><label for=”q6-5″>
<div class=”btn”>朝用・夜用オールインワンで5年連続売り上げNo,1である。
<span style=”font-size: 10px;” class=”sb-fs-free”>※2</span>
</div>
</label>
<div style=”text-align: left;”><span style=”font-size: 10px;”><br>※1 紫外線対策をすることで、日やけによるシミを予防するということ
<br>※2 朝用・夜用のオールインワンのブランド別売上ランキング(2017年7月～2022年6月 TPCマーケティングリサーチ調べ)</span></div>
</div>
</div>
<div class=”send-btn js-switch-btn”><button class=”js-send” type=”button”>回答を完了する</button></div>
<div class=”revealarea js-reveal is-hidden”>
<div class=”js-scroll-point”></div>
<div class=”imagelastbox”>
<picture>
<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820047/96233a08-7f4e-41f0-88d0-15b6c652f430.webp”>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820047/96233a08-7f4e-41f0-88d0-15b6c652f430.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820047/96233a08-7f4e-41f0-88d0-15b6c652f430.png” width=”538″ height=”358″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”arrowFlow__area”>
<div class=”arrowFlow__inner”>
<div class=”arrowFlow__beforeG”><span class=”arrow”></span><span class=”arrow”></span><span class=”arrow”></span></div>
<div class=”arrowFlow__afterG”><span class=”arrow”></span><span class=”arrow”></span><span class=”arrow”></span></div>
</div>
</div>
<picture><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2736196/cf6e6b63-4d04-46b3-a456-77caa88c23f4.jpg” height=”450″ width=”538″ draggable=”false” style=”margin: 0px auto;” class=”lazyload”></picture>
<div class=”button-box”><a href=”https://www.shizensyokuhin.jp/excludes/dmlite/lp/walim2209-sn/?utm_source=google-CG&utm_medium=reach&utm_campaign=WAL484AT_AR_CG&argument=zXKEm5gk&dmai=SSAD_d1022&sb_tracking=true”>
<div class=”button style button-color-green”><span class=”copy”>お一人様1回限りで</span><span class=”title2″> お得に試してみる </span></div>
</a></div>
<div><strong>さらにさらに！</strong></div>
<div><strong style=”color: rgb(230, 0, 0); background-color: rgb(255, 255, 204);”>はじめての方限定</strong><strong style=”background-color: rgb(255, 255, 204);”>で</strong></div>
<div><strong style=”color: rgb(230, 0, 0); background-color: rgb(255, 255, 204);”>大人かわいいポーチもプレゼント</strong><strong style=”background-color: rgb(255, 255, 204);”>で付いてきます！！</strong></div>
<picture><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2371737/8d5c85ee-6116-4758-b2c1-ca2caae3533a.png” height=”215″ width=”538″ draggable=”false” style=”margin: 0px auto;” class=”lazyload”></picture>
<div><br></div>
<div><strong style=”background-color: rgb(255, 255, 204);”>医薬部外品×シワ改善のスキンケアアイテム</strong><span style=”background-color: rgb(255, 255, 204);”>って</span></div>
<div><strong style=”background-color: rgb(255, 255, 204); color: rgb(230, 0, 0);”>試してみたくても高価なものが多くて中々踏み出せない</strong><strong style=”background-color: rgb(255, 255, 204);”>ですよね…</strong><strong>。</strong></div>
<div><br></div>
<div><strong>「シークのシワ改善オールインワン」</strong>は
</div>
<div><strong style=”color: rgb(230, 0, 0);”>各々1,000円（税込）でお試しできる</strong>のでとってもありがたいです！
</div>
<div><br></div>
<div><strong style=”color: rgb(0, 0, 0); font-size: 17px; background-color: rgb(255, 255, 255);”>しかも、</strong><strong style=”color: rgb(230, 0, 0); font-size: 17px; background-color: rgb(255, 255, 204);”>お試しといってもたっぷり約1ヵ月分！！</strong></div>
<div class=”box”>
<h3 class=”box-title”>お得にお試しできる4大ポイント！</h3>
<ol>
<li>まずは定期購入ではなく<font color=”#e60000″>買い切りで試せる！</font></li>
<li>
<font color=”#e60000″>送料無料</font>＆<font color=”#e60000″>お一人様1回限り！</font>
</li>
<li>
<font color=”#e60000″>たっぷり約1ヵ月分</font>を<font color=”#e60000″>各々1,000円でお試し</font>できる！
</li>
<li><b style=””>
<font color=”#e60000″>はじめての方限定</font>
<font color=”#000000″>で</font>
<font color=”#e60000″>大人かわいいポーチをプレゼント！</font>
</li>
</ol>
</div>
<div><strong style=”color: rgb(230, 0, 0); background-color: rgb(255, 255, 204);”>いつまでこのお得な割引キャンペーンをやっているかも分からない</strong><strong>ので、</strong></div>
<div><strong>少しでも気になっているなら、ぜひ試してみてくださいね♪</strong></div>
<div class=”button-box”><a href=”https://www.shizensyokuhin.jp/excludes/dmlite/lp/walim2209-sn/?utm_source=google-CG&utm_medium=reach&utm_campaign=WAL484AT_AR_CG&argument=zXKEm5gk&dmai=SSAD_d1022&sb_tracking=true”>
<div class=”button style button-color-green”><span class=”copy”>お一人様1回限りで</span><span class=”title2″> お得に試してみる </span></div>
</a></div>
</div>
</form>
</div>
【CSS】===============================
.question-reveal-scroll {
width: 750px;
max-width: 100%;
font-size: 16px;
background-color: #fff;
margin: 0 auto 1rem;
padding: 1rem 0;
line-height: 1.5;
box-sizing: border-box;
}
.question-reveal-scroll .questionArea {
margin-bottom: 30px;
padding-bottom: 30px;
display: flex;
flex-direction: column;
border-bottom: 1px solid #cccccc;
}
.navi {
text-align: center;
margin-bottom: 20px;
order: 1;
}
.navi__numbers {
position: relative;
display: inline-flex;
margin: 10px 0;
font-weight: bold;
}
.navi__numbers::before {
content: ”;
width: calc(100% – 40px);
height: 20px;
background-color: #eeeeee;
position: absolute;
top: calc(50% – 10px);
left: 20px;
}
.navi__numbers .current {
color: #fff;
background-color: #113270;
}
.navi__numbers span {
color: #ffffff;
background-color: #bbbbbb;
font-size: 20px;
border-radius: 50%;
padding: 0;
margin: 0 10px;
width: 70px;
aspect-ratio: 1/1;
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
position: relative;
}
.navi__numbers .current~span {
color: #fff;
background-color: #76B9E8;
}
.question-reveal-scroll .title {
width: 100%;
color: #000000;
background-color: #ffffff;
font-size: 20px;
text-align: left;
margin: 0 auto 1em;
padding: 0;
order: 2;
}
.question-reveal-scroll .imagebox {
text-align: center;
margin: 0 0 20px;
order: 3;
}
.question-reveal-scroll .imagebox img,
.question-reveal-scroll .imagebox video {
display: inline !important;
width: 100%;
/* 追加 */
}
.question-reveal-scroll .imagelastbox img,
.question-reveal-scroll .imagebox video {
display: inline !important;
width: 100%;
/* 追加 */
}
.question-reveal-scroll .linkbox {
box-sizing: border-box;
order: 4;
}
.question-reveal-scroll input {
display: none;
}
.question-reveal-scroll input+label {
border: none;
padding: 6px;
display: block;
}
.question-reveal-scroll input+label .btn {
color: #000000;
background-color: #eeeeee;
width: 100%;
border-radius: 100vh;
padding: 0.5em 1em;
font-weight: bold;
text-align: center;
font-size: 18px;
display: inline-block;
box-sizing: border-box;
cursor: pointer;
}
.question-reveal-scroll input+label .btn:focus {
outline: none !important;
}
.question-reveal-scroll input:checked+label .btn {
background-color: #113270;
color: #ffffff;
}
.question-reveal-scroll ::-moz-focus-inner {
border-color: transparent;
}
.question-reveal-scroll .send-btn {
margin: 16px auto;
}
.question-reveal-scroll .send-btn button {
text-align: center;
border: none;
font-size: 20px;
font-weight: bold;
color: #fff;
margin: 0 auto;
padding: 1em;
background-color: #113270;
border-radius: 4px;
position: relative;
pointer-events: auto;
display: block;
transition: transform .2s;
}
.send-btn button:hover {
transform: scale(1.2);
cursor: pointer;
}
.revealarea {
font-size: 17px;
text-align: left;
margin: 48px auto 0;
padding: 0;
box-sizing: border-box;
}
.is-hidden {
display: none;
}
.next {
display: block;
border: none;
text-align: center;
}
.next input {
display: none;
}
.next .btn {
width: auto;
color: #fff;
font-size: 20px;
font-weight: 700;
background: linear-gradient(to bottom, #9acb3e, #018c48);
border: 1px solid #018c48;
border-radius: 5px;
box-shadow: 0 3px 0 #006666;
text-align: center;
position: relative;
margin: 10px auto 12px;
padding: 10px 20px 8px;
display: inline-block;
text-decoration: none;
box-sizing: border-box;
}
.next .btn:hover {
opacity: 0.7;
top: 2px;
}
/* 追加 */
.arrowFlow__area {
width: 100%;
height: auto;
}
.arrowFlow__inner {
padding-bottom: 200px;
overflow-y: hidden;
position: relative;
}
.arrowFlow__beforeG,
.arrowFlow__afterG {
width: 80%;
max-width: 400px;
height: auto;
margin: 0 auto;
display: flex;
justify-content: space-evenly;
align-items: flex-start;
animation-name: arrowFlow;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
transform: translate(-50%, -300%);
position: absolute;
top: 0;
left: 50%;
}
.arrowFlow__afterG {
animation-delay: 1s;
}
.arrow {
display: inline-block;
vertical-align: middle;
color: #ba0d0d;
line-height: 1;
position: relative;
width: 40px;
height: 60px !important;
background: currentColor;
margin: 0 30px;
}
.arrow:before {
content: “”;
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 50px 50px 0 50px;
border-color: #ba0d0d transparent transparent transparent;
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
}
@keyframes arrowFlow {
0% {
transform: translate(-50%, -300%);
}
60% {
transform: translate(-50%, 100%);
}
100% {
transform: translate(-50%, 400%);
}
}
.button-box {
/*外側の余白｜上下余白｜左右余白（auto=センタリング）｜*/
margin: 30px auto;
/*文字の位置*/
text-align: center;
}
.button-box a {
/*文字の飾り*/
text-decoration: none;
}
/*ボタンの設定*/
.button {
position: relative;
display: inline-block;
/*内側の余白｜上下余白｜左右余白｜*/
padding: 12px 27px;
/*角丸*/
border-radius: 5px;
/*影｜水平方向｜垂直方向｜ぼかし具合｜影の拡張｜色｜*/
box-shadow: 0px 5px 14px 1px #858585;
}
/*ボタン内矢印*/
.style:before {
display: block;
content: “”;
position: absolute;
/*矢印の縦位置（上基準）｜高さ半分 - 矢印の高さの半分*/
top: calc(50% – 24px);
/*矢印の横位置（左基準）*/
left: -10px;
/*横幅*/
width: 43px;
/*高さ*/
height: 49px;
/*矢印画像*/
background: transparent url(“https://production.static.squadbeyond.com/uploads/article_photo/photo/358098/da72fbfc-3bee-44a9-84d7-fcbc06f6b753.png”) 0 0 no-repeat;
/*矢印のサイズ｜横幅｜高さ｜*/
background-size: 100% auto;
/*アニメーションの設定｜アニメーション名｜1回のサイクルに要する時間｜*/
animation: arrowleft 1s;
/*アニメーションの設定｜実行回数｜*/
animation-iteration-count: infinite;
}
.style {
/*ボタン左側の余白（矢印分）*/
padding-left: 40px;
/*ボタン右側の余白*/
padding-right: 25px;
}
/*アニメーションの設定*/
@keyframes arrowleft {
/*アニメーション開始時*/
0% {
/*開始位置（左基準）*/
left: -0.7em;
/*透明度（0=透明、1=不透明）*/
opacity: 0;
}
50% {
opacity: 1;
}
/*アニメーション終了時*/
100% {
left: 0;
opacity: 0;
}
}
/*ボタン内テキスト*/
.button span {
display: block;
/*文字の色*/
color: #fff;
/*文字の太さ*/
font-weight: bold;
/*水平方向の字間のスペース*/
letter-spacing: -0.06em;
/*行の折り返し設定（normal=折り返す、nowrap=折り返さない）*/
white-space: nowrap;
/*影｜水平方向｜垂直方向｜ぼかし具合｜色｜*/
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}
/*「公式ページを見てみる」の設定*/
.title {
/*文字サイズ*/
font-size: 20px;
}
/*「お得なキャンペーン」の設定*/
.copy {
/*文字サイズ*/
font-size: 16px;
}
.button.button-color-green {
/*グラデーション｜to bottom = 上から下へ｜位置0%の色｜位置49%の色｜位置50%の色｜位置100%の色*/
background: linear-gradient(to bottom, #49ac00 0%, #79c733 49%, #49ac00 50%, #49ac00 100%);
}
/*ボタンの背景グラデーションの設定*/
.button.button-color-green {
background: linear-gradient(to bottom, #49ac00 0%, #79c733 49%, #49ac00 50%, #49ac00 100%);
}
.button.button-color-red {
background: linear-gradient(to bottom, #c30009 0%, #d7333c 49%, #c30009 50%, #c30009 100%);
}
.button.button-color-orange {
background: linear-gradient(to bottom, #ff5e00 0%, #ff8b33 49%, #ff5e00 50%, #ff5e00 100%);
}
.box {
/*ボックスの周りの余白。上下｜左右*/
margin: 1em auto;
/*ボックスの背景色*/
background: #fff9eb;
/*ボックスの角を丸める*/
border-radius: 4px;
/*ボックスの線。線の種類｜線の色｜線の太さ*/
border: solid #fc9db8 1px;
/*ボックスの幅*/
max-width: 100%;
/*ボックスの内側の余白。上｜右｜下｜左*/
padding: 40px 5px 0px 10px;
position: relative;
box-sizing: border-box;
}
.box .box-title {
/*見出しの背景色*/
background: #f5a15f;
/*見出しの文字の色*/
color: #fff;
/*見出しの文字の太さ*/
font-weight: bold;
/*見出し文字のサイズ*/
font-size: 20px;
/*文字の水平方向の配置。左寄せはleft、真ん中はcenter*/
text-align: center;
/*見出し部分の角丸。上｜右｜下｜左*/
border-radius: 4px 4px 0px 0px;
position: absolute;
line-height: 2;
padding: 1px;
letter-spacing: .05em;
left: 0;
top: 0;
width: 100%;
margin: 0;
box-sizing: border-box;
}
.box ol {
padding: 0;
position: relative;
padding-top: 3px;
margin-left: 0;
list-style-type: none;
border: 0;
counter-reset: number;
}
.box ol li {
/*リスト文字の色*/
color: #333;
list-style-type: none;
padding: .5em 0 .5em 3em;
line-height: 1.6;
}
.box li::before {
color: #fff;
background: #ffb36b;
display: inline-block;
position: absolute;
width: 25px;
height: 25px;
border-radius: 50%;
color: white;
font-size: 15px;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 25px;
content: counter(number);
counter-increment: number;
left: 10px;
margin-left: 0;
}
-
ありがとうございます！
そのまま貼ったところ添付のようになってしまいました…。
何かコードの入れ替え方に不備がありそうでしょうか…？
▼URL
https://sb-preview.squadbeyond.com/articles/_mTVfqqmqtjmbbhRdbQ/preview
-
確認いただきありがとうございます！
上記のコードはHTMLとCSSがあるのですが、分けて貼り付けていただいたか今一度確認いただけないでしょうか？
よろしくお願いします！
-
-
失礼いたしました、共有したコードが文字化けしていたようです。
下記コードに書き換えていただけますか？
===============【HTML】===============
<div class=”question-reveal-scroll js-scroll-reveal-enquete-select”>
<form name=”form-scroll-enquete”>
<div class=”questionArea js-form-radio”>
<div class=”imagebox”>
<picture>
<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820222/0165ba83-adf8-4335-8acc-93c4fafe1ec9.webp”>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820222/0165ba83-adf8-4335-8acc-93c4fafe1ec9.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820222/0165ba83-adf8-4335-8acc-93c4fafe1ec9.jpg” width=”718″ height=”233″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”navi”>
<div class=”navi__numbers”><span class=”current”>01</span><span>02</span><span>03</span></div>
</div>
<div class=”imagebox”>
<picture>
<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2324342/d0b257dc-482c-497a-aacd-7688e6a83220.webp”>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2324342/d0b257dc-482c-497a-aacd-7688e6a83220.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2324342/d0b257dc-482c-497a-aacd-7688e6a83220.jpg” width=”718″ height=”403″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”linkbox”><input id=”q1-1″ type=”checkbox” name=”q1″><label for=”q1-1″>
<div class=”btn”>おでこ</div>
</label><input id=”q1-2″ type=”checkbox” name=”q1″><label for=”q1-2″>
<div class=”btn”>目元</div>
</label><input id=”q1-3″ type=”checkbox” name=”q1″><label for=”q1-3″>
<div class=”btn”>口元</div>
</label><input id=”q1-4″ type=”checkbox” name=”q1″><label for=”q1-4″>
<div class=”btn”>頬</div>
</label><input id=”q1-5″ type=”checkbox” name=”q1″><label for=”q1-5″>
<div class=”btn”>首</div>
</label><input id=”q1-6″ type=”checkbox” name=”q1″><label for=”q1-6″>
<div class=”btn”>その他</div>
</label></div>
</div>
<div class=”questionArea js-form-radio”>
<div class=”imagebox”>
<picture>
<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820248/3c2afabb-74e8-4926-8bbc-b77b0d32b474.webp”>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820248/3c2afabb-74e8-4926-8bbc-b77b0d32b474.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820248/3c2afabb-74e8-4926-8bbc-b77b0d32b474.jpg” width=”718″ height=”233″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”navi”>
<div class=”navi__numbers”><span>01</span><span class=”current”>02</span><span>03</span></div>
</div>
<div class=”imagebox”>
<picture>
<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2336673/db304bf8-0404-45f4-85cd-90cde7ff950f.webp”>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2336673/db304bf8-0404-45f4-85cd-90cde7ff950f.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2336673/db304bf8-0404-45f4-85cd-90cde7ff950f.jpg” width=”718″ height=”478″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”linkbox”><input id=”q3-1″ type=”radio” name=”q3″><label for=”q3-1″>
<div class=”btn”>はい</div>
</label><input id=”q3-2″ type=”radio” name=”q3″><label for=”q3-2″>
<div class=”btn”>いいえ</div>
</label>
<div style=”text-align: left;”><span style=”font-size: 10px;”><br>※ ナイアシンアミドと7種のコラーゲンを配合した日本初の朝用・夜用「シワ改善」オールインワンシリーズ(2022年8月時点 TPCマーケティングリサーチ調べ)</span></div>
</div>
</div>
<div class=”questionArea js-form-radio”>
<div class=”imagebox”>
<picture>
<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820277/16bc5c61-e3bb-4178-a8b0-b0fe38f6194e.webp”>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820277/16bc5c61-e3bb-4178-a8b0-b0fe38f6194e.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820277/16bc5c61-e3bb-4178-a8b0-b0fe38f6194e.jpg” width=”718″ height=”160″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”navi”>
<div class=”navi__numbers”><span>01</span><span>02</span><span class=”current”>03</span></div>
</div>
<div class=”imagebox”>
<picture>
<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2322748/c4d0b4e0-17f5-478e-96e4-d58ac2999469.webp”>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2322748/c4d0b4e0-17f5-478e-96e4-d58ac2999469.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2322748/c4d0b4e0-17f5-478e-96e4-d58ac2999469.jpg” width=”718″ height=”478″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”linkbox”><input id=”q6-1″ type=”radio” name=”q6″><label for=”q6-1″>
<div class=”btn”>「朝用」「夜用」それぞれで、朝と夜の肌状態に合わせてしっかり使い分けができる。</div>
</label><input id=”q6-2″ type=”radio” name=”q6″><label for=”q6-2″>
<div class=”btn”>医薬部外品としてシワを改善する効果が認められている有効成分「ナイアシンアミド」が配合されている。</div>
</label><input id=”q6-3″ type=”radio” name=”q6″><label for=”q6-3″>
<div class=”btn”>「朝用オールインワン」でシワだけでなくシミ対策もできる。
<span style=”font-size: 10px;” class=”sb-fs-free”>※1</span>
</div>
</label><input id=”q6-4″ type=”radio” name=”q6″><label for=”q6-4″>
<div class=”btn”>「夜用オールインワン」はパック効果もあり、1つのケアだけでそのまま寝ることができる。</div>
</label><input id=”q6-5″ type=”radio” name=”q6″><label for=”q6-5″>
<div class=”btn”>朝用・夜用オールインワンで5年連続売り上げNo,1である。
<span style=”font-size: 10px;” class=”sb-fs-free”>※2</span>
</div>
</label>
<div style=”text-align: left;”><span style=”font-size: 10px;”><br>※1 紫外線対策をすることで、日やけによるシミを予防するということ
<br>※2 朝用・夜用のオールインワンのブランド別売上ランキング(2017年7月～2022年6月 TPCマーケティングリサーチ調べ)</span></div>
</div>
</div>
<div class=”send-btn js-switch-btn”><button class=”js-send” type=”button”>回答を完了する</button></div>
<div class=”revealarea js-reveal is-hidden”>
<div class=”js-scroll-point”></div>
<div class=”imagelastbox”>
<picture>
<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820047/96233a08-7f4e-41f0-88d0-15b6c652f430.webp”>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820047/96233a08-7f4e-41f0-88d0-15b6c652f430.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2820047/96233a08-7f4e-41f0-88d0-15b6c652f430.png” width=”538″ height=”358″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”arrowFlow__area”>
<div class=”arrowFlow__inner”>
<div class=”arrowFlow__beforeG”><span class=”arrow”></span><span class=”arrow”></span><span class=”arrow”></span></div>
<div class=”arrowFlow__afterG”><span class=”arrow”></span><span class=”arrow”></span><span class=”arrow”></span></div>
</div>
</div>
<picture><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2736196/cf6e6b63-4d04-46b3-a456-77caa88c23f4.jpg” height=”450″ width=”538″ draggable=”false” style=”margin: 0px auto;” class=”lazyload”></picture>
<div class=”button-box”><a href=”https://www.shizensyokuhin.jp/excludes/dmlite/lp/walim2209-sn/?utm_source=google-CG&utm_medium=reach&utm_campaign=WAL484AT_AR_CG&argument=zXKEm5gk&dmai=SSAD_d1022&sb_tracking=true”>
<div class=”button style button-color-green”><span class=”copy”>お一人様1回限りで</span><span class=”title2″> お得に試してみる </span></div>
</a></div>
<div><strong>さらにさらに！</strong></div>
<div><strong style=”color: rgb(230, 0, 0); background-color: rgb(255, 255, 204);”>はじめての方限定</strong><strong style=”background-color: rgb(255, 255, 204);”>で</strong></div>
<div><strong style=”color: rgb(230, 0, 0); background-color: rgb(255, 255, 204);”>大人かわいいポーチもプレゼント</strong><strong style=”background-color: rgb(255, 255, 204);”>で付いてきます！！</strong></div>
<picture><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/2371737/8d5c85ee-6116-4758-b2c1-ca2caae3533a.png” height=”215″ width=”538″ draggable=”false” style=”margin: 0px auto;” class=”lazyload”></picture>
<div><br></div>
<div><strong style=”background-color: rgb(255, 255, 204);”>医薬部外品×シワ改善のスキンケアアイテム</strong><span style=”background-color: rgb(255, 255, 204);”>って</span></div>
<div><strong style=”background-color: rgb(255, 255, 204); color: rgb(230, 0, 0);”>試してみたくても高価なものが多くて中々踏み出せない</strong><strong style=”background-color: rgb(255, 255, 204);”>ですよね…</strong><strong>。</strong></div>
<div><br></div>
<div><strong>「シークのシワ改善オールインワン」</strong>は
</div>
<div><strong style=”color: rgb(230, 0, 0);”>各々1,000円（税込）でお試しできる</strong>のでとってもありがたいです！
</div>
<div><br></div>
<div><strong style=”color: rgb(0, 0, 0); font-size: 17px; background-color: rgb(255, 255, 255);”>しかも、</strong><strong style=”color: rgb(230, 0, 0); font-size: 17px; background-color: rgb(255, 255, 204);”>お試しといってもたっぷり約1ヵ月分！！</strong></div>
<div class=”box”>
<h3 class=”box-title”>お得にお試しできる4大ポイント！</h3>
<ol>
<li>まずは定期購入ではなく<font color=”#e60000″>買い切りで試せる！</font></li>
<li>
<font color=”#e60000″>送料無料</font>＆<font color=”#e60000″>お一人様1回限り！</font>
</li>
<li>
<font color=”#e60000″>たっぷり約1ヵ月分</font>を<font color=”#e60000″>各々1,000円でお試し</font>できる！
</li>
<li><b style=””>
<font color=”#e60000″>はじめての方限定</font>
<font color=”#000000″>で</font>
<font color=”#e60000″>大人かわいいポーチをプレゼント！</font>
</li>
</ol>
</div>
<div><strong style=”color: rgb(230, 0, 0); background-color: rgb(255, 255, 204);”>いつまでこのお得な割引キャンペーンをやっているかも分からない</strong><strong>ので、</strong></div>
<div><strong>少しでも気になっているなら、ぜひ試してみてくださいね♪</strong></div>
<div class=”button-box”><a href=”https://www.shizensyokuhin.jp/excludes/dmlite/lp/walim2209-sn/?utm_source=google-CG&utm_medium=reach&utm_campaign=WAL484AT_AR_CG&argument=zXKEm5gk&dmai=SSAD_d1022&sb_tracking=true”>
<div class=”button style button-color-green”><span class=”copy”>お一人様1回限りで</span><span class=”title2″> お得に試してみる </span></div>
</a></div>
</div>
</form>
</div>
===============【CSS】===============
.question-reveal-scroll {
width: 750px;
max-width: 100%;
font-size: 16px;
background-color: #fff;
margin: 0 auto 1rem;
padding: 1rem 0;
line-height: 1.5;
box-sizing: border-box;
}
.question-reveal-scroll .questionArea {
margin-bottom: 30px;
padding-bottom: 30px;
display: flex;
flex-direction: column;
border-bottom: 1px solid #cccccc;
}
.navi {
text-align: center;
margin-bottom: 20px;
order: 1;
}
.navi__numbers {
position: relative;
display: inline-flex;
margin: 10px 0;
font-weight: bold;
}
.navi__numbers::before {
content: ”;
width: calc(100% – 40px);
height: 20px;
background-color: #eeeeee;
position: absolute;
top: calc(50% – 10px);
left: 20px;
}
.navi__numbers .current {
color: #fff;
background-color: #113270;
}
.navi__numbers span {
color: #ffffff;
background-color: #bbbbbb;
font-size: 20px;
border-radius: 50%;
padding: 0;
margin: 0 10px;
width: 70px;
aspect-ratio: 1/1;
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
position: relative;
}
.navi__numbers .current~span {
color: #fff;
background-color: #76B9E8;
}
.question-reveal-scroll .title {
width: 100%;
color: #000000;
background-color: #ffffff;
font-size: 20px;
text-align: left;
margin: 0 auto 1em;
padding: 0;
order: 2;
}
.question-reveal-scroll .imagebox {
text-align: center;
margin: 0 0 20px;
order: 3;
}
.question-reveal-scroll .imagebox img,
.question-reveal-scroll .imagebox video {
display: inline !important;
width: 100%;
/* 追加 */
}
.question-reveal-scroll .imagelastbox img,
.question-reveal-scroll .imagebox video {
display: inline !important;
width: 100%;
/* 追加 */
}
.question-reveal-scroll .linkbox {
box-sizing: border-box;
order: 4;
}
.question-reveal-scroll input {
display: none;
}
.question-reveal-scroll input+label {
border: none;
padding: 6px;
display: block;
}
.question-reveal-scroll input+label .btn {
color: #000000;
background-color: #eeeeee;
width: 100%;
border-radius: 100vh;
padding: 0.5em 1em;
font-weight: bold;
text-align: center;
font-size: 18px;
display: inline-block;
box-sizing: border-box;
cursor: pointer;
}
.question-reveal-scroll input+label .btn:focus {
outline: none !important;
}
.question-reveal-scroll input:checked+label .btn {
background-color: #113270;
color: #ffffff;
}
.question-reveal-scroll ::-moz-focus-inner {
border-color: transparent;
}
.question-reveal-scroll .send-btn {
margin: 16px auto;
}
.question-reveal-scroll .send-btn button {
text-align: center;
border: none;
font-size: 20px;
font-weight: bold;
color: #fff;
margin: 0 auto;
padding: 1em;
background-color: #113270;
border-radius: 4px;
position: relative;
pointer-events: auto;
display: block;
transition: transform .2s;
}
.send-btn button:hover {
transform: scale(1.2);
cursor: pointer;
}
.revealarea {
font-size: 17px;
text-align: left;
margin: 48px auto 0;
padding: 0;
box-sizing: border-box;
}
.is-hidden {
display: none;
}
.next {
display: block;
border: none;
text-align: center;
}
.next input {
display: none;
}
.next .btn {
width: auto;
color: #fff;
font-size: 20px;
font-weight: 700;
background: linear-gradient(to bottom, #9acb3e, #018c48);
border: 1px solid #018c48;
border-radius: 5px;
box-shadow: 0 3px 0 #006666;
text-align: center;
position: relative;
margin: 10px auto 12px;
padding: 10px 20px 8px;
display: inline-block;
text-decoration: none;
box-sizing: border-box;
}
.next .btn:hover {
opacity: 0.7;
top: 2px;
}
/* 追加 */
.arrowFlow__area {
width: 100%;
height: auto;
}
.arrowFlow__inner {
padding-bottom: 200px;
overflow-y: hidden;
position: relative;
}
.arrowFlow__beforeG,
.arrowFlow__afterG {
width: 80%;
max-width: 400px;
height: auto;
margin: 0 auto;
display: flex;
justify-content: space-evenly;
align-items: flex-start;
animation-name: arrowFlow;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
transform: translate(-50%, -300%);
position: absolute;
top: 0;
left: 50%;
}
.arrowFlow__afterG {
animation-delay: 1s;
}
.arrow {
display: inline-block;
vertical-align: middle;
color: #ba0d0d;
line-height: 1;
position: relative;
width: 40px;
height: 60px !important;
background: currentColor;
margin: 0 30px;
}
.arrow:before {
content: “”;
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 50px 50px 0 50px;
border-color: #ba0d0d transparent transparent transparent;
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
}
@keyframes arrowFlow {
0% {
transform: translate(-50%, -300%);
}
60% {
transform: translate(-50%, 100%);
}
100% {
transform: translate(-50%, 400%);
}
}
.button-box {
/*外側の余白｜上下余白｜左右余白（auto=センタリング）｜*/
margin: 30px auto;
/*文字の位置*/
text-align: center;
}
.button-box a {
/*文字の飾り*/
text-decoration: none;
}
/*ボタンの設定*/
.button {
position: relative;
display: inline-block;
/*内側の余白｜上下余白｜左右余白｜*/
padding: 12px 27px;
/*角丸*/
border-radius: 5px;
/*影｜水平方向｜垂直方向｜ぼかし具合｜影の拡張｜色｜*/
box-shadow: 0px 5px 14px 1px #858585;
}
/*ボタン内矢印*/
.style:before {
display: block;
content: “”;
position: absolute;
/*矢印の縦位置（上基準）｜高さ半分 - 矢印の高さの半分*/
top: calc(50% – 24px);
/*矢印の横位置（左基準）*/
left: -10px;
/*横幅*/
width: 43px;
/*高さ*/
height: 49px;
/*矢印画像*/
background: transparent url(“https://production.static.squadbeyond.com/uploads/article_photo/photo/358098/da72fbfc-3bee-44a9-84d7-fcbc06f6b753.png”) 0 0 no-repeat;
/*矢印のサイズ｜横幅｜高さ｜*/
background-size: 100% auto;
/*アニメーションの設定｜アニメーション名｜1回のサイクルに要する時間｜*/
animation: arrowleft 1s;
/*アニメーションの設定｜実行回数｜*/
animation-iteration-count: infinite;
}
.style {
/*ボタン左側の余白（矢印分）*/
padding-left: 40px;
/*ボタン右側の余白*/
padding-right: 25px;
}
/*アニメーションの設定*/
@keyframes arrowleft {
/*アニメーション開始時*/
0% {
/*開始位置（左基準）*/
left: -0.7em;
/*透明度（0=透明、1=不透明）*/
opacity: 0;
}
50% {
opacity: 1;
}
/*アニメーション終了時*/
100% {
left: 0;
opacity: 0;
}
}
/*ボタン内テキスト*/
.button span {
display: block;
/*文字の色*/
color: #fff;
/*文字の太さ*/
font-weight: bold;
/*水平方向の字間のスペース*/
letter-spacing: -0.06em;
/*行の折り返し設定（normal=折り返す、nowrap=折り返さない）*/
white-space: nowrap;
/*影｜水平方向｜垂直方向｜ぼかし具合｜色｜*/
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}
/*「公式ページを見てみる」の設定*/
.title {
/*文字サイズ*/
font-size: 20px;
}
/*「お得なキャンペーン」の設定*/
.copy {
/*文字サイズ*/
font-size: 16px;
}
.button.button-color-green {
/*グラデーション｜to bottom = 上から下へ｜位置0%の色｜位置49%の色｜位置50%の色｜位置100%の色*/
background: linear-gradient(to bottom, #49ac00 0%, #79c733 49%, #49ac00 50%, #49ac00 100%);
}
/*ボタンの背景グラデーションの設定*/
.button.button-color-green {
background: linear-gradient(to bottom, #49ac00 0%, #79c733 49%, #49ac00 50%, #49ac00 100%);
}
.button.button-color-red {
background: linear-gradient(to bottom, #c30009 0%, #d7333c 49%, #c30009 50%, #c30009 100%);
}
.button.button-color-orange {
background: linear-gradient(to bottom, #ff5e00 0%, #ff8b33 49%, #ff5e00 50%, #ff5e00 100%);
}
.box {
/*ボックスの周りの余白。上下｜左右*/
margin: 1em auto;
/*ボックスの背景色*/
background: #fff9eb;
/*ボックスの角を丸める*/
border-radius: 4px;
/*ボックスの線。線の種類｜線の色｜線の太さ*/
border: solid #fc9db8 1px;
/*ボックスの幅*/
max-width: 100%;
/*ボックスの内側の余白。上｜右｜下｜左*/
padding: 40px 5px 0px 10px;
position: relative;
box-sizing: border-box;
}
.box .box-title {
/*見出しの背景色*/
background: #f5a15f;
/*見出しの文字の色*/
color: #fff;
/*見出しの文字の太さ*/
font-weight: bold;
/*見出し文字のサイズ*/
font-size: 20px;
/*文字の水平方向の配置。左寄せはleft、真ん中はcenter*/
text-align: center;
/*見出し部分の角丸。上｜右｜下｜左*/
border-radius: 4px 4px 0px 0px;
position: absolute;
line-height: 2;
padding: 1px;
letter-spacing: .05em;
left: 0;
top: 0;
width: 100%;
margin: 0;
box-sizing: border-box;
}
.box ol {
padding: 0;
position: relative;
padding-top: 3px;
margin-left: 0;
list-style-type: none;
border: 0;
counter-reset: number;
}
.box ol li {
/*リスト文字の色*/
color: #333;
list-style-type: none;
padding: .5em 0 .5em 3em;
line-height: 1.6;
}
.box li::before {
color: #fff;
background: #ffb36b;
display: inline-block;
position: absolute;
width: 25px;
height: 25px;
border-radius: 50%;
color: white;
font-size: 15px;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 25px;
content: counter(number);
counter-increment: number;
left: 10px;
margin-left: 0;
}
-
-
あありがとうございます。
いただいた最新のコードに貼り換えましたがうまくいかずです。。
https://sb-preview.squadbeyond.com/articles/_mTVfqqmqtjmbbhRdbQ/preview
-
何度も試していただきありがとうございます😢
コードがこちらでの共有がうまくいかなさそうなので、貴社アカウントに修正後のものを共有させていただきました！
こちらからwidgetをコピーしてご使用ください！
https://app.squadbeyond.com/ab_tests/yjTBObyGhnhgrOdOJog/articles
-
ありがとうございます！
実装できました！
-
