• widgetマスター

    モデレータ
    2023年12月21日 16:08

    修正方法を案内させていただきます🙌

    ① 最後の設問のある Widget の大枠にクラスを追加

    最後の設問のある Widget の大枠に final-question というクラス名を追加して下さい。

    
    
    <div class="blackwood_box final-question"> <!-- ← ここに final-question を追加してます -->
      <div class="choices_box">
        <!-- 1つ分の選択肢はここからコピー。 -->
        <input type="checkbox" name="choice04" id="choice04-1" class="selecter">
        <label for="choice04-1" class="choice-check" style="text-align: center;">
          <font face="serif" style="">記憶力
            <span style="font-size: 13px;" class="sb-fs-free">※1</span>を維持したい
          </font>
        </label>
        <!-- 1つ分の選択肢はここまでコピー -->

    ② ボタンのある Widget のHTML構成を変更

    ボタンのある Widget のHTML構成を下記にしてください。

    また \申込1分/ のテキストもこの中に移動してください。

    画像もこの中に移動してください。

    
    

    <div class="final-answer-area">

    <div class="abc">

    <img src="https://file.mysquadbeyond.com/uploads/article_photo/photo/3394189/f967dd39-9d65-490c-b719-19b07b867dfe.png" height="463" width="463" draggable="false" class="lazyload">

    </div>

    <div style="font-family: serif; text-align: center;"><strong style="color: rgb(250, 99, 99); font-size: 21px;"><br> \申込1分/

    </strong></div>

    <div class="btn-area"><!--下記ooooo部分にリンク先URLを置いてください。もしくは左に表示のボタンテキストを選択した後に上部のリンクボタンから追加可能--><a href="ooooo">

    <font color="#ffffff" style="" face="serif">無料で<br>お得にはじめてみる</font>

    </a></div>

    </div>

    ③CSSに下記コードを追加

    .abc {

    display: flex;

    justify-content: center;

    align-items: center;

    }

    ④ Javascript body に下記コードを追加

    
    
    <script>
    	const finalAnswerArea = document.querySelector('.final-answer-area');
    	const finalQuestion = document.querySelector('.final-question');
    	const choicesBox = finalQuestion.querySelector('.choices_box');
    	finalAnswerArea.style.display = 'none';
    	choicesBox.addEventListener('click', () => {
    		finalAnswerArea.style.display = 'block';
    	});
    </script>

    【修正後プレビュー】

    https://sb-draft-preview.squadbeyond.com/articles/HKbqCMZJfOAmqFfhxGKQ/draft?token=ec9694357d7021574d5f6667a66e7278