CSSで予約フォームのテキストをカスタマイズする

Sirvoyでは各設定ページにて予約フォームのテキストや翻訳を変更できるようになっていますが、それらのページで変更できない部分でも、特定の要素のclassをターゲットにするCSSを使用することによりテキストを変更できるものがあります。

「sirvoy-flexible-text」のclassを持つ要素は、カスタムCSSページから変更することができます。

1.設定 -> 予約フォームへと進みます。

2.予約フォームの横にある「︙」をクリックします。

3.ドロップダウンリストの中から、「変更」をクリックします。

4.「カスタムCSS」タブを選択します。

「sirvoy-flexible-text」のclassを持つ要素すべては、以下も同時に持っています：

1. 特定のclass 「sft-trans-key-SPECIFIC-KEY」 。
2. 特定の言語へのテキスト変更を正確に特定するための言語特有のclass。英語の場合の例： 「sft-lang-en」。（各言語は、英語の「-en」、フランス語の「-fr」、スウェーデン語の「-sv」などのように2文字の言語コードで表されます。）

「Search」ボタンのタイトルを変更する例

「Search」ボタンのタイトルのマークアップは以下のとおりです：

（2つのclass 「sft-lang-en」と「sft-trans-key-booking-form-button-search」があることに注目してください）

<span class="
   sirvoy-flexible-text 
   sft-lang-en 
   sft-trans-key-shared-button-search 
   sft-initialized" 
   data-translation-key="shared.button.search">
            
   <div class="sft-text">
      Search
   </div>

</span>

英語とスウェーデン語の「Search」ボタンのタイトルを変更するには、以下のようにします：

.sft-lang-en.sft-trans-key-shared-button-search .sft-text, .sft-lang-sv.sft-trans-key-shared-button-search .sft-text { 
  display: none !important;
}

.sft-lang-en.sft-trans-key-shared-button-search::after { 
  content: "My button title";
}

.sft-lang-sv.sft-trans-key-shared-button-search::after { 
  content: "Min knapptitel";
}

英語の場合：

スウェーデン語の場合：

テキストを変更するための上記の原則は、予約フォームの「sirvoy-flexible-text」classを持つ要素のテキスト変更すべてに適用されます。