スタイルプリセットの作成

concrete5のスタイルカスタマイザーに、テーマのLESS変数の設定値のセットをプリセットとして提供することができます。すでに準備は整っています—presets/defaults.less ファイルはまさに最初のプリセットだからです！カスタムプリセットを作成するためには、いくつかの追加の情報をお伝えするだけです。

プリセット名
プリセットアイコン
プリセットフォントファイル

プリセットに関するこれらの情報を設定するには、LESSファイルに、次のようにいくつかの変数を追加するだけで大丈夫です。

@preset-name: "Urbanic Regular";
@preset-icon: concrete-icon(#ffffff, #ff7600, #333333);
@preset-fonts-file: "fonts/defaults.less";

最初の属性はシンプルです。@preset-name はプリセットの名前を指定します。@preset-icon はconcrete5によって提供されている特殊なLESS関数です。これらの３つの色がスタイルカスタマイザーのプリセットの横に表示されます。最後に、@preset-fonts-file 変数では、このプリセットで使用しているフォントファイルを指定します。

これらの情報をプリセットファイルに追加したら、プリセットフォントファイルを作成しましょう。テーマのHTMLからフォントファイルを読み込んでいる部分を探し、このフォントファイルに移します。最後に、このプリセットフォントファイルを、テーマのLESSファイルから次のように読み込みます。

@import ~"@{preset-fonts-file}";

それでは、実際に２つめのプリセットファイルを作成してみましょう。まず、defaults.lessファイルを複製します。この新しいプリセットの名前を "Forest Green" とします。各変数の値を次のように変更しました。

@preset-name: "Forest Green";
@preset-icon: concrete-icon(#ffffff, #36FF3C, #154600);
@preset-fonts-file: "fonts/forest-greenreen.less";
 
@primary-action-color: #36FF3C;
@primary-spacing-size: 100px;
 
// Body
@body-type-font-family: 'Oswald';
@body-type-font-size: 14px;
@body-type-font-weight: 300;
@body-type-font-style: normal;
@body-type-color: #154600;
 
// Team
@team-background-color: #5A795C;
@team-background-image: '../images/spacer.png';

さらに、フォントファイルも変更しましょう。

@import url(//fonts.googleapis.com/css?family=Oswald:300,300italic);

これで以上です！2つめのプリセットがリストに表示され、選択すると色などの設定が変化し、新しいフォントファイルが読み込まれることを確認できるでしょう。

原文：Creating Style Presets