Movable Type のテンプレートを Dreamweaver で編集する
※この記事はMovable Type 3を対象に書いた記事です。Movable Type 4 では設定方法が若干異なります。ご了承ください。
Movable Type（ムーバブルタイプ） を簡易的なCMS（コンテンツ管理システム）として利用する場合、テンプレートのカスタマイズを行うことになります。テンプレートはブラウザ内の管理画面から書き換えが出来ますが、ここで編集作業を行うことは効率的ではありません。Movable Type ではテンプレートを外部のファイルにリンクすることができるので、Dreamweaverや秀丸など使い慣れたエディタでシームレスに編集作業を行うことができます。ここでは、Dreamweaver（ドリームウィーバー）を利用した効率的なMTのテンプレート編集を紹介します。
1. テンプレートが入るディレクトリを作成する
任意の場所にテンプレートを入れるディレクトリを作成します。パーミッションは707とします。
私はthemes/mathatelle1のようにして、mathatelle1の中にテンプレートファイルを入れています。こうしておくことで、themesの中にmathatelle1_20070203などとしてバックアップを管理できます。
2. このテンプレートにリンクするファイルを設定する
管理画面のメニューから「テンプレート」を開きます。まずは、インデックス・テンプレートの「メインページ」について設定をしてやりましょう。
「このテンプレートにリンクするファイル」に、リンクするファイルへのパスを指定します（MTのヘルプドキュメントでは絶対パスを推奨しています）。ファイル名はメインページなら"index.html"または"main.html"が良いでしょう。記入して保存ボタンを押せば、リモートサイトにテンプレートファイルが生成されます。
※パスがわからない人は、メニューから「環境」を開き、右上の「基本モードに切り替え」をクリックし、「サイトパス」を確認してください。
他のテンプレートについても同様に設定します。
スタイルシートのテンプレートについては、日常的にFTPが使える環境であれば、外部CSSを参照し、そのCSSファイルをDreamweaverで編集すると良いでしょう。私の場合、styles-site.cssはテンプレートの内容を
@import "/themes/mathatelle1/css/style.css";として、style.cssをDreamweaverで編集、FTPでPUTしています。
また、スタイルシートのテンプレートについては、「自動的に再構築する」のチェックをはずしておきましょう。サイトの更新ごとに再構築する必要がないからです。
3. 生成されたテンプレートをローカルにGETする
リモートサイトに生成されたテンプレートをローカルにGETします。
編集に入る前に、環境設定でファイルを開くときの文字コードの設定を確認しておきましょう。
これでDreamweaverで編集をする準備が整いました。
4. Dreamweaverでテンプレートを編集
ローカルにGETしたファイルを開きます。メインページのテンプレートを開いてみましょう。
Dreamweaver 拡張機能 for Movable Type 3をインストールすれば、コードヒントにMTタグが追加されるので、コードビューでの編集が効率的になります。
視覚デザインの確認がしたければ、「デザインタイムスタイルシート」という機能を使ってCSSを適用してやります。作業中だけ適用されるCSSで、テンプレートのソースには影響がありません。手順は以下の通り。
これでCSSが適用されます。
5. テンプレートをPUTし、再構築
編集が終わったらテンプレートをPUTし、Movable Type の管理画面にログインして再構築を行います。これで完了です。
特定のインデックステンプレートのみを更新したい場合は、該当テンプレートを開き「保存と再構築」ボタンを押します。エントリー・アーカイブなどアーカイブ・テンプレートを編集した場合は、メニューの「サイトを再構築」から再構築を行います。
関連リンク
更新履歴
2007年2月4日：動作対象をDreamweaver MX2004・Dreamweaver 8、Movable Type3.3として本ページを再編集しました。
わかりやすくてよかったです。
詳しい解説でよくわかりました。どうもありがとうございました。
とても参考になりました。ありがとうございます！
どこを調べても書かれていなかった知りたいところが、解りやすく説明されていてとても助かりました。
ありがとうございました！
ありがとう！！