[widgetマスター]

下記のコードを追加してみてください💫

javascript head

<style>
body .article-body {
    padding-top: 0 !important;
}
</style>

CSS

video {
    margin: 0 !important;
}

ベストアンサー

[widgetマスター]

CSSの「.speech-bubble」のclassに「transform: rotate(-5deg);」を追加してください！

.speech-bubble {
    max-width: 40%;
    background: #efefef;
    border: 1px solid #a7a7a7;
    border-radius: 4px;
    box-shadow: 4px 4px 0 0#ccc;
    padding: 15px;
    line-height: 1.3;
    margin: 10px auto 40px;
    position: relative;
    box-sizing: border-box;
    transform: rotate(-5deg); /* 追加 */
}

ベストアンサー

[widgetマスター]

Widgetには修正箇所が無いので新しくHTMLタグとCSSを追加して対応してみてください！

HTML

<span class="bg">背景をつけたいテキスト</span>

・背景をつけたいテキストを適当なclassをつけた<span>タグで囲う

CSS

.bg {
    background-color: #ffffff;
    display: inline-block;
    padding: 10px;
}

・上記で追加したclassに対して背景色と余白を設定する

ベストアンサー

[widgetマスター]

<div class=”revealarea js-reveal is-hidden”>の「is-hidden」を削除してください！

そうすれば最初から表示されます😄

ベストアンサー

[widgetマスター]

下記 javascript を調整していただけますでしょうか？

[ 調整前 ]
let scrollPoint = next.getBoundingClientRect().top + window.pageYOffset;

[ 調整後 ]
let scrollPoint = next.getBoundingClientRect().top + window.pageYOffset - 50; //50px 上部に余白を持たせてます。こちらの数値はお好みで調整してください。 

ベストアンサー

[widgetマスター]

CSSにコードを追加することで小さくできます！

「.think p 」の箇所に「font-size: 18px;」を追加してみてください！

(数字は好みに合わせて調節してください)

追加後

.think p {
  margin: 0;
  padding: 0;
  letter-spacing: -0.01em;
  font-size: 18px;
}

考え事の吹き出し（左アイコン）吹き出し.png 19 KB 画像ファイル — クリックして 見る

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

ベストアンサー

[widgetマスター]

前提として、こちらの選択肢を変更すると他の設問の見た目にも影響します！

なのでまず変更したい選択肢の修正方法をお伝えした後に他の設問の修正方法もお伝えします！

【変更したい選択肢の修正方法】

CSSの「.question-reveal-scroll input+label .btn」の余計な記述を削除して、高さを指定する記述を追加します！

.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: #EBEBEB;
    line-height: 1.6;
    position: relative;
    /*display: block;これ不要*/

/*ここから追加*/
    height: 60px!important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

【他の設問の修正方法】

CSSの「.question-reveal-scroll .linkbox.btn-two .btn」に記述を追加します。

.question-reveal-scroll .linkbox.btn-two .btn {
    font-size: 14px;
    color: #fff;
    background: #8f8d8d;
    padding: 10px;
    text-align: center;
    border: none;
    border-radius: 8px;
    box-shadow: 0 6px 0 #828080;
    transition: all 0.2s;
    cursor: pointer;

/*ここから追加*/
    height: auto!important;
    display: block;
}

修正後アンケート選択肢により隠しコンテンツを表示（スクロール・最後の質問に回答すると下部表示）※要javascriptアンケート.png 37 KB 画像ファイル — クリックして 見る

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

ベストアンサー

[widgetマスター]

<input>タグのtypeをtextからnumberに変更することで数値に限定することができます!

【変更前】

<div class="wrap-input-text">
    約<input type="text" placeholder="0">万円
</div>

【変更後】

<div class="wrap-input-text">
    約<input type="number" placeholder="0">万円
</div>

入力欄付きリンク2.jpg 135 KB 画像ファイル — クリックして 見る

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

ベストアンサー

[widgetマスター]

まずはHTMLのYes/Noボタンにしたい部分の<div class=”linkbox”> にbool クラスを追加してください！

【変更前】

<div class="linkbox">
    <input id="q1-yes" type="radio" name="q1" value="yes"><label for="q1-yes">
        <div class="btn">Yes</div>
    </label><input id="q1-no" type="radio" name="q1" value="no"><label for="q1-no">
        <div class="btn">No</div>
    </label>
</div>

【変更後】

<div class="linkbox bool">
    <input id="q1-yes" type="radio" name="q1" value="yes"><label for="q1-yes">
        <div class="btn">Yes</div>
    </label><input id="q1-no" type="radio" name="q1" value="no"><label for="q1-no">
        <div class="btn">No</div>
    </label>
</div>

その後にこちらのCSSを追加してください！

※既存のボタンを上書きするためそれより下の行に追加してください（一番下でOK）

.question-reveal-scroll .linkbox.bool {
  list-style: none;
  overflow: hidden;
  margin: 0;
  padding: 4.68% 9.37% 5% 9.37%;
  display: flex;
  box-sizing: border-box;
}

 .question-reveal-scroll .linkbox.bool label {
  width: 50%;
}

 .question-reveal-scroll .linkbox.bool label .btn {
  display: block;
  width: 100%;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 10%;
  border-radius: 8px;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  font-weight: bold;
  background: #aaa;
  border-bottom: 5px solid #666;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
  transition: margin-top 0.1s, border-bottom-width 0.1s;
  box-sizing: border-box;
}

 .question-reveal-scroll .linkbox.bool label:nth-of-type(1) .btn {
  color: #fff;
  background: #c9171e;
  border-color: #752100;
}

 .question-reveal-scroll .linkbox.bool label:nth-of-type(2) .btn {
  color: #fff;
  background: #444444;
  border-color: #222222;
}

 .question-reveal-scroll .linkbox.bool input[type=radio]:checked+label .btn,
 .question-reveal-scroll .linkbox.bool label .btn:hover {
  margin-top: 3px;
  border-bottom-width: 2px;
}

ベストアンサー

[widgetマスター]

CSSの「.choice-group .swiper」の「overflow: clip;」を削除して下さいませ。

.choice-group .swiper {
  ...省略...
  overflow: clip; ← これを削除して下さい
  ...省略...
}

ベストアンサー