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

Movable Typeのテンプレートセットで独自のカラムレイアウトを適用させる方法（その3：ユーザーのカラムレイアウトを適用する＆まとめ）

「その3」は、このシリーズの本題である、独自のカラムレイアウトを適用させる方法の説明です。

１．これまでのまとめ

「その1」と「その2」から、ユーザーのカラムレイアウトを適用するにあたって、ポイントとなる事項は次の通りです。

• テンプレートセットのテーマディレクトリ配下に配置した screen.css に記述しているカラムレイアウト名が適用される
• スタイルを利用してカラムレイアウトを変更すると、変数 page_layout に適用したレイアウト名が設定される（デフォルト以外の名称も利用可能）
• スタイルを利用してテーマあるいはカラムレイアウトを変更すると、スタイルシート（styles.css）の内容が、ベースファイル・テーマファイルへの import 命令に書き換えられる

また、テンプレートセットにカラムレイアウトを組み込むにあたっては、これまでの考察より、次のA・BとX・Yの組み合わせ（計4通り）が考えられます。

• A.デフォルトのカラムレイアウト名を利用する
• B.ユーザーのカラムレイアウト名を利用する

• X.テーマを利用する（テンプレートのスタイルシートにはimport命令のみ）
• Y.テーマを利用しない（テンプレートのスタイルシートにimport命令を書き込ませない）

「その2」では、A+X のケースについて述べましたので、順を追って、残りの組み合わせを行うにあたっての実現方法を説明します。

２．テーマを利用しない場合、スタイルシートに import 命令を書き込ませない方法

結論から申し上げると、スタイルシートに import 命令を書き込ませない仕組みを作るのは困難なため、次の方法を考えました。

• import 命令が書き込まれるスタイルシートをダミーとしてテンプレートセットに登録する
• 本来のスタイルシートは別のインデックステンプレートとして登録する

テンプレートの構成はイマイチですが、こうすればカラムレイアウトの変更でスタイルシートが import 命令で上書きされる事象を回避できます。

具体的には config.yaml に次のように設定します。

styles-site:
    label: Stylesheet
    outfile: styles-site.css
    rebuild_me: 1
styles:
    label: Stylesheet_Dummy
    outfile: styles.css
    rebuild_me: 0

上がCSSの実体があるテンプレート、下はダミー用のスタイルシートです。実験時にわかったことは、次の2つです。

• styles という種類のテンプレートを探して import 命令を書き込むため、実体の CSS は別のファイル名が良い。
• styles という種類のテンプレートが存在しない場合は他の css ファイルを検索して import 命令を書き込むため、必ずダミーを用意する

３．テーマを利用しない場合の screen.css の設定

screen.css はテーマを利用しない場合は不要なファイルですが、カラムレイアウトを読み込ませるためには必須です。
よって、テーマを利用しない場合の screen.css の中身はヘッダのみとし、CSS の実体は前項の通り、インデックステンプレートに記述します。

４．ユーザーのカラムレイアウト名を利用する場合の対処

もうひとつ隠れた問題があります。それは、ユーザーのカラムレイアウト名を利用する場合、テンプレートセットを入れ替えただけでは、変数 page_layout にユーザーのカラムレイアウト名が設定されません。
設定されるのは、スタイルでカラムレイアウトを切り替えた後です。

たとえば、当ブログの配布テンプレートのデフォルトのカラムレイアウトは

layout-three-columns

となっていますが、MTのデフォルトテンプレートのカラムレイアウトは

layout-wtt

となっているため、テンプレートセット入れ替え直後は、変数 page_layout に

layout-wtt

が設定されたままです。

これを回避するために、テンプレート（メインインデックスやブログ記事リストなどの、カラムレイアウトが必要なメインのテンプレート）の先頭（=ヘッダーが呼び出される前）に設定します。
カラムレイアウトがどのページでも同じであれば、「ヘッダー」テンプレートモジュールのbody要素より手前に設定しておけば一箇所の設定で済みます。

に、次のようなしかけを設定しておきます。

<mt:unless name="page_layout" like="column"><mt:setvar name="page_layout" value="layout-three-column"></mt:unless>

これは「変数 page_layout に column という文字列が含まれていなければ、layout-three-column を設定する」という意味です。つまり、Movable Type デフォルトテンプレートのカラムレイアウト名には column という文字列が含まれていないので、デフォルトテンプレートからテンプレートセットを入れ替えた場合には変数を上書きします。

変数を上書きした後、カラムレイアウト切り替えを行っても、この MTUnless タグの条件にマッチしない（=columnという文字列が含まれる）ので、選択したカラムレイアウトが適用される、というわけです。

ただし、色々なテンプレートをインストールしていると、この方法では限界があるかもしれませんので、よりユニークなカラムレイアウト名を自テンプレートセットに設定して、マッチする条件を厳しくした方が良いかもしれません。

つまり、

layout-three-columns

であれば、他のテンプレートセットのカラムレイアウト名とバッティングする可能性があるので、

koikikukan-layout-three-columns

と変更して、

<mt:unless name="page_layout" like="koikikukan"><mt:setvar name="page_layout" value="layout-three-column"></mt:unless>

という判定にした方が確実でしょう。

５．各ケースのテンプレートセット構成

最後に各組み合わせのテンプレートセット構成を掲載しておきます。間違ってたらすいません。

カラムレイアウト切り替えをテンプレートセットに導入する構成がやや複雑なため、まずは当サイトのテンプレートセット（スタイル適用版）を試してみて、ファイルの内容がどうなっているか確認してください（ローカライズも行っているので、ファイル構成がサンプルと若干異なっています）。

５．１ A+X：デフォルトのカラムレイアウト名を利用し、テーマを利用する

テンプレートセット名
　├ mt-static/
　│　└ plugins/
　│　　　└ テンプレートセット名
　│　　　　　└ themes/
　│　　　　　　　├ index.html
　│　　　　　　　└ テーマ名/
　│　　　　　　　　　├ screen.css（実体あり、デフォルトのカラムレイアウトを指定）
　│　　　　　　　　　├ thumbnail.gif
　│　　　　　　　　　└ thumbnail-large.gif
　└ plugins/
　　　└ テンプレートセット名/
　　　　　├ config.yaml
　　　　　└ templates
　　　　　　　├ styles.mtml（import命令あり）
　　　　　　　└ 他の各テンプレート

５．２ A+Y：デフォルトのカラムレイアウト名を利用し、テーマを利用しない

テンプレートセット名
　├ mt-static/
　│　└ plugins/
　│　　　└ テンプレートセット名
　│　　　　　└ themes/
　│　　　　　　　├ index.html
　│　　　　　　　└ テーマ名/
　│　　　　　　　　　├ screen.css（ヘッダのみ、デフォルトのカラムレイアウトを指定）
　│　　　　　　　　　├ thumbnail.gif
　│　　　　　　　　　└ thumbnail-large.gif
　└ plugins/
　　　└ テンプレートセット名/
　　　　　├ config.yaml
　　　　　└ templates
　　　　　　　├ styles.mtml（ダミー）
　　　　　　　├ styles-site.mtml（CSS の実体）
　　　　　　　└ 他の各テンプレート

５．３ B+X：ユーザーのカラムレイアウト名を利用し、テーマを利用する

テンプレートセット名
　├ mt-static/
　│　└ plugins/
　│　　　└ テンプレートセット名
　│　　　　　└ themes/
　│　　　　　　　├ index.html
　│　　　　　　　└ テーマ名/
　│　　　　　　　　　├ screen.css（実体あり、ユーザーのカラムレイアウトを指定）
　│　　　　　　　　　├ thumbnail.gif
　│　　　　　　　　　└ thumbnail-large.gif
　└ plugins/
　　　└ テンプレートセット名/
　　　　　├ config.yaml
　　　　　└ templates
　　　　　　　├ styles.mtml（import命令あり）
　　　　　　　└ 他の各テンプレート

５．４ B+Y：ユーザーのカラムレイアウト名を利用し、テーマを利用しない

テンプレートセット名
　├ mt-static/
　│　└ plugins/
　│　　　└ テンプレートセット名
　│　　　　　└ themes/
　│　　　　　　　├ index.html
　│　　　　　　　└ テーマ名/
　│　　　　　　　　　├ screen.css（ヘッダのみ、ユーザーのカラムレイアウトを指定）
　│　　　　　　　　　├ thumbnail.gif
　│　　　　　　　　　└ thumbnail-large.gif
　└ plugins/
　　　└ テンプレートセット名/
　　　　　├ config.yaml
　　　　　└ templates
　　　　　　　├ styles.mtml（ダミー）
　　　　　　　├ styles-site.mtml（CSS の実体）
　　　　　　　└ 他の各テンプレート

このシリーズは以上です。