LESSスタイルシートをテーマから読み込む

どの値をカスタマイズ可能にするか決める

まず、どの値をカスタマイズ可能にするかを検討しましょう。まずいくつか適当に選んでください（あとで追加できます）。

テーマのメインカラーとして使われ値得るオレンジの色と、主なタイポグラフィ（フォントとフォント色）、それからチームセクションの背景色と背景画像をカスタマイズ可能にしてみましょう。

スタイルシートをLESSファイルに変換する

作成中のテーマのスタイルシートがCSSファイルの場合、まずLESSファイルに変換するところから始めましょう。それから、カスタマイズ可能にする値を切り分けます。

ファイル名を変更

拡張子をlessに変更します。例： templatemo_style.less.

設定ファイルを作成

カスタマイザーでデフォルトで使われる設定値を保存したファイルを作成する必要があります。css/presets/defaults.less ファイルを作成してください。この名前と設置位置は重要ですので変えないでください。presets ディレクトリには、設定値のプリセットを保存しておけます。色やフォントの設定をセットにしたプリセットをこのディレクトリに複数設置することができます。プリセットを提供したくない場合でも、このdefaults.lessファイルは必須です。

CSSの値を変数に置き換える

テーマの全てをカスタマイズ可能にする前に、まず分かりやすいひとつの設定値をカスタマイズ可能にしてみましょう。テーマの各所で共通して使われているオレンジ色が分かりやすいでしょう。カラーコードは #ff7600 です。この値を defaults.less ファイルに追加しましょう。

この設定値を示す適当な名前を付けてください。重要：変数名は -color で終わる必要があります。concrete5のスタイルカスタマイザーでは、いくつかの種類の変数を扱うことができます。そして、その種類ごとにこのように変数値の後ろに接尾辞を追加する必要があります。詳細は後ほど解説します。とにかく、このように変数を定義しました。

@primary-action-color: #ff7600;

次に、この設定ファイルをLESSファイルで読み込ませましょう。この手順を踏まないと、"variable @primary-action-color is undefined" というエラーが表示されます。次の行をLESSファイル（ここでは、templatemo_style.less）の先頭に追加してください。

@import "presets/defaults.less";

それでは、templatemo_style.lessファイル内の、該当する色指定をすべて変数に置き換えましょう。例えば、ボタンのクラスの背景色をこのように差し替えてみました。

.btn-orange {
    background-color: @primary-action-color;
    border-bottom:2px solid #d35400;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    color:#ffffff;
}

最後に、テーマからこのファイルをインクルードする部分を特殊な方法に変更します。ファイル名を変更したことにご注意ください。

ページテンプレートファイルを開き、このようにスタイルシートを読み込んでいる箇所を探します。

<link href="<?=$view->getThemePath()?>/css/templatemo_style.css"  rel='stylesheet' type='text/css'>

そして、下記のように書き換えます。

<link href="<?=$view->getStylesheet('templatemo_style.less')?>" rel='stylesheet' type='text/css'>

ページをリロードしてみてください

ここまでの手順がうまくできていれば…これまでと全く同じページが表示されるはずです！エキサイティングな結果ではないかもしれませんが、これたカスタマイズに対応する手順になります。この手順を繰り返して、テーマないのCSSの値をカスタマイズ可能にしていくことができます。

原文：Including LESS Stylesheets in your Theme