このページではCSSによる基本的なスタイルの変更の事例について取り上げています。

詳しいCSSの仕様については以下を参照ください。
https://developer.mozilla.org/ja/docs/Web/CSS

部分的にテキストの文字を太くする

やりたいこと
以下のHTMLに対し、 静的変数 bar の文字を太くしたい。

<div class="karte-temp-text">#{foo}<span>#{bar}</span></div>

方法
「カスタマイズ画面 > CSS」に以下を追加してください。

.karte-temp-text span {
  font-weight: bold;
}

部分的にテキストの色を変える

やりたいこと
以下のHTMLに対し、 静的変数 bar の文字の色を変えたい。

<div class="karte-temp-text">#{foo}<span>#{bar}</span></div>

方法
「カスタマイズ画面 > CSS」に以下を追加してください。
※ 静的変数 color には 任意の色 を指定してください

.karte-temp-text span {
  color: #{color};
}

部分的にテキストのサイズを変える

やりたいこと
以下のHTMLに対し、 静的変数 bar の文字のサイズを変えたい。

<div class="karte-temp-text">#{foo}<span>#{bar}</span></div>

方法
「カスタマイズ画面 > CSS」に以下を追加してください。
※ 静的変数 size には 任意のサイズ を指定してください

.karte-temp-text span {
  font-size: #{size}px;
}