小粋空間  -  a cheap joke and a play on words site

Movable Typeのテンプレートセットで独自のカラムレイアウトを適用させる方法（その2：デフォルトテンプレートのレイアウトを適用する仕組み）

今回は、デフォルトで用意されているレイアウトをテンプレートセットに適用させる方法を紹介します。この方法では、Movable Type の「既存のブログ」のベーステーマ、

mt-static/themes-base/blog.css

のスタイルに依存することになるので、その点を注意してください。

なお、テンプレートセットの設定には、config.yaml を用いた例で紹介します。

１．テンプレートセットの構成

インデックステンプレートのスタイルシートを、「styles」の種類で登録します（下）。

styles:
    label: Stylesheet
    outfile: styles.css
    rebuild_me: 1

このスタイルシート、styles.mtml には次のような内容を記述してください。

/* Default Layout: <mt:setvar name="page_layout" value="layout-wtt"> */
@import url(<$MTStaticWebPath$>themes-base/blog.css);
@import url(<$MTStaticWebPath$>plugins/MyTemplateSet/themes/sample/screen.css);

1行目はデフォルトテンプレートに倣っているだけです。テンプレートセットを切り替えたときにこの設定が適用されると思ったのですが、そうでもないようです。
他のテンプレートの説明は、ここでは省略します。

また、テーマファイルの実体（screen.css）は、

mt-static/plugins/テンプレートセット名/themes/テーマ名

配下においてください。

また、screen.css のヘッダ部分に、適用したいレイアウト（青色部分）を記述します。適用させるカラムレイアウトが複数存在する場合は、カンマで区切ります。

/*
 
name: Koikikukan
designer: Yujiro Araki
designer_url: http://www.koikikukan.com/ 
layouts: layout-wtt, layout-twt
 
*/

デフォルトで用意されているレイアウト名は次のものがあります。これらはローカライズが適用され、スタイル選択画面では日本語で表示されるようになっています。

• layout-wt（2カラム：大小）
• layout-tw（2カラム：小大）
• layout-wm（2カラム：大中）
• layout-mw（2カラム：中大）
• layout-wtt（3カラム：大小小）
• layout-twt（3カラム：小大小）

２．テンプレートセットの入れ替えとスタイルの切り替え

作成したテンプレートセットを plugins ディレクトリおよび、mt-static/plugins ディレクトリにアップロードします。

アップロードしたテンプレートセットに入れ替えた後の、スタイル切り替え（テーマの切り替えまたはレイアウトの切り替え）方法は「その1」の３項を参照してください。

先ほどの screen.css のヘッダに設定した内容が、セレクトボックスに反映されます（画面下）。
ここではセレクトボックスの表示を確認しているだけであり、当サイトのテンプレートセットに実際に適用できることを意味しているのではありません。

なお、テーマまたはカラムレイアウトを切り替えると、スタイルシートは次のような内容に置き替わります。

/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(/blog/MT-4.1-ja/mt-static/themes-base/blog.css);
@import url(/blog/MT-4.1-ja/mt-static/support/themes/sample/sample.css);
/* end StyleCatcher imports */

テーマファイルは、mt-static/support/themes にコピーされるようです。

３．まとめ

この方法を独自デザインにカラムレイアウト切り替えに適用できればスッキリするのですが、ベーステーマが必ず import されてしまうため、独自のデザインをテンプレートセットに適用したい場合には有効ではありません。

また、スタイルシートがテンプレート上に配置されないため、スタイルシートを編集するケースには向いていません。つまりこの方法は、テンプレートセット配布元が多くのデザインを用意し、ユーザーは好きなデザインを選択し、かつそれらをカスタマイズしないケースに適していると思われます。