[Next/Done(次へ/完了)]ボタンでテキストを変更する方法
リクエスト
ステップの[Next(次へ)]、[Back(戻る]、[Done(完了)]ボタンのテキストを変更する方法を知りたいです。
ソリューション
ステップのボタンテキストの変更は、CSSを使用して行うことができます。
まず、以下の手順でステップIDを見つける必要があります。
- 更新するステップをクリックします
- メモタブに移動します
- スクロールして、「For CSS Adjustments, use balloon ID」の横にあるIDを見つけてください
- このIDをコピーし、以下に示すCSSソリューションの「xxxxxx」の場所に貼り付けます
[Next(次へ)]ボタンのテキストを変更する
以下の両方のコードブロックをコピーして、Editor – 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 {
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(戻る)]ボタンのテキストを変更する
以下の両方のコードブロックをコピーして、Editor – 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(完了)]ボタンのテキストを変更する
以下の両方のコードブロックをコピーして、Editor – Customize – CSSの[Global CSS(グローバルCSS)]タブに貼り付けます。
「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;
}