リクエスト

ステップの「次へ」、「戻る」、または「完了」ボタンのテキストを変更したいです。

ソリューション

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

CSS

ステップIDの検索

まず、以下の手順に従って、スマートウォークスルーのステップIDを検索する必要があります：

1. エディターで、スマートウォークスルーを開きます
2. 更新するステップをクリックします
3. ヘッダーで、ステップIDの横にあるコピーを選択します。
   
4. この記事に記載されているCSSソリューションに、「XXXXX」の代わりにIDを貼り付けます。

グローバルCSSの編集

1. エディタで、[設定]をクリックします
2. 「グローバルCSSの編集
   
   」を選択します
3. CSSエディターにカスタムCSSを入力する
   
4. ［Save（保存）］をクリックします。
5. 公開設定をクリックします

［Next（次へ）］ボタンのテキストを変更

「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 {

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;

}

［戻る］ボタンテキストを変更

「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;

}

［完了］ボタンテキストを変更

「new text（新しいテキスト）」を、お好みのテキストに置き換えます。

div#walkme-balloon-xxxxxxx button.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-xxxxxxx button.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;

}