• widgetマスター

    モデレータ
    2023年12月22日 13:20

    お待たせいたしました🙌

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

    ①「回答を完了する」ボタンを追加

    HTMLの116行目「<p class=”quiz_cont_progress”><span>4</span>/4</p>」の後に下記記述を追加

    
    
    <div class="wrap-btn-forword"><button onclick="quizResultNotChange.questionFoward(this)" class="btn-forword js-btn-forword" type="button">回答を完了する</button></div>

    https://t.gyazo.com/teams/squadbeyond/dcda4be18184b88a56b0245767959a69.png

    ②回答後のコンテンツを隠せるように移動する

    HTMLの117行目から125行目の記述を削除

    https://t.gyazo.com/teams/squadbeyond/89bd73a28d44b996497bcd70a59843de.png

    121行目「 <div class=”quiz_result is-hidden” id=””></div>」の間に下記記述を追加

    <p class="quiz_cont_image"><video allowfullscreen="true" autoplay="true" controlslist="nodownload" loop="true" muted="true" name="media" playsinline="" class="lazyload">

    <source type="video/mp4" src="https://file.mysquadbeyond.com/uploads/article_photo/photo/3041519/a72da37f-8983-46b4-906b-ef64949da34b.mp4">

    </video></p>

    <br>

    <div class="downArrow movebtn"><span></span><span></span><span></span></div>

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

    <font face="sans-serif">かんたん無料登録で<br>ホテルをみてみる</font>

    </a></div>

    https://t.gyazo.com/teams/squadbeyond/a27b8de23550333ff638220dff663d4a.png

    ③CSSの調節を行う

    421行目を削除

    変更前

    .quiz_result {

    padding: 0 10px;

    display: flex;

    width: auto;

    justify-content: center;

    position: relative;

    }

    変更後

    .quiz_result {

    padding: 0 10px;

    width: auto;

    justify-content: center;

    position: relative;

    }

    下記記述を一番下に追加

    .video-container {
                position: relative;
                width: 513px; /* ビデオの幅に合わせる */
                height: 578px; /* ビデオの高さに合わせる */
            }
    
            video {
                width: 100%;
                height: 100%;
                object-fit: cover; /* アスペクト比を保ちながらコンテナに収める */
            }

    プレビュー:https://sb-draft-preview.squadbeyond.com/articles/ZiMkearyupxnQG_pqew/draft?token=fa1808fae6a25f1156e1525244457b4a