1. 概要

他のゴールなどの複数の分岐先へ遷移させるために、ステップ内に複数のボタンを表示します。

2. 設定方法

ステップへHTMLブロックを追加し、「3. サンプルコード」のコードを適宜修正して貼り付けします。

3. サンプルコード

あくまでサンプルコードとなりますので、作成したいデザインや内容を反映させてご利用ください。

分岐の選択肢として利用する（クリックで他のゴールなどへ遷移させる）

<div class="onb-custom-button">
  <ul class="onb-custom-button__list">
    <li class="onb-custom-button__item">
      <button class="onb-custom-button__btn" onclick="STANDSMotion.changeGoal('ゴールID')">
        <span class="onb-custom-button__text">ツアーの<br>作り方を<br>見る</span>
      </button>
    </li>
    <li class="onb-custom-button__item">
      <button class="onb-custom-button__btn" onclick="STANDSMotion.changeGoal('ゴールID')">
        <span class="onb-custom-button__text">ポップアップの<br>作り方を<br>見る</span>
      </button>
    </li>
    <li class="onb-custom-button__item">
      <button class="onb-custom-button__btn" onclick="STANDSMotion.changeGoal('ゴールID')">
        <span class="onb-custom-button__text">ヒントの<br>作り方を<br>見る</span>
      </button>
    </li>
  </ul>
</div>

<style>
  .onb-custom-button {
    width: 100%;
    padding: 5px;
    font-family: 'Noto Sans', sans-serif;
  }

  .onb-custom-button__list {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .onb-custom-button .onb-custom-button__item {
    width: 30%;
    margin: 10px 5px;
    list-style: none !important;
    list-style-type: none !important;
  }

  .onb-custom-button__btn {
    position: relative;
    width: 100%;
    height: 150px;
    color: #000000;
    background-color: transparent;
    border: 1px solid #4169e1;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    text-align: left;
    font-size: 16px;
  }

  .onb-custom-button__btn:hover {
    background-color: #4169e1;
    color: white;
    border-color: #4169e1;
  }

  .gBtn.g-modal-next {
    display: none;
  }

  .onb-custom-button__text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: left;
    width: 100%;
    height: 100%;
  }
</style>