[Next/Done(次へ/完了)]ボタンでテキストを変更する方法

Last Updated 4月 4, 2023

質問

ステップの[Next(次へ)]、[Back(戻る)]、[Done(完了)]ボタンのテキストを変更する方法を知りたいです。

回答

ステップのボタンテキストの変更は、CSSを使用して行うことができます。

まず、以下の手順でステップIDを見つける必要があります。

  1. ステップオプションを開きます(フローからクリックすると実行できます)
  2. メモに移動します
  3. スクロールして、「For CSS Adjustments, use balloon ID」の横にあるIDを見つけてください
  4. このIDをコピーして、以下の「xxxxxx」の代わりに貼り付けてください
    1. これを複数のステップで行いたい場合は、ステップごとに個別のCSSを追加する必要があります

[Next(次へ)]ボタンのテキストを変更する

以下の両方のコードブロックをコピーして、エディタ -> Customize -> CSSの[Global CSS(グローバルCSS)]タブに貼り付けます。 「new text(新しいテキスト)」を、お好みのテキストに置き換えます。

div#walkme-balloon-XXXXXXX button.walkme-custom-balloon-button.walkme-custom-balloon-normal-button.walkme-custom-balloon-next-button.walkme-action-next.walkme-click-and-hover span.walkme-custom-balloon-button-text {
!important;

font-size:0px !important;

}

div#walkme-balloon-xxxxxxx button.walkme-custom-balloon-button.walkme-custom-balloon-normal-button.walkme-custom-balloon-next-button.walkme-action-next.walkme-click-and-hover span.walkme-custom-balloon-button-text::before {

content: "new text" !important;

visibility: visible !important;

font-size: 12px !important;

}

[Back(戻る)]ボタンのテキストを変更する
以下の両方のコードブロックをコピーして、エディタ -> Customize -> CSSの[Global CSS(グローバルCSS)]タブに貼り付けます。 「new text(新しいテキスト)」を、お好みのテキストに置き換えます。

div#walkme-balloon-XXXXXXX button.walkme-custom-balloon-button.walkme-custom-balloon-normal-button.walkme-custom-balloon-back-button.walkme-action-back.walkme-click-and-hover span.walkme-custom-balloon-button-text {
font-size: 0px!important;
}

div#walkme-balloon-xxxxxxx button.walkme-custom-balloon-button.walkme-custom-balloon-weak-button.walkme-custom-balloon-back-button.walkme-action-back.walkme-click-and-hover span.walkme-custom-balloon-button-text::before {

content: "new text" !important;

visibility: visible !important;

font-size: 12px !important;

}

[Done(完了)]ボタンのテキストを変更する

以下の両方のコードブロックをコピーして、エディタ -> Customize -> CSSの[Global CSS(グローバルCSS)]タブに貼り付けます。 「new text(新しいテキスト)」を、お好みのテキストに置き換えます。

div#walkme-balloon-xxxxxxxbutton.walkme-custom-balloon-button.walkme-custom-balloon-normal-button.walkme-custom-balloon-done-button.walkme-action-done.walkme-click-and-hover span.walkme-custom-balloon-button-text {

font-size: 0px !important;

}

div#walkme-balloon-xxxxxxxbutton.walkme-custom-balloon-button.walkme-custom-balloon-normal-button.walkme-custom-balloon-done-button.walkme-action-done.walkme-click-and-hover span.walkme-custom-balloon-button-text::before {

content: "new text" !important;

visibility: visible !important;

font-size: 12px !important;

}

重要!

関連するCSSを[CSS]タブに追加した後、変更を有効にするには、関連するスマートウォークスルーを再度パブリッシュする必要があります。

この記事は役に立ちましたか?

ご意見ありがとうございます!
×

アカウントタイプの選択

選ぶ
< 戻る

Mobile account login

< 戻る