PR

Movable TypeとDreamweaverの連携

2008年7月28日(月)
藤田 洋正

DreamweaverとMovable Typeを併用する

 テンプレートを作成後、Movable Typeの管理画面でテンプレートを設定するわけですが、Dreamweaverのコードヒントを活用し、作成したテンプレートのソースをテキストエリアにコピー&ペーストしてテンプレートを作成するのがテンプレートを設定する最も簡単な方法ですが、この方法の場合、その都度コピー&ペーストする必要があります。

 Webサイトの公開がされる前の構築段階で、ソースを変更するたび、何度もコピー&ペーストをするのは非常に面倒な作業です。

 筆者は、Dreamweaverでテンプレートをコーディングし、Dreamweaverでテンプレートをアップロードをして、Movable Typeの管理画面で再構築を行う、といったフローで作業を進めています。通常のコーディングフローに再構築の作業が加わっただけですから、さほど面倒に感じません。

 それでは、DreamweaverとMovable Typeを併用してテンプレートを管理する方法を解説します。

Movable Typeのテンプレートを設定する

 まず、Movable Typeのテンプレートを格納するためのディレクトリを作成します。

 今回はディレクトリ名を「mttemplate」とします。ディレクトリ名はどんな名称でも結構です。Dreamweaverを使用して、テンプレートとなるファイルを作成し、「mttemplate」ディレクトリ内に格納します。テンプレートとなるファイル名を「index.html」としました。作成した「mttemplate」ディレクトリと、「index.html」をサーバーにアップロードしてください。

 次に、Movable Typeの管理画面を開き、4つの手順でテンプレートを設定します。

 1番目に、Movable Typeの管理画面を開き、メニューの「デザイン→テンプレート」を選択します。

 2番目に、画面左側に「ブログのテンプレート」という見出しが表示されます。その見出しの下のリンクの「インデックステンプレートを作成」というリンクテキストをクリックします。

 3番目に、テンプレートの名称を任意で記述し、「出力ファイル名」を記述します。通常であれば、テキストエリアにテンプレートのソースをコピー&ペーストして「保存」ボタンをクリックし、テンプレートを作成しますが、テキストエリアは空で、「ファイルへのリンク」の個所に、テンプレートとして使用したいファイルへのパスを記述します。テンプレートは「mttemplate」ディレクトリに保存し、名称は「index.html」ですから、「mttemplate/index.html」と記述します。

 4番目に、[保存]ボタンをクリックし、テンプレートの設定が完了です。エラーが表示された場合は、アップロードしたテンプレートファイルとディレクトリのパーミッションを確認してください。

 以降、テンプレートを編集する際はDreamweaverでコードヒントを使用しながらソースを記述し、Dreamweaverでアップロードをして、Movable Typeの管理画面で再構築をすることによってテンプレートの適用がされます。

 構築の際に効率的に作業を進めることができるだけでなく、テンプレートのバックアップも簡単に行うことが可能になりますので、ぜひお試しください。

株式会社クリエイティブホープ
マークアップエンジニア。埼玉県出身、測量会社で測量士として従事するが、Webサイト制作に興味を持ち、株式会社クリエイティブホープに入社。昼夜を問わずHTML、CSS、ブラウザとの格闘に明け暮れている。マークアップ野郎!!:http://blog.creativehope.co.jp/markup/http://www.creativehope.co.jp/

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています