MovableType テンプレートの仕組み
Movable Type（16）
今回は、Movable Typeのテンプレートの仕組みを、もう少し詳しく見てみようと思います。
お話は、次の順番で進みます。
テンプレートの仕組み
1：はじめに
（01）
記事「MovableType スタイルを変更する」でも書いたように、Movable Typeの「テンプレート」は、次の5つに分かれているようです。
- インデックステンプレート
- アーカイブテンプレート
- テンプレートモジュール
- システムテンプレート
- ウィジェット
私もだいぶ戸惑っているのですが、Movable Type4から、より細かにモジュール化され（機能ごとにバラバラの状態）、どうにも全体が把握し難い状況にあるみたいです。
しかし、簡単なカスタマイズくらいであれば、いじくり回す箇所は、それほど多くはないようですよ。今回は、そのようなお話です。
2：スタイル
（02）
スタイルごとに、ファイル名やテンプレートの数も違います。インストール時に適用されていたスタイルでもって、お話を進めていくことにします。
おそらく、「Minimalist Red」というスタイルです。
以降、読み進める場合は、「Minimalist Red」を適用しておくと、より話が分かり良いはずです。
スタイルの変更は、記事「MovableType スタイルを変更する」が参考になります。
3：テンプレートの仕組み
（03）
「デザイン」から、「テンプレート」を選択します。（[デザイン]-[テンプレート]）
（04）
「ブログのテンプレート」画面が表示されます。
まず、ここでもって、「ん？？？」という感じでした、私は。おそらく、左メニューに慣れているからだと思います。
（1）の箇所に、クイックフィルタとして、次のように記載されているはずです。
- インデックステンプレート
- アーカイブテンプレート
- テンプレートモジュール
- システムテンプレート
- ウィジェット
- バックアップされたテンプレート
また、インデックステンプレートに三角マークが付いていると思います。これは、インデックステンプレートの中身を、（2）に表示しているという意味（状態）です。
（2）には、次のように表示されているはずです。
- Atom
- アーカイブインデックス
- スタイルシート
- メインページ
- JavaScript
- RSD
- RSS
テンプレートの仕組みを、一部だけ図示すると、次のようになります。
他の例えばアーカイブテンプレートにしても、ご覧いただくと分かりますが、アーカイブテンプレートを構成する要素がそれぞれ含まれています。
（05）
テンプレートをカスタマイズするときは、これらのひとつひとつの要素が意味を持つわけです。
しかし、いわゆる「見た目」だけを変更したい場合は、「インデックステンプレート」の「スタイルシート」、もしくは「メインページ」に集中すれば良いようです。
4：スタイルシートを眺める
（06）
それでは、ちょっと見てみることにしましょう。一覧の中の「スタイルシート」をクリックします。
（07）
「スタイルシート」が表示されます。
この「Minimalist Red」というテンプレートは、CSSをimportしているようです。（外部ファイルを読み込んでいる）
「で？」という感じがしてしまいます。
ここで、例えば、「/mt-static/themes-base/blog.css」をクリックすると、画面が切り替わって、「blog.css」の内容が表示されて、編集できるといいんですけどね。
よく分かりませんが、出来ないみたいです。（MTOSだからなのかな？）
おそらく、CSSを編集したいときは、次のどちらかで行うのではないでしょうか。
- importを止めて「blog.css」、「screen.css」の中身を、貼り付けて、Movable Type上で編集する。
- 「blog.css」、「screen.css」は、テキストエディタなどで編集して、ファイルアップロードでimportの指定の場所にアップする。
（08）
前のページ（ひとつ上の階層）に戻る場合は、「インデックステンプレート一覧」をクリックします。
5：メインページを眺める
（09）
次に「メインページ」をクリックして、見てみることにしましょう。
（10）
「メインページ」が表示されます。
ちょっと、見難いかもしれませんが、「え！？何で、こんなにコードが短いの？？？」というくらい短いですね。
これは、「Movable Typeのテンプレートタグ」というものによって、書かれているためです。
HTMLやCSSしかご存知でない人は、訳が分からないと思うので、少しだけご説明します。
ここでは、<$MTInclude$>タグに注目してみましょう。このテンプレートでは、次のように、3つ表示されているはずです。
- <$MTInclude module="ヘッダー"$>
- <$MTInclude module="ブログ記事の概要"$>
- <$MTInclude module="フッター"$>
（11）
ふと右側に目をやると、「インクルードモジュール」として、同じ項目が3つ表示されているのが分かるはずです。
試しに、「ヘッダー」をクリックしてみましょう。
（12）
「ヘッダー」が表示されます。
コードを見ると、<html>タグや、<head>タグなど、見慣れたタグを確認できるはずです。
（13）
さて、「ヘッダー」自体は、どこにあるのかと言えば、「テンプレートモジュール」にあります。
「メインページ」へ、include（含む）させているわけです。
これで、だいたいの構造が、ご理解いただけたのではないかしら。
（14）
テンプレートの仕組みが分かると、あと問題になるのが、次の3つです。
（X）HTML、CSSは、別途勉強していただくとして、「Movable Typeテンプレートタグ」については、使用されているタグが右側に表示されて、SixApartさんのサイトのドキュメントにリンクされています。
コードを見ていて、分からないときは、クリックして見てみれば、たいていは解決するはずです。
これで全体的な仕組みと、カスタマイズするときの場所などがご理解いただけたのではないでしょうか・・・ややこしいよね。
次回予告
次回は、休載に入るので未定です。（「ブログ休載のご連絡」）
関連記事
Movable Typeに関連する記事を、ご紹介します。
1：ブログ・ツールって何だ？
2：InstaMTの導入
3：Movable Type 4の基本
4：Movable Type 4を使ってみる
- ブログのタイトルを変更する
- MovableType スタイルを変更する
- MovableType ブログ記事、ウェブページとは？
- MovableType カテゴリの作成方法
- MovableType フォルダの作成方法
- MovableType 公開パスを変更する方法
- MovableType 記事を投稿する方法
- MovableType 記事作成の項目一覧
- MovableType ウェブページを作成する方法
- MovableType 画像をアップロードする方法
5：Movable Type 4のカスタマイズ
- MovableType テンプレートの仕組み（この記事です）
作成日：2008/07/04 更新日：2008/07/04
« 「MovableType 画像をアップロードする方法」｜
コメントありがとうございます。
mt
日本一のクリエータ
いつもコメントありがとうございます。
あら、CSSは、いきなり編集って出来ないのかしら。
うーん・・・こういう情報がもうひとつ見つからないのよねーん。
この辺の手順さえ固まれば、あとは変数とか覚えればいいだけだし、
粛々と進められると思うんですけどね。
ややこしや〜♪ややこしや〜♪
インクルードモジュールは、ここで編集できるのではないかしら。
・・・と申しましょうか、ブラウザ上で更新できなかったら、
ブログツールだのCMSだのとは、よう言わんような気がするんだな。
構造も素直に木構造になっていると分かりやすいんだけどなぁ。
図を付けても、すごい説明を書くのが難しかったです。
本日より、お休みをいただきます。
コメント欄は、今日いっぱい開けておいて、閉めようと思います。
どうやって閉めるのでしょうねー。
お休み期間中は、ネットに接続できないので、
開発とかは、あまり進まないような気がします。
ネットの情報への依存度は高いものなぁ。
とりあえず、出来ることを出来るだけ頑張ってみます。
私も、ひろこさんが日本一のクリエータになるように、
応援しています！（・▽・）
こちらこそ、ありがとうございました。
また、お会いできる日を楽しみにしています。
最後＾＾；
最後にもう一回だけ書き込みさせて下さい。
まとめて頂いたのに申し訳ないです。
MTの情報は少ない。自分もそう思います。
だからKumaCrowさんの記事はかなり貴重に思います。
初めての人（自分）でも、本当にわかりやすかったです！
でも書かれるのとても苦労された様で、本当にお疲れ様でした。
ありがたく大切に、情報を利用させて頂きたいと思います。
コメント欄は、たぶんブログ設定で閉じたりできるんじゃないかな？
おう、ネットに接続出来ないとは辛いですね。
うーん大変だ。
自分ならweb系の雑誌とか本とか買いあさっちゃうかも＾＾；
さみしくなるなあ！
でも、また会えるのならさみしさも半減です。
こちらこそ、またお話できるのを楽しみにしています＾＾
ありがとうございました！
MT4
最後コメントありがとうございます。
そうなんですよね。MTの情報って本当に少ないです。
MT4となると、小粋空間さん以外には、思い浮かばないです。
情報がお金になるから、セーブする人も多いのかしら。
いえいえ、何だか恩着せがましい書き方をしてしまって、
すみません。
私の画像の使い方が、ヘタやったなぁ〜というお話です。
おそらく、ポイントだけ、もっと効果的に使った方が、
見ている人も、見やすかったのではないかと思います。
お役に立てたなら、何よりでございます。
コメント欄は、承認制にしておくと、
ずっと承認待ちになるしなぁ。
入力フォームを削っておこうかと思います。
そうなんです。
ネットに接続できなくなるので、ピンチです。
人生いろいろあるものですなぁ。
それでは、またお会いできる日を楽しみにしております。
(*´∀`)人(´∀｀*) chao！
コメントの投稿
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/383-d06db352
ものすごい自分が躓いているところのお話だったので
（躓きっぱなしやないか・・・）
実際ローカルのMTと、サーバーのMTを開きつつ読みました。
（サーバーのMTはさっきテンプレに戻してきました。テンプレから頑張る！）
ｃｓｓ編集なのですが、自分全然使いこなしていないから
たぶん、なんですけどサーバーの方でもいきなり編集とかは出来なかったです。
前、自分がやった時は、エディタでｃｓｓを書いてからコピーして
MTのｃｓｓに貼り付けた気がする。
インクルードモジュールの存在、今知りました。
こんなのがあるんですね。ここから編集できたりもするのかな？
というか・・・前の自分のやり方ってもしかして間違ってたのかしらん＾＾；
いやはやMTむずかしい。
KumaCrowさんのMT記事熟読して再挑戦したいと思います！
今日でお休みに入りますね。
正直、今コメント欄あって安心しました。
KumaCrowさんがやりたい事、全部出来る様に応援してます。
お休み期間中、そういった開発は出来るのですか？
それなら、復活した時に超期待です。
あ、でもネット接続が出来ないならパソ子から離れるのかなあ。
自分も頑張ります！
いろいろな新しい世界をありがとうございます。
またお話できるのが楽しみです。