テンプレート デザイナーとブログのテンプレートの CSS を併用するには、いくつかのガイドラインを順守する必要があります。
変数を設定する
コードの <head> セクションでは、<b:skin> </b:skin> タグの対を定義する必要があります。
これらのタグの間に CSS スタイルを宣言し、デザインに [フォントと色] ページで使用する変数名を記述します。
例
<head>
...
<b:skin>
<style type='text/css'>
/*
* Variable definitions:
* <Variable name='bgcolor' description='Page Background Color'
type='color' default='#fff'/>
*/
body {
background: $bgcolor;
margin: 0;
padding: 40px 20px;
}
</style>
</b:skin>
</head>/* と */ のコメントタグで囲まれた CSS コードは、ブログには表示されません。
ここには、[フォントと色] タブで編集可能なフォントや色を記述した変数のリストを入力します。各変数には、上記の例で示した情報や次に説明する情報が必要となります。
- name – 文字または数字のみを入力できます。テンプレート内の名前は、それぞれ一意である必要があります。
- description – 説明を入力します。入力した説明は [フォントと色] セクションに表示されます。
- type – 「font」または「color」と入力します。
- default – 既定値。色の場合は、#FF0066 のように 16 進数のカラーコードで記述する必要があります。フォントの場合は、font-style font-weight font-size font-family という形式のリストを記述します。
変数を使用する
変数の設定後に変数の値を使用するには、b:skin css に「$variable_name」と入力します。
編集の種類
テンプレート デザイナーでは、特定の種類の CSS 変数の編集をサポートしています。変数の種類を設定する方法は次のとおりです。
- 色の変数を設定すると、テンプレート デザイナーで選択範囲に対してカラーパレットを使用できます。
- フォントの変数を設定すると、テンプレート デザイナーでフォント、サイズ、太字、斜体などのオプションを指定できます。
上記の例では、bgcolor という変数に白（#fff）を設定しています。次のコードでは background: $bgcolor と記述しています。 これで背景は白になりますが、[フォントと色] セクションで変更することができます。
注: 他の種類の CSS 属性に対して変数を作成する必要はありません。上記の例の margin: 属性や padding: 属性のように、通常使用する変数は CSS に含めることができます。
CSS を使用してブログのデザインを変更する手順も併せてご覧ください。