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

リクエスト

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

ソリューション

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

CSS

ステップIDの検索

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

1. エディタで更新するステップをクリックします
2. ［Notes（ノート）］タブを開きます
3. 「For CSS Adjustments, use balloon ID」の横にあるIDをコピーします。
4. この記事に記載されているCSSソリューションに、「XXXXX」の代わりにIDを貼り付けます。

グローバルCSSの編集

1. WalkMeエディタ設定メニューで［Edit global CSS（グローバルCSSを編集）］をクリックします
2. CSSエディターにカスタムCSSを入力する
3. ［Save（保存）］をクリックします。
4. 公開設定をクリックします

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

}

多言語設定でボタンのテキストを変更