• widgetマスター

    モデレータ
    2023年9月13日 10:58

    最後の設問および最終コンテンツがWidgetの仕様に沿っていないために生じております。

    Widgetの仕様通り、最後の設問および最終コンテンツも他の設問と同じHTML構成にする事で、ご要望通りの動作となります。

    修正の流れとしましては下記になります。

    1. 最後の設問に設定されている ページ内リンクの a タグを削除
    2. 矢印のHTMLを設問と同じHTML内に設置
    3. お好みに応じて、横線を削除してデザインを整える

    1. 最後の設問に設定されている ページ内リンクの a タグを削除

    [ 修正前 ]

    <a href= "#heading1" draggable='false'> ※ここを削除する
    <div class="questionArea js-form-radio">
    <h2 class="title">ボディアーキのどこに魅力を感じますか?</h2>
    ... 省略 ...
     <a/>※ここを削除する

    [ 修正後 ]

    <div class="questionArea js-form-radio">
    <h2 class="title">ボディアーキのどこに魅力を感じますか?</h2>
    ... 省略 ...
    </div>

    2. 矢印のHTMLを設問と同じHTML内に設置

    現在Widget外に設置されている矢印のWidgetを、設問と同じHTML内に設置します。

    CSSもまるっと切り取ってアンケートのCSSの一番下に挿入してください。

    なお、コードを移した後は、もともと設置していた矢印のWidgetは削除してください。

    <div class="questionArea js-form-radio">
    ... 設問1 ...
    </div>
    <div class="questionArea js-form-radio">
    ... 設問2 ...
    </div>
    <div class="questionArea js-form-radio">
    ... 設問3 ...
    </div>
    <div class="questionArea js-form-radio">
    ... 設問4 ...
    </div>
    <div class="questionArea js-form-radio">  ※追加箇所ここから
    <div class="cp_arrows">
    <div class="cp_arrow cp_arrowfirst"></div>
    <div class="cp_arrow cp_arrowsecond"></div>
    </div>
    </div>  ※追加箇所ここまで
    </form>
    </div> 

    3. お好みに応じて、横線を削除してデザインを整える

    ステップ2までHTMLを編集すると、矢印の下に横線が発生します。

    この横線を削除したい場合は、CSS内を以下のように調整してください。

    [ 修正前 ]

    .question-reveal-scroll .questionArea {

    margin-bottom: 30px;

    padding-bottom: 30px;

    display: flex;

    flex-direction: column;

    border-bottom: 1px solid #cccccc; ※none に変更

    }


    [ 修正後]

    .question-reveal-scroll .questionArea {

    margin-bottom: 30px;

    padding-bottom: 30px;

    display: flex;

    flex-direction: column;

    border-bottom: none;

    }