configを使う
configモジュールって？
テーマを見てみると、デザイン＞テンプレート モジュール・テンプレートに、configというモジュールがあります。
中に何が入っているのかな？HTMLなどは書いてなさそうだけど…
中を見てみると、mt:SetVarBlockをつかって、変数の設定がされています。
変数内にテンプレート内で何度も出てくるカラーコードやURLをまとめることで、テンプレートから変数名で呼び出し、管理をしやすくしているのです！！
例えばconfig内でpointColorの変数に強調色を設定をしておき、CSSから強調文字にしたい部分を変数名で呼び出して強調色を表示できるようにしておきます。
こうすると色変更したい場合にconfig内のを変数を書き換えるだけで、同じ変数が使われている箇所の色を一括で変えることができます。
作った変数は、CSS、htmlどちらのテンプレート内でも使用することができます。
例：テーマ「Stylish Corporate」のconfig
Stylish Corporateは文字色、サイトのメインカラー、サブカラーなどの色が指定されているのがわかりますね。
色の他にも、記事の表示件数やURLなど、テーマ内で何度も出てくる数値を変数に設定することもできます。設定次第で簡易的な編集もできるようになるので、テーマをいじったことのないサイト運営者に渡す際にも活用できそうです。
configモジュールを設定してみよう！
上で使われている変数を設定するタグは、
- mt:Ignore
- 指定した範囲について、処理を行わないブロックタグです。コメントなどに使用します。
- https://movabletype.net/tags/2007/08/ignore.html
- mt:SetVarBlock
- ブロックタグで囲まれた内容を、変数として値を設定します。
- https://movabletype.net/tags/2007/08/setvarblock.html
- name="name_foo"
- 値を代入する変数の名前を指定します。
です。続いて、変数を呼び出すHTML・CSS側に記述するタグです。
- <$mt:inclued module="モジュール名"$>
- テンプレートモジュールや、外部ファイルを読み込むときに使うタグです。モディファイア
moduleやfileなどにより、読み込む対象を指定します。 - https://movabletype.net/tags/2007/08/include.html
- <$mt:Var name="var_foo"$>
mt:SetVar,mt:SetVarBlock,mt:SetVarTemplateタグで定義した変数から値を呼び出します。
使用するHTML、CSSの最初に<$mt:inclued module="モジュール名"$>で、configモジュールを読み込ませるのがポイントです。
configを使ってみよう
実際にconfigを読み込んで文字色を変更してみましょう。
①configモジュールを作成し、設定をします。
デザイン＞テンプレート テンプレート・モジュールの新しくテンプレート・モジュールを作成から、モジュールを新規作成します。
名前は、わかりやすくconfigとつけます。
<mt:Ignore>ポイントカラー</mt:Ignore>
<mt:SetVarBlock name="pointColor">FF0000</mt:SetVarBlock>
②読み込むテンプレート側にconfigの読み込みと、呼び出し設定をします。
<$mt:Include module="config"$>
<p>テスト<span style="color:<$mt:Var name="pointColor"$>;">ここを色変え</span>テストテストテスト</p>
configモジュールを使って、文字色の変更ができました！
CSSにも同じように記述ができるので、よく使うカラーコードはまとめておくと、あとあとの管理に役に立つでしょう。
モジュールの読み込みだけ、忘れないように注意だね！
