このページでは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;
}