メンバー | Squad voice

コミュニティのコメント

Page 10 of 21

← 1 … 9 10 11 … 21 →

widgetマスター

モデレータ
2023年11月13日 11:21

登録されたwidgetを確認したところ、記述のミスは見られませんでした！

手持ちの動画を実際に入れて確認したところ66.7MBの動画は再生でき、249MB以降の重い動画は再生できませんでした。。。

（もしかすると100MB前後で再生できる/できないの制限があるかもしれません）

動画容量が軽いのに再生できなければ、widget内にある記述、制限等の設定内容に間違いはないか確認してください。

動画容量が重ければ「Google Driveからの埋め込み※要Javascript(埋め込み)」のご利用をご検討ください！

手持ちの1.74GBの動画も再生できたので、問題はないかと思います。

埋め込みタグの出し方は以下サイトが詳しく説明してくれていますので、ご参照ください。

https://mahoroba148.com/drivemovie/
widgetマスター

モデレータ
2023年11月13日 16:17

内容を確認したところ、キャプチャのWidgetは登録されていなかったので貴社のオリジナル作成Widgetかと思われます！

また、ボタンとボタンを押した後に表示するコンテンツが別Widgetとして分離しています。

この構成では同じWidget内にコンテンツが無いのでどう頑張ってもボタンWidgetのプレビュー内にコンテンツを表示させることはできません。

以前は表示出来ていた、ということでしたらおそらく更新作業をした作業担当の方が何か意図してWidgetを分けたのではないかと考えられるので貴社の作業者の方に確認していただければと思います！
widgetマスター

モデレータ
2023年11月14日 19:47
コードを確認したところ各設問の閉じタグ位置がズレています。

下記の通り修正してください！

①</form>タグ手前の</div>を３つ削除する

②2つ目以降の<div class=”questionArea js-form-radio”>手前に</div>を１つ追加する

※自動スクロールさせたい設問からはno-scrollclassを削除してください

修正内容の説明をしますと下記が各設問のHTML構成なんですが、現在一番下の閉じタグ</div> が抜けてて</form>タグ手前にまとめて追加されちゃってるのでタグの入れ子関係を直そうとしています。
```
<div class="questionArea js-form-radio">
  <div class="question__numBox">...</div>
  <h2 class="title">
    <span class="mark">Q1</span>今の体型を変えたいと思いますか？<br>
  </h2>
  <div class="questionImg">...</div>
  <div class="linkbox btn-two">...</div>
</div>
```
widgetマスター

モデレータ
2023年11月16日 14:29

作成完了しました！！！

●登録カテゴリーとwidget名

自動表示 > 条件に合わせて15日, 月末日を表示する※要javascript

●設置例

https://sb-draft-preview.squadbeyond.com/articles/LyggQeIxGV-lbmtHBcg/draft?token=11cd4e7986a5f062f95461ec5464c6b9
widgetマスター

モデレータ
2023年11月17日 13:33

ご相談ありがとうございます！

確認させていただきます！！！
widgetマスター

モデレータ
2023年11月17日 18:40

作成が完了しました💪

Widget名: 年齢制限チェック(はい/いいえともに別リンクへ遷移) ※要Javascript

カテゴリ: 追従型

設置例: https://sb-draft-preview.squadbeyond.com/articles/xmDcNgLbkVDUvWxXYg/draft?token=701b1bc7192d870749dc9a5f78b0e7d2
widgetマスター

モデレータ
2023年11月21日 10:50

お待たせいたしました！

下記コードに入れ替えてください！

【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;

}
widgetマスター

モデレータ
2023年11月21日 17:46
CSSに下記記述を追加してください！
```
.question-reveal-multi .questionArea:nth-last-of-type(2) {
    margin-bottom: 0;
}
```
プレビュー：https://sb-draft-preview.squadbeyond.com/articles/RtDzfTCaGIkwAjfBtbug/draft?token=5387d78d583fc18b591d0a16bc9348d9

さらに余白を削りたい場合は下記のように既存のCSSに追加をすると余白を消すことができます！
```
.question-reveal-multi {
    width: 750px;
    max-width: 100%;
    font-size: 16px;
    background-color: #fff;
    margin: 0 auto 1rem;
    padding: 1rem;
    line-height: 1.5;
    box-sizing: border-box;
    /* 以下追加 */
    margin-bottom: 0;
    padding-bottom: 0;
}
```
プレビュー：https://sb-draft-preview.squadbeyond.com/articles/oZfAqebRraveZVX-HaxQ/draft?token=a4765caa315e26653b70ef17209c78cc
widgetマスター

モデレータ
2023年11月22日 10:37

作成が完了しました！

Widget名：チェックボックス付きリスト

カテゴリ：表

設置例：

https://sb-draft-preview.squadbeyond.com/articles/c-BdsxMAO_yscL-OBFPjQ/draft?token=9f03e80ac07ae5637310bf9ab7f62f96
widgetマスター

モデレータ
2023年11月20日 16:37

上記の通り修正いただければなおるかとおもうので、修正内容が間違っている可能性がありそうです・・・！

修正したページのプレビューとWidget内のHTML, CSSを共有いただきたいです！

よろしくお願いいたします！
widgetマスター

モデレータ
2023年11月20日 17:47

ありがとうございます！

確認します💪
widgetマスター

モデレータ
2023年11月21日 18:08

お待たせいたしました！

HTMLとCSSを下記コードに変更お願いします！

既存の記述をすべて消した上でペーストしてください！

———-【HTML】———-

<script>

var sbScrollRevealEnqueteWithRevealHiddenCase = sbScrollRevealEnqueteWithRevealHiddenCase || {};

(function(_) {

const classes = {

target: ‘.js-scroll-reveal-enquete-with-reveal’,

questionItem: ‘.questionArea’,

revealArea: ‘.js-reveal’,

}

const setting = {

duration: 600,

}

_.scrollTo = function(end, duration) {

const startTime = Date.now()

const easeOut = (p) => p * (2 – p)

const start = window.pageYOffset

const range = end – start

let position = 0

var move = function() {

const elapsedTime = Date.now() – startTime

const progress = elapsedTime / duration

position = start + range * easeOut(progress)

if (progress < 1) {

window.scrollTo(0, position)

requestAnimationFrame(move)

} else {

window.scrollTo(0, end)

return

}

}

requestAnimationFrame(move)

}

_.setEnquete = function(el) {

const revealArea = el.querySelector(classes.revealArea)

let linkBoxAll = Array.from(el.querySelectorAll(classes.questionItem))

el.addEventListener(‘change’, function(e) {

let checkedLength = 0;

let self = e.target

let current = self.closest(classes.questionItem)

let currentNo = Array.prototype.indexOf.call(linkBoxAll, current)

let next;

let scrollPoint = false;

let noScroll = current.classList.contains(“no-scroll”) ? true : false;

current.classList.remove(‘not-checked’);

const hiddenImages = current.querySelectorAll(‘.hidden-image’);

hiddenImages.forEach((img) => {

img.style.display = ‘none’;

if (img.dataset.sid == self.dataset.show) {

img.style.display = ‘block’;

noScroll = true;

}

});

linkBoxAll.forEach(function(linkBox) {

if (linkBox.querySelector(‘input:checked’)) checkedLength++;

})

if (checkedLength === linkBoxAll.length) {

revealArea.classList.remove(‘is-hidden’)

scrollPoint = revealArea.getBoundingClientRect().top + window.pageYOffset

} else if (linkBoxAll.length === currentNo + 1) {

let notChecked = linkBoxAll.filter(linkBox => !linkBox.querySelector(‘input:checked’));

notChecked.forEach(linkBox => linkBox.classList.add(‘not-checked’));

scrollPoint = notChecked[0].getBoundingClientRect().top + window.pageYOffset;

noScroll = false;

} else {

next = linkBoxAll[currentNo + 1]

if (next) scrollPoint = next.getBoundingClientRect().top + window.pageYOffset;

}

if (scrollPoint && !noScroll) {

_.scrollTo(scrollPoint, setting.duration)

}

})

}

_.init = function() {

Array.from(document.querySelectorAll(classes.target), el => {

_.setEnquete(el);

});

}

})(sbScrollRevealEnqueteWithRevealHiddenCase)

</script>

<script>

document.addEventListener(‘DOMContentLoaded’, sbScrollRevealEnqueteWithRevealHiddenCase.init, false);

</script>

<div class=”question-reveal-scroll js-scroll-reveal-enquete-with-reveal”>

<form name=”form-scroll-enquete”>

<div class=”questionArea js-form-radio”>

<div class=”question__numBox”>

<ul class=”numItems”>

<li class=”item current”>01</li>

<li class=”item”>02</li>

<li class=”item”>03</li>

<li class=”item”>04</li>

</ul>

</div>

<h2 class=”title”><span class=”mark”>Q1</span>今の体型を変えたいと思いますか？<br></h2>

<div class=”questionImg”>

<picture>

<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3249985/3e598dff-fb91-422f-9a1d-25973149ca8f.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3249985/3e598dff-fb91-422f-9a1d-25973149ca8f.jpg” width=”735″ height=”490″ draggable=”false” class=”lazyload”>

</picture>

</div>

<div class=”linkbox btn-two”><input id=”q1-1″ type=”radio” name=”q1″ data-show=”q1-1″><label for=”q1-1″>

<div class=”btn”>はい</div>

</label><input id=”q1-2″ type=”radio” name=”q1″ data-show=”q1-2″><label for=”q1-2″>

<div class=”btn”>いいえ</div>

</label></div>

</div>

<div class=”questionArea js-form-radio”>

<div class=”question__numBox”>

<ul class=”numItems”>

<li class=”item”>01</li>

<li class=”item current”>02</li>

<li class=”item”>03</li>

<li class=”item”>04</li>

</ul>

</div>

<h2 class=”title”><span class=”mark”>Q2</span>一番気になる部位はどこですか？<br></h2>

<div class=”questionImg”>

<picture>

<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3249994/3c4798f0-dd3e-432b-b067-65ce5340a4e0.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3249994/3c4798f0-dd3e-432b-b067-65ce5340a4e0.jpg” width=”735″ height=”490″ draggable=”false” class=”lazyload”>

</picture>

</div>

<div class=”linkbox”><input id=”q2-1″ type=”radio” name=”q2″ data-show=”q2-1″><label for=”q2-1″>

<div class=”btn”>お腹周り</div>

</label><input id=”q2-2″ type=”radio” name=”q2″ data-show=”q2-2″><label for=”q2-2″>

<div class=”btn”>二の腕</div>

</label><input id=”q2-3″ type=”radio” name=”q2″ data-show=”q2-3″><label for=”q2-3″>

<div class=”btn”>足、太もも</div>

</label><input id=”q2-4″ type=”radio” name=”q2″ data-show=”q2-4″><label for=”q2-4″>

<div class=”btn”>顔まわり</div>

</label></div>

</div>

<div class=”questionArea js-form-radio”>

<div class=”question__numBox”>

<ul class=”numItems”>

<li class=”item”>01</li>

<li class=”item”>02</li>

<li class=”item current”>03</li>

<li class=”item”>04</li>

</ul>

</div>

<h2 class=”title”><span class=”mark”>Q3</span>痩せることができたら何がしたいですか？<br></h2>

<div class=”questionImg”>

<picture>

<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3250021/17141f66-fa6e-48f4-abea-f5f56912e938.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3250021/17141f66-fa6e-48f4-abea-f5f56912e938.jpg” width=”735″ height=”490″ draggable=”false” class=”lazyload”>

</picture>

</div>

<div class=”linkbox”><input id=”q3-1″ type=”radio” name=”q3″ data-show=”q3-1″><label for=”q3-1″>

<div class=”btn”>着たかった洋服を着て楽しみたい！</div>

</label><input id=”q3-2″ type=”radio” name=”q3″ data-show=”q3-2″><label for=”q3-2″>

<div class=”btn”>罪悪感なく美味しいものを食べたい！</div>

</label><input id=”q3-3″ type=”radio” name=”q3″ data-show=”q3-3″><label for=”q3-3″>

<div class=”btn”>周りの人から褒められたい！</div>

</label><input id=”q3-4″ type=”radio” name=”q3″ data-show=”q3-4″><label for=”q3-4″>

<div class=”btn”>好きな人にアプローチしたい！</div>

</label></div>

</div>

<div class=”questionArea js-form-radio”>

<div class=”question__numBox”>

<ul class=”numItems”>

<li class=”item”>01</li>

<li class=”item”>02</li>

<li class=”item”>03</li>

<li class=”item current”>04</li>

</ul>

</div>

<h2 class=”title”><span class=”mark”>Q4</span>理想の姿になれる医療痩身に興味はありますか？<br></h2>

<div class=”questionImg”>

<picture>

<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3250029/9b57400a-2fdb-4e8b-9e21-31765a29572e.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3250029/9b57400a-2fdb-4e8b-9e21-31765a29572e.png” width=”735″ height=”490″ draggable=”false” class=”lazyload”>

</picture>

</div><a href=”#heading1″>

<div class=”linkbox btn-two”><input id=”q4-1″ type=”radio” name=”q4″ data-show=”q4-1″><label for=”q4-1″>

<div class=”btn”>はい</div>

</label><input id=”q4-2″ type=”radio” name=”q4″ data-show=”q4-2″><label for=”q4-2″>

<div class=”btn”>いいえ</div>

</label></div>

<div class=”step_arr”><span></span><span></span><span></span></div>

</a>

</div>

</form>

</div>

———-【CSS】———-

.question-reveal-scroll {

width: 970px;

max-width: 100%;

font-size: 16px;

background-color: #fff;

margin: 0 auto 20px;

padding: 0;

line-height: 1.5;

box-sizing: border-box;

}

.question-reveal-scroll .questionArea {

display: flex;

flex-direction: column;

}

.question-reveal-scroll .question__numBox {

width: 100%;

height: auto;

}

.question-reveal-scroll .question__numBox .numItems {

width: 100%;

list-style: none;

display: flex;

justify-content: center;

align-items: center;

padding-left: 0;

}

.question-reveal-scroll .question__numBox .numItems .item {

font-size: 20px;

color: #fff;

background: #ccc;

width: 60px;

height: 60px;

border-radius: 30px;

display: flex;

justify-content: center;

align-items: center;

margin-right: 2em;

position: relative;

}

.question-reveal-scroll .question__numBox .numItems .item.current {

background: #EAA8BF;

}

.question-reveal-scroll .question__numBox .numItems .item:after {

content: ‘→’;

position: absolute;

top: 50%;

right: -2em;

color: #ccc;

font-size: 14px;

transform: translateY(-50%);

}

.question-reveal-scroll .question__numBox .numItems .item:last-of-type {

margin-right: 0;

}

.question-reveal-scroll .question__numBox .numItems .item:last-of-type:after {

content: none;

}

.question-reveal-scroll .title {

width: calc(100% – 10px);

color: #fff;

background-color: #EAA8BF;

font-size: 20px;

font-weight: 600;

margin: 0 auto 30px;

padding: 15px 5px;

display: flex;

flex-direction: column;

align-items: center;

}

.question-reveal-scroll .title .mark {

font-size: 34px;

margin-right: 15px;

color: #fff;

line-height: 1.1;

}

.question-reveal-scroll .questionImg,

.questionImg img {

width: 100%;

height: auto;

}

.question-reveal-scroll .linkbox {

width: 100%;

margin: 0 auto 40px;

padding: 0 15px;

text-align: left;

box-sizing: border-box;

}

.question-reveal-scroll input {

display: none;

}

.question-reveal-scroll input+label {

cursor: pointer;

border: none;

display: block;

}

.question-reveal-scroll input:not(:first-of-type)+label {

margin-top: 10px;

}

.question-reveal-scroll input+label .btn {

font-size: 14px;

border: 1px solid #ccc;

border-radius: 10px;

padding: 20px 0 20px 50px;

font-weight: bold;

background-color: #eee;

line-height: 1.6;

position: relative;

display: block;

}

.question-reveal-scroll input:checked+label .btn {

background-color: #3498db;

color: #ffffff;

}

.question-reveal-scroll input+label .btn::before {

width: 14px;

height: 14px;

top: 50%;

left: 10px;

margin-top: -8px;

background: #f3f3f3;

border: 1px solid #ccc;

position: absolute;

content: ”;

transition: all 0.2s;

}

.question-reveal-scroll input[type=’radio’]+label .btn::before {

border-radius: 100%;

}

.question-reveal-scroll input+label .btn:focus {

outline: none !important;

}

.question-reveal-scroll input[type=’checkbox’]+label .btn:after {

top: 55%;

left: 13px;

width: 8px;

height: 4px;

margin-top: -8px;

border-left: 2px solid #3498db;

border-bottom: 2px solid #3498db;

transform: rotate(-45deg) scale(0.5);

position: absolute;

transition: all 0.2s;

content: ”;

opacity: 0;

}

.question-reveal-scroll input[type=’radio’]+label .btn:after {

top: 48%;

left: 13px;

width: 10px;

height: 10px;

margin-top: -4px;

background: #3498db;

transform: scale(2);

border-radius: 100%;

opacity: 0;

position: absolute;

content: ”;

transition: all 0.2s;

}

.question-reveal-scroll input[type=’checkbox’]:checked+label .btn:after {

opacity: 1;

transform: rotate(-45deg) scale(1);

}

.question-reveal-scroll input[type=’radio’]:checked+label .btn::after {

opacity: 1;

transform: scale(1);

}

.question-reveal-scroll ::-moz-focus-inner {

border-color: transparent;

}

.question-reveal-scroll .linkbox.btn-two {

text-align: center;

}

.question-reveal-scroll .linkbox.btn-two label {

width: 48%;

padding: 10px;

box-sizing: border-box;

display: inline-block;

}

.question-reveal-scroll .linkbox.btn-two .btn {

font-size: 34px;

color: #fff;

background: #3f3f3f;

padding: 10px;

text-align: center;

border: none;

border-radius: 10px;

box-shadow: 0 10px 0 #000;

transition: all 0.2s;

cursor: pointer;

}

.question-reveal-scroll .linkbox.btn-two input:checked+label .btn {

background: #bc0a1f;

box-shadow: 0 10px 0 #7d1521;

}

.question-reveal-scroll .linkbox.btn-two input+label .btn::before,

.question-reveal-scroll .linkbox.btn-two input+label .btn::after {

content: none;

}

.question-reveal-scroll .questionArea.not-checked .linkbox::after {

content: “回答してください”;

font-size: 14px;

color: #ff0000;

display: block;

text-align: right;

padding: 1em;

}

.revealarea {

font-size: 1.2rem;

text-align: left;

margin: 3rem auto 0;

padding: 0;

box-sizing: border-box;

}

.revealarea img {

max-width: 100%;

height: auto;

}

.is-hidden {

display: none;

}

.hidden-image {

display: none;

margin: 10px 0;

}

.hidden-image img {

margin: 0 auto;

}

.linkbox.btn-two.vertical {

display: grid;

width: 80%;

margin: 10px auto;

}

.linkbox.btn-two.vertical label {

display: block;

width: 100%;

}

@media screen and (min-width: 700px) {

.question-reveal-scroll .questionArea {

margin: 50px auto 80px;

max-width: 970px;

}

.question-reveal-scroll .title {

margin: 0 0 20px;

font-size: 24px;

}

.question-reveal-scroll .title .mark {

font-size: 28px;

}

.question-reveal-scroll input+label .btn {

font-size: 24px;

}

.question-reveal-scroll .linkbox {

margin: 70px auto 20px;

}

.question-reveal-scroll input+label .btn::before {

width: 28px;

height: 28px;

top: 41%;

}

.question-reveal-scroll input[type=’checkbox’]+label .btn::before {

top: 39%;

width: 30px;

height: 30px;

}

.question-reveal-scroll input[type=’checkbox’]+label .btn:after {

top: 51%;

left: 16px;

width: 16px;

height: 8px;

border-left-width: 4px;

border-bottom-width: 4px;

}

.question-reveal-scroll input[type=’radio’]+label .btn:after {

top: 43%;

left: 15px;

width: 20px;

height: 20px;

}

.question-reveal-scroll .linkbox.btn-two .btn {

font-size: 50px;

}

}

.step_arr {

position: relative;

padding-top: 22vw;

margin-top: -4vw;

}

.step_arr span {

position: absolute;

top: 0;

left: 50%;

width: 10vw;

height: 10vw;

margin-left: -5vw;

border-left: 1px solid #333;

border-bottom: 1px solid #333;

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-animation: sdb 2s infinite;

animation: sdb 2s infinite;

opacity: 0;

box-sizing: border-box;

}

.step_arr span:nth-of-type(1) {

-webkit-animation-delay: 0s;

animation-delay: 0s;

}

.step_arr span:nth-of-type(2) {

top: 4vw;

-webkit-animation-delay: 0.15s;

animation-delay: 0.15s;

}

.step_arr span:nth-of-type(3) {

top: 8vw;

-webkit-animation-delay: 0.3s;

animation-delay: 0.3s;

}

@media screen and (min-width:700px) {

.step_arr {

position: relative;

padding-top: 136px;

margin-top: -25px;

}

.step_arr span {

width: 62px;

height: 62px;

margin-left: -31px;

}

.step_arr span:nth-of-type(2) {

top: 24.8px;

}

.step_arr span:nth-of-type(3) {

top: 49.6px;

}

}

@keyframes sdb {

0% {

opacity: 0;

}

50% {

opacity: 1;

}

100% {

opacity: 0;

}

}
widgetマスター

モデレータ
2023年11月21日 15:53

確認いただきありがとうございます！

上記のコードはHTMLとCSSがあるのですが、分けて貼り付けていただいたか今一度確認いただけないでしょうか？

よろしくお願いします！
widgetマスター

モデレータ
2023年11月21日 17:24

失礼いたしました、共有したコードが文字化けしていたようです。

下記コードに書き換えていただけますか？

===============【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;

}
widgetマスター

モデレータ
2023年11月21日 21:07
なぜかこちらに投稿すると文字化けが起こってしまう箇所があるため、貴社アカウントに移させていただきました！widgetをコピーして、お好きな箇所にペーストしてお使いください！

https://app.squadbeyond.com/ab_tests/o-ncYSyOsDKIMqUVw/articles
スクリーンショット-2023-11-21-21.06.41.png 97 KB 画像ファイル — クリックして見る



コピーダウンロードリンク

Page 10 of 21

← 1 … 9 10 11 … 21 →

widgetマスター

コミュニティのコメント