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