基本的なカスタマイズに対応する

これまでのステップで、LESSファイルの中に変数を埋め込むことができました。しかし、まだconcrete5からこれらの値をカスタマイズ可能にする、最初のステップが終わったところです。ページの「デザイン」パネルを開いても、また「カスタマイズ」リンクは現れません。これは、カスタマイズ可能なテーマには styles.xml ファイルを設置する必要があるからです。

styles.xml ファイルはテーマの css ディレクトリに設置します。このファイルでは、スタイルカスタマイザーパネルのレイアウトを定義します。１つの色をカスタマイズするだけの場合でも、この styles.xml ファイルを作成し、その設定値を定義してあげる必要があります。

それでは、application/themes/urbanic/css/styles.xml ファイルを作成してみましょう（urbanic の部分はテーマによって違います）。そして、ファイルの内容に次のように記述します。

<?xml version="1.0"?>
<styles version="1.0">
</styles>

最初に、親となるxmlノードを作成します。ノードの名前は styles です。

次に、スタイルセットのための子ノードを作成します。setという名前のノードを作成し、name属性でスタイルセットの名前を指定します。スタイルセットは、スタイルを合理的なグループに分類するのに使います。すべてのスタイルはスタイルセットに属する必要があります。セットの名前は変数の値のようなルールはありませんので、任意に決めてください。

<?xml version="1.0"?>
<styles version="1.0">
    <set name="Full Page">
 
    </set>
</styles>

最後に、カスタマイズ可能にするスタイルを定義します。style という名前の子ノードをスタイルセットの内側に作成します。ここでは、"primary-action-color" という名前の変数をカスタマイズ可能な変数として定義しています。

<?xml version="1.0"?>
<styles version="1.0">
    <set name="Full Page">
        <style name="Primary Action Color" variable="primary-action" type="color" />
    </set>
</styles>

解説：

スタイルの表示名は name 属性で任意に指定できます。
type 属性の指定は非常に重要です。concrete5のスタイルカスタマイザーでは、いくつかのタイプを使用することができます。color（色）は最もシンプルなタイプですので、ここから説明するのはそう言う理由です。
variable 属性も非常に重要です。その名前に注目してください。"primary-action" という名前になっています。"primary-action-color" ではありません。これは直感的ではないかもしれませんが、ひとつのスタイルに対して複数のLESS変数が対応することがあるので、このように接尾辞（ここでは-color）を付けてLESSの変数名が重複しないようにしています。ここでは type 属性で color が指定されていますので、variable 属性で指定された "primary-action" に "-color" が追加された "primary-action-color" という名前の変数をカスタマイズするという指定になっています。この後でより複雑な種類のスタイルを解説しますのが、それらではこの仕組みがはより重要になります。

styles.xml で最低限必要な設定は以上です。ページを再読み込みし、デザインパネルを開いてください。「カスタマイズ」リンクが作成したテーマに表示されているはずです。クリックするとカスタマイザーパネルが開き、指定したスタイルが表示されているはずです！色を変更し、プレビューに反映されることを確認してください。保存ボタンをクリックするとカスタマイズを保存することができます。

重要：styles.xml ファイルで定義されていない変数は、カスタマイズされたスタイルシートに正しく保存されません。

以上で最初のカスタマイズ可能な設定が作成できました。次のページでは、より高度なプロパティのカスタマイズについてご紹介します。

原文：Enabling Basic Customization