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

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

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

やりたいこと
以下のHTMLに対し、 「X月Y日」の文字を太くしたい。

<div class="karte-temp-text">〇〇キャンペーンの開催はX月Y日から</div>

方法

「カスタマイズ画面 > HTML」で、文字を太くしたい該当箇所を <span></span> で囲います。

<div class="karte-temp-text">〇〇キャンペーンの開催は<span>X月Y日</span>から</div>

「カスタマイズ画面 > CSS」に以下を追加してください。また .karte-temp-text の箇所は、元のHTMLに付与されているクラス名を指定してください。

.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;
}