メインコンテンツへスキップ
  1. Repro Help&Support
  2. ReproApp
  3. トレーニング
  4. HTMLテンプレート
loading

    テンプレートを応用した編集方法

    Repro Support
    • 更新

    このページではアプリ内メッセージのHTML（Webview）のテンプレートを応用したメッセージのカスタム方法をご紹介します。

    カスタム方法

    ボタンを2つ以上設定する

    ボタンを角丸にする

    キャンペーン全体を角丸にする

    ボタンのフォントサイズを変える

    右上バツボタンを消す

    画像にGIFアニメーションを設定する

    ボタンを2つ以上設定する

    1. ボタンがあるテンプレートを選択する
    2. キャンペーンタイプがスタンダードの状態で入力できる項目を事前に入力する
    3. スタンダードから、カスタムに変更する
    4. 「HTML」タブ内 repro--dialog--btn-container クラス内のrepro--btnクラスコードをコピー＆ペーストする
    5. ペーストしたコード内のhref要素がdeeplink先となる為、遷移させたいdeeplink先に変更する
    6. ペーストしたコード内のボタン文言を変更する

    注意事項

    • ボタン押下のCVイベントは2つまでの設定の為、上記コードで追加したボタンを押下した際にCVイベントとして計測されない仕様になっております。
      特定のボタンの計測を除外したい場合：
      data-repro--secondary-btn を data-repro--close 属性に変更してください。
      特定のボタンの計測を追加したい場合：
      対象のボタンのclassに       data-repro--primary-btn data-repro--primary-cta-event 、もしくは data-repro--secondary-btn data-repro--secondary-cta-event を 追加してください。
    • data-repro--primary-btn、data-repro--secondary-btn 、 data-repro--close のいずれの属性も付与されていないボタンがあると、そのボタンをタップしてもin-appが消えないボタンになってしまうのでご注意ください。

    ボタンを角丸にする

    1. ボタンがあるテンプレートを選択する
    2. キャンペーンタイプがスタンダードの状態で入力できる項目を事前に入力する
    3. スタンダードから、カスタムに変更する
    4. 「CSS」タブ内.repro--btn {}の中に、以下1行を追加し、pxを調整する
      ※ピクセル数が大きいほど、ボタンの角の丸みが強くなります

    CSS

     

    1

    border-radius: 10px;

    キャンペーン全体を角丸にする

    1. ダイアログタイプのテンプレートを選択する
    2. キャンペーンタイプがスタンダードの状態で入力できる項目を事前に入力する
    3. スタンダードから、カスタムに変更する
    4. 「CSS」タブ内.repro--dialog--container {}の中に、以下1行を追加し、pxを調整する
      ※ピクセル数が大きいほど、ボタンの角の丸みが強くなります

    CSS

     

    1

    border-radius: 30px;

    ボタンのフォントサイズを変える

    1. ボタンがあるテンプレートを選択する
    2. キャンペーンタイプがスタンダードの状態で入力できる項目を事前に入力する
    3. スタンダードから、カスタムに変更する
    4. 「CSS」タブ内.repro--btn--text {}の中の、font-sizeを任意の数値に変更する

    注意事項

    • repro--btn--textは2箇所存在します。
      /* Button ======== */ の方はタブレットやPCで表示したときの文字サイズ、/* SP ====== */ の方はスマホで表示するときの文字サイズになります。
    • 文字が大きすぎると、デザインが崩れる可能性があります。実機端末での配信テストは必ず行いましょう。

    右上バツボタンを消す

    1. ダイアログタイプのテンプレートを選択する
    2. キャンペーンタイプがスタンダードの状態で入力できる項目を事前に入力する
    3. スタンダードから、カスタムに変更する
    4. 「HTML」タブ内下記部分を削除する

     

    1

    2

    3

    4

    5

    <div class="repro--close-btn" style="background-color:rgba(0,0,0,1.0);border-color:rgba(255,255,255,1.0);" data-repro--close><span></span>

        <div style="background-color:rgba(255,255,255,1.0);"><span></span>

          <div style="background-color:rgba(255,255,255,1.0);"></div><span></span>

        </div><span></span>

      </div>

    画像にGIFアニメーションを設定する

    1. 画像つきのテンプレートを選択する
    2. キャンペーンタイプがスタンダードの状態で入力できる項目を事前に入力する
    3. スタンダードから、カスタムに変更する
    4. 「HTML」タブ下部にある「画像の追加」から、GIF形式の画像をアップロードする

     

    関連記事