共通 - テキストの一部だけスタイルを変えたい

このご案内は、ウィジェットタイプのテンプレートに合わせた書き方です。非ウィジェットタイプの旧型テンプレート(テンプレート詳細に、ウィジェットタイプと記載のないもの)については変数の記載方法の#{foo}を{{foo}}に変えてください。また、description1は基本部分、description2が変更部分となっています。

 

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


 

【カスタマイズ画面-HTML】

<div class="karte-temp-description">#{description}</div>

<div class="karte-temp-description">#{description1}<span>#{description2}</span></div>

に変更する。

 

【カスタマイズ画面-CSS】

.karte-temp-description span{

               font-weight: bold;

}

を追加する。

 

【カスタマイズ画面-変数】

名前 ラベル
description1 テキスト 詳細文1  
description2 テキスト 詳細文2  

 

【ビジュアル画面】

詳細文1と詳細文2に任意のテキストを入れる。

 

 

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


 

【カスタマイズ画面-HTML】

<div class="karte-temp-description">#{description}</div>

<div class="karte-temp-description">#{description1}<span>#{description2}</span></div>

に変更する。

 

【カスタマイズ画面-CSS】

.karte-temp-description span{

               color:#{description_span_color};

}

を追加する。

 

【カスタマイズ画面-変数】

名前 ラベル
description1 テキスト 詳細文1  
description2 テキスト 詳細文2  
description_span_color 詳細文span文字色  

 

【ビジュアル画面】

詳細文1と詳細文2に任意のテキストを入れる。
詳細文span文字色に任意の色を指定する。

 

 

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


 

【カスタマイズ画面-HTML】

<div class="karte-temp-description">#{description}</div>

<div class="karte-temp-description">#{description1}<span>#{description2}</span></div>

に変更する。

 

【カスタマイズ画面-CSS】

.karte-temp-description span{

               font-size* #{descripion_span_size}px;

}

を追加する。

 

【カスタマイズ画面-変数】

名前 ラベル
description1 テキスト 詳細文1  
description2 テキスト 詳細文2  
description_span_size 数値 詳細文span文字サイズ  

 

【ビジュアル画面】

詳細文1と詳細文2に任意のテキストを入れる。
詳細文span文字サイズに任意の文字サイズ数値を指定する。