サポートアクションではコンテンツの文言・見た目を自由度高く設定できますが、コーチマークの「OK」ボタンなど一部の要素については文言の変更ができません。

そこで今回は、サポートアクション上の任意の要素に対して、CSSで文言の変更を行う方法をコーチマークの「OK」ボタンを例に記載します。
この方法はCSSがうまく動かなかった際の影響が大きいため、必ず複数のデバイス・ブラウザで動作確認（特に文字化けが起こっていないかの確認）をしてから公開してください。

以下に記載するCSSを詳細設定＞このステップのカスタムCSSに入れることで、そのサポートアクションでだけ見た目を調整することができます。
ブランド設定に登録した場合、全てのサポートアクションに変更が反映されます。
※カスタムCSSの設定方法はこちらをご確認ください

通常のコーチマークの表示

CSSで文言を変えた後のコーチマークの表示

CSSで特定の要素の文言を変更する方法

「before」擬似要素のcontentプロパティを利用することで、任意の要素に文言を追加したり、文言を削除することが可能です。
以下のCSSでは、コーチマークの「OK」ボタンの文言を「閉じる」に変更しています。

#rs_sa .c-coachMark-ok {
  font-size: 0px;
}
#rs_sa .c-coachMark-ok::before {
  content: "閉じる";
  font-size: 16px;
}

以下、CSSの解説になります。

#rs_sa .c-coachMark-ok

文言の変更にあたり、元々の「OK」の文言が邪魔になるため、文字サイズを０にすることで擬似的に文言を非表示にしています。

#rs_sa .c-coachMark-ok::before

任意のCSSセレクタに対して「::before」をつけることで、擬似要素にスタイルを当てることが可能です。
ここではcontent: ""で指定した文言を該当要素の前に挿入しています。
そのままだとこの文言にもfont-size: 0px;の指定がかかって表示されないため、16pxで上書きすることでこのテキストのみを表示させています。
font-sizeの値は任意の大きさを指定してください。

尚、一般的にcontentで文字を入れる擬似要素は「::before」「::after」の２つになります。文言を差し替えるケースではどちらを利用しても問題ありませんが、「追加する」ケースでは前に差し込みたい場合はbeforeを、後に差し込みたい場合はafterを利用してください。

このCSSで発生し得るリスクについて

このCSSでは、「元々の文言を非表示にし」「任意の文言を追加する」という処理を行っています。
そのため、このどちらかがうまくいかない場合、意図しない挙動になる可能性があります。
例えば、以下の可能性が考えられます。

• サイトの文字コードの関係で、contentで指定した文言が文字化けしてしまう
• CSSが反映されるまでのわずかな時間、変更前の文言が表示される
• 文言を差し替えることで、ボタンの大きさが変わってレイアウトが崩れる

これらのリスクについて十分に把握し、複数のデバイス・ブラウザ（および画面サイズ）で異常がないことを確認した上で、このCSSをご利用下さい。