余白、画像、タイポグラフィなどの高度なカスタマイズ

これまでの解説で、メインカラーをカスタマイズ可能にすることができました。それでは、次のような残りの変数をカスタマイズ可能にする方法もご紹介します。

各所で使用されている100pxの余白
本文のフォントとフォント色
背景色と背景画像

変数タイプ

以下の変数タイプが利用可能です。

100pxの余白 = サイズ（size）
本文のフォントとフォント色 = タイポグラフィ（type）
背景色 = 色（color）
背景画像 = 画像（image）

styles.xmlに追記

それでは、styles.xmlにこれらの変数タイプを追加してみましょう。

<?xml version="1.0"?>
<styles version="1.0">
    <set name="Full Page">
        <style name="Primary Action Color" variable="primary-action" type="color" />
        <style name="Primary Spacing" variable="primary-spacing" type="size" />
    </set>
    <set name="Body">
        <style name="Body" variable="body" type="type" />
    </set>
    <set name="Team Area">
        <style name="Background Color" variable="team-background" type="color" />
        <style name="Background Image" variable="team-background" type="image" />
    </set>
</styles>

LESSに新しいスタイルを追加する

サイズ（size）スタイルタイプ

サイズスタイルはひとつの変数 {$variable}-size と対応します。上記のxmlの場合、variable属性の指定が "primary-spacing" ですので、LESSの変数名は "primary-spacing-size" になります。

まず、この変数を default.less に追加し、次にLESSファイル内のすべての 100px を変数 "@primary-spacing-size" で置き換えて行きます。

重要：サイズスタイルタイプは、pxまたはemのどちらかを使用できます。

タイポグラフィスタイルタイプ

タイポグラフィスタイルタイプは、次の9つの変数と対応します。

{$variable}-type-font-family
{$variable}-type-font-weight
{$variable}-type-text-decoration
{$variable}-type-text-transform
{$variable}-type-font-style
{$variable}-type-color
{$variable}-type-font-size
{$variable}-type-letter-spacing
{$variable}-type-line-height

上記のxmlファイルの場合、"Body" スタイルがタイポグラフィスタイルタイプを使用しています。variable 属性の指定が "body" ですので、LESSの変数名は下記の通りになります。

@body-type-font-family
@body-type-font-weight
@body-type-text-decoration
@body-type-text-transform
@body-type-font-style
@body-type-color
@body-type-font-size
@body-type-letter-spacing
@body-type-line-height

これらの変数のなかから任意に使用したいものを使うことができます。例えば、スタイルシートの記述が次のようになっていた場合、

body {
background-color: #ffffff;
font-family:  'Open Sans', Arial, Helvetice Neue, sans-serif;
font-size: 12px;
 
font-weight: 300; 
font-style: normal; 
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6, span, p { font-family: 'Open Sans', Arial, Helvetice Neue, sans-serif; }

下記のように変数と置き換えることができます。

body {
background-color: #ffffff;
font-family:  @body-type-font-family;
font-size: @body-type-font-size;
 
font-weight: @body-type-font-weight; 
font-style: @body-type-font-style; 
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6, span, p { font-family: @body-type-font-family; }

また、bodyタグ以外のCSSも確認してみましょう。複数の要素で共通のフォント色 #333333 が使われているのを見つけました。これらの #333333 をすべて @body-type-color に置き換え、defaults.less に @body-type-color: #333333; を追加しておきましょう。

同様に、複数の要素で共通のフォントサイズ 14px が使われているのを発見しましたので、それらを @body-type-font-size で置き換え、defaults.less に @body-type-font-size: 14px; を追加します。

以上の手順で、defaults.less に次の設定を追加しました。

// Body
@body-type-font-family: 'Open Sans';
@body-type-font-size: 14px;
@body-type-font-weight: 300;
@body-type-font-style: normal;
@body-type-color: #333333;

背景画像と背景色

色（color）のスタイルタイプについてはすでにご紹介しましたが、背景画像タイプと組み合わせることもできます。最初に、LESSファイル内の記述を示します。

.templatemo-team {
    background: url('../images/background.png') ; 
    font-family:  'Open Sans', sans-serif;
    min-height:590px;
    color:#ffffff;
}

こちらの背景色をカスタマイズ可能にしてみましょう。

.templatemo-team {
    background-color: @team-background-color;
    background: url('../images/background.png') ; 
    font-family:  'Open Sans', sans-serif;
    min-height:590px;
    color:#ffffff;
}

次に、背景画像の指定も次のように差し替えます。

.templatemo-team {
    background-color: @team-background-color;
    background-image: url(@team-background-image) ;
    font-family:  'Open Sans', sans-serif;
    min-height:590px;
    color:#ffffff;
}

最後に、defaults.less ファイルにこれらの変数の初期値を追加します。

// Team
@team-background-color: #82BBC8;
@team-background-image: '../images/background.png';

以上で、背景画像を差し替えることが可能になり、さらに透明の背景画像を指定すれば、背景色が使われるようになりました。

これらの手順を踏めば、テーマにカスタマイズ可能なオプションを好きなだけ作ることができます。次のページでは、このテーマにプリセットを追加してみましょう。

原文：Advanced Customization with Type, Spacing & Images

トラブルシューティング

lessファイルを変更したのに、テーマカスタマイザーに反映されない！

いちど「カスタマイズをリセット」ボタンをクリックしてください。すると、初期設定を読みこうためにlessファイルがリロードされます。私はこれで２時間ハマりました…