新しいシステムMovableType4.1でのコンテンツ構築・デザイン変更で、知っておかなければならないのが新しく追加されたテンプレートタグとテンプレートです。タグリファレンスやブログを読んで、新しいMTタグについて勉強してみたのですが、やはり実際に使って動作させてみないとわからない。また、もう少し全体的に比べてみたりしないと理解しづらいなんてことで、まず、テンプレートの相関図みたいなものを個々に作っていこうと考え、実際にインデックステンプレート（トップページ）の構成内容とヘッダーテンプレートとの関係をイメージにして表してみました。ご参考にどうぞご覧になってください。
クリックでイメージ拡大されます。またドラッグで移動もできますので、大きな画像を見るときにスクロールで移動してもいいですが、ドラッグでイメージを移動させた方がみやすいです。highslideJSもこうした使い方をすると機能的ですね。
尚、こうしたイメージをつなぎ合わせて一つのPDFなんかを作っていきたいとも考えています。新しいタグを覚えるのには、こうした全体の関係を表してみて、部分部分でのテンプレートタグの機能役割なんかを見てみると理解しやすいかと思います。
今回、実際にデフォルトで設定されているテンプレートタグを取り出して、どういったフローでページ生成（HTMLタグ生成）されるのかを個々に取り上げて、解析してみたいと思います。このテンプレートタグについて、シリーズで取り上げていきます（勉強するための時間があまり取れない状況にありますので、長いインターバルでアップしていきます）。今回のテンプレートについての詳細解説は、後日いたします（このエントリー追記部分にて）。とりあえず、イメージを。
インデックステンプレート解析
できるだけ理解しやすいようにイメージを多用して説明します。イメージ画像は、クリックすると拡大・縮小表示されます。また、ドラッグすることで移動できますので、画面からはみ出た部分は、画像をドラッグして見てください。画像は、A3出力サイズで生成しています。
テンプレート構成内容
インデックステンプレートの構成内容は、以下の通りに4つのブロックから成り立っています。
インデックステンプレートの構成内容とレイアウトの関係
インデックステンプレートの構成内容と実際のデザインレイアウト（デフォルト）の関係をイメージにしてました。
各モジュールがレイアウト上でどの部分に位置しているのかを理解すると部分的のカスタマイズにおいて、どのモジュールをカスタマイズすればいいのかがわかります。
レイアウトそのものを作り変える場合は、すべてのモジュールテンプレートで設定されているタグを変更する必要があります。
条件分岐のための変数設定
インデックステンプレートの構成要素のヘッダー、ブログ記事の概要、フッターの3つのモジュール（取り外しができるという解釈で）は、他のテンプレートと共通で使われている。
右に全テンプレートとインクルードされているモジュールの一覧をイメージに表してみました。ヘッダー・フッターにおいては、すべてのテンプレートで共通のものが使われていることになります。
この一覧からメインページとブログ記事リストと検索結果の条件分岐構文が書かれていることがわかります。このように、各テンプレート同士で共通で使われているモジュールを知っておくことで、モジュールの中での条件分岐構文が理解しやすくなります。
各モジュールの中で、条件分岐構文が多用されており、その条件構文においてのテンプレート判別のために、テンプレート最初のブロックに変数（条件分岐のための変数設定）が設定されている。
設定されている変数からどのテンプレートであるかを判別し、それぞれ異なるXHTMLが生成されるようになっている。また、変数に指定された値からデータを抜き出すなどことも各モジュール内で行われるようになっている。
コード解析
変数ブロックコード表示
・クリックでコードが別ウインドウで表示
・ドラッグ部分にマウスをあて、ドラッグして移動も可能
・ウインドウのリサイズも左下隅で可能
部分にマウスをあて、ドラッグしてウインドウサイズを拡大縮小可能）実際にコードを覗いてみます。
1行目：変数body_class
bodyタグの中での条件分岐のための変数設定です。値も指定してあり、その値がbodyタグのclassに指定されるようになっています。
2行目：変数main_template
インデックステンプレートであることを判別するための変数設定であると思われます。同じインデックステンプレートのアーカイブインデックステンプレートでも使われて設定されています。ヘッダーモジュールの中で判別するための構文式が記述されています。
3行目：変数main_index
メインページ（トップページ）であることを判別するための変数設定となります。ヘッダー、ブログ記事リスト（アーカイブテンプレート）、サイドバー、ウィジット（ホームページウィジェット）などのモジュールの中で条件分岐構文が多数使われています。値が1となっているのは、有効(true)であることを示すものと思われます。
4行目：変数sidebar
サイドバーを生成するテンプレートであるということを判別させるための変数設定となります。ほとんどのテンプレートで使われています。
5行目：変数title
タイトルを表示させるためのMTテンプレートタグに対して、titleという名前の変数として設定しています。すべてのテンプレートに使われています。
さて、ここで管理ページの中の検索機能を使ってみてください。MT4.1の管理ページ検索機能はかなり使えます。変数で検索してみると使われているテンプレートなどもリスト表示されます。
テンプレート同士での変数の取扱に検索機能を使ってみると作業がはかどります。
個々のMTテンプレートタグについての詳細は、実際にインデックステンプレートを開いて、右側に表示されるドキュメントリンクをクリックすることで、リファレンスページが別ウインドウで開きます。そちらで各タグの機能・働きを確認してください。
ヘッダーテンプレート構成
ヘッダーモジュールは、すべてのテンプレートに共通で使われています。それだけ条件分岐構文がすべてのテンプレートで使えるように設定されていることも意味していると思います。
構成内容は、右イメージをクリックしてご覧ください。まとめて変数設定しているブロックとhead要素、body要素（コンテンツ部分の頭までのタグ）となっています。
使われているMTテンプレートタグは、ドキュメントリンクをクリックして確認してください。
ヘッダーモジュールコード解析
ヘッダーコード表示
・クリックでコードが別ウインドウで表示
・ドラッグ部分にマウスをあて、ドラッグして移動も可能
・ウインドウのリサイズも左下隅で可能
部分にマウスをあて、ドラッグしてウインドウサイズを拡大縮小可能）実際にコードを覗いてみます。
1行目から10行目：変数html_headmt:setvarblockタグで括られたコードすべてが、変数html_headに設定されており、19行目のhead要素内の<$mt:var name="html_head"$>に置き換えられます。
2行目から9行目：<MTIf name="main_template">
MTifで括られたコードが変数main_templateに設定されているテンプレートの場合に、コードが生成されます。この場合、3.4行目のRSSリンクコード、8行目のMTCCLicenseRDFのコードが生成されることになります。
5行目から7行目：<MTUnless name="main_index">
MTUnlessで括られた部分は、変数main_indexに設定されているテンプレートである限り、コードが生成されません。この場合、メインページ以外のページすべてにコードが生成されることになります。
16行目：<$mt:var name="title"$>
インデックステンプレートにて最初の変数設置ブロックで設定されているコートに置換されます。
19行目：<$mt:var name="html_head"$>
1行目から10行目までのmt:setvarblockタグで括られた部分で条件分岐されたコードに置換されます。
21行目：<MTIf name="body_class"><$MTGetVar name="body_class"$> </MTIf>
変数body_classを設定しているテンプレートでその変数に指定されている値を取得して置換します。
右イメージにて、この部分の条件分岐構文がその他のテンプレートでどのように働いて機能しているかを一覧にしました。ご覧ください。
各テンプレートにてbody_classに指定されている値が異なりますので、テンプレート毎にレイアウトやデザインを変えたい場合などには、こういった変数と条件分岐構文の使い方は、とても参考になります。（CSSなどでよりカスケードするときなどには、もってこいだと思います。）
<$MTGetVar name="page_layout" default="layout-wtt"$>
デフォルトでlayout-wttが生成されます。変数page_layoutを設定されているテンプレートに関しては、その変数に指定されている値を取得置換します。
<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"</MTIf>
変数body_onloadを設定しているテンプレートに関しては、その変数にしていされている値が取得され、<$MTGetVar name="body_onload"$>の部分に置き換えられます。デフォルトでは、ブログ記事（アーカイブテンプレート）とコメントプレビュー（システムテンプレート）の2つに有効でコードが生成されます。
27行目から33行目：<MTIf name="main_index"><MTElse></MTIf>
変数main_indexを設定しているテンプレートであれば、MTIfからMTElseまで括られたコードを生成します。そうでない他のテンプレートは、MTElseから/MTIfまで括られたコードが生成されることになります。
この<MTIf name="*******"><MTElse></MTIf>の構文パターンはいろんな場所で使われていますのでよく理解しておくといいです。また、使えます。
条件構文からのHTML生成パターン一覧の中でブログ記事のリストでの
一応、ヘッダーテンプレートとインデックステンプレートでの変数設定部分の関係をイメージに表してありますので、その関係・働きなどを把握してみてください。
ブログ記事の概要
ブログ記事の概要周りのコードとデザインレイアウトでの関係をイメージに表してみました。イメージのような感じでインデックステンプレートのコードが生成表示されます。
ブログ記事の概要（モジュール）は、ブログ記事のリスト、ブログ検索のテンプレートと共通で同じモジュールを読み込んでいます。
モジュールの中で使われている条件分岐構文がこの3つのテンプレートに関連していることがわかります。そのことを頭に入れて、テンプレートタグの働きをみると理解が早くなります。
ブログ記事の概要 構成
ブログ記事の概要は、ブログ記事のメタデータとタグモジュールをインクルードしています。
- ブログ記事のメタデータ
- タグ
ブログ記事のメタデータについては、各エントリータイトル下の投稿日時、投稿者、コメント、トラックバック、パーマリンク（個別ページリンク）といった内容を生成表示させるためのテンプレートコードをまとめてモジュール化しているものです。
インデックステンプレート、ブログ記事のリストでは、同じ内容でページ生成されますが、検索結果ページでは、ブログ記事のメタデータ部分で、コメント、トラックバックのリンクが生成されません。
タグについては、エントリーに付けられたタグとそのタグ検索結果を表示させるためのテンプレートコードをまとめてモジュール化したものです。
検索結果ページにおいては、キーワード検索、タグ検索でも違いがあり、タグ検索結果表示のみタグ（モジュール）が生成されるようになっています。
ブログ記事の概要コード解析
ブログ記事の概要コード表示
・クリックでコードが別ウインドウで表示
・ドラッグ部分にマウスをあて、ドラッグして移動も可能
・ウインドウのリサイズも左下隅で可能
部分にマウスをあて、ドラッグしてウインドウサイズを拡大縮小可能）実際にコードを覗いてみます。
7行目：<MTIfNonEmpty tag="EntryBody">
エントリー本文がなければ、MTIfNonEmptyタグで括られたコードは生成されない。この場合、EntryBodyとなっていますので、エントリー本文が表示されます。
12行目：<MTIfTagSearch>
ブログタグ検索の場合のみに実行されるタグなので、検索結果（システムテンプレート）以外のテンプレートで尚且つ、タグ検索のみのときにしかコードが生成されません。
検索結果を表示するページ（タグ）の場合、ここにタグモジュール（インクルード）で設定されているコードが生成されることになります。
15行目：<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
エントリーの追記部分がある場合は、MTIfEmptyタグで括られた部分が生成されることになります。
- convert_breaks="1 | 0"
- 値に1を指定すると、ウェブページの設定にかかわらず、自動的に段落分けと改行が反映されるようになります。また、0を指定すると、段落分けと改行が反映されません。
ブログ記事のメタデータ
ブログ記事のメタデータコード表示
・クリックでコードが別ウインドウで表示
・ドラッグ部分にマウスをあて、ドラッグして移動も可能
・ウインドウのリサイズも左下隅で可能
部分にマウスをあて、ドラッグしてウインドウサイズを拡大縮小可能）ブログ記事のメタデータは、エントリータイトル部分の下に表示される記事詳細ブロックを生成するモジュールです。
このモジュールの中でも条件分岐がされおり、hide_countsという変数が使われています。この変数はシステムテンプレートの検索結果の中で設定されています。
コード解析
10行目 <MTUnless name="hide_counts" eq="1">
変数hide_countsの値が1と等しくないかぎり、タグの括られた内容が表示されることになります。検索結果のテンプレートについては、値が設定されていますので、括られた内容が表示されないことになります。
検索結果のページでは、コメント・トラックバックへのリンクが表示されないということになります。
フッターモジュール構成
フッターコード表示
・クリックでコードが別ウインドウで表示
・ドラッグ部分にマウスをあて、ドラッグして移動も可能
・ウインドウのリサイズも左下隅で可能
部分にマウスをあて、ドラッグしてウインドウサイズを拡大縮小可能）フッターテンプレートには、サイドバーコンテンツの内容がインクルードされています。フッター部分にMT本家サイトへのリンク、クリエイティブコモンズが生成されるようになっています。
サイドバーモジュール構成内容
サイドバーモジュールコード表示
・クリックでコードが別ウインドウで表示
・ドラッグ部分にマウスをあて、ドラッグして移動も可能
・ウインドウのリサイズも左下隅で可能
部分にマウスをあて、ドラッグしてウインドウサイズを拡大縮小可能）サイドバーの構成内容は、コードの通りになります。CSSヘッダー部分に設定されているlayouts変数を読み込み、システム内部で変数page_columnsに変換され、サイドバーモジュール内での条件分岐により2カラム、3カラム判別されページが生成されるようになっているようです。
以下の内容がCSS（スタイルシート）のヘッダーに記述されたlayoutの内容をシステム内部で変数page_columnsに変換している内容です。
上記のシステム内部での変換パターンからCSSヘッダーlayoutsとpage_columnsとレイアウトの関係は以下の通りになります。
2カラムレイアウト(page_columns)
- layout-tw（小・大）
- layout-wt（大・小）
- layout-wm（大・中）
- layout-mw（中・大）
3カラムレイアウト（page_columns)
- layout-wtt（大・小・小）
- layout-twt（小・大・小）
デフォルトテンプレートでは、基本的にmainとbetaで2カラムレイアウト構成となります。3カラムレイアウトのときには、gammaが追加され、main,beta,gammaで3カラムレイアウトが構成されることになります。
コメントする