トップページ > サイト作成 > ウェブサイトの作成ソフト > Dreamweaver のテンプレート機能で作成の効率化アップと一括編集する方法

Dreamweaver のテンプレート機能で作成の効率化アップと一括編集する方法


[初回公開] 2014年10月15日

Dreamweaver にはブログのようにコンテンツの作成のみ行えるように、ウェブサイトのヘッダーやフッターをテンプレートとしてロックする機能があり、このテンプレートを利用してウェブサイト作成の効率アップと一括編集する方法について紹介する。

Dreamweaver のテンプレート機能で作成の効率化アップと一括編集する方法

1. Dreamweaver のテンプレート機能とは

Dreamweaver のテンプレート機能とは、ウェブサイトのヘッダーやフッターなど全てのページある共通パーツをテンプレートファイルに持つことで、共通パーツ部分と各ページのコンテンツと分業して作成することができるものである。

Dreamweaver で作成したテンプレートの拡張子は .dwt となり、Dreamwever で開くと自動的にテンプレートファイルとして認識される。

2. Dreamweaver のテンプレート機能が作成の効率化になる理由

Dreamweaver のテンプレート機能がウェブサイト作成の効率化になる理由は「コンテンツ作成に集中できる」と「変更時の作業時間短縮」の 2 点が挙げられる。
1 点目の「コンテンツ作成に集中できる」とは、予めウェブサイトのヘッダーやフッターを作成し、HEAD タグ内も用意しておくことで新規ページを作成する際はテンプレートに記述した箇所以外を作成するだけよい。
そのため、HEAD タグ内など全ページで共通となる箇所を一から用意する手間が無く、デザインビューで表示したときはテンプレート部分は編集できずロックされるため、不用意に操作してページの統制が崩れることも無くブログのようにコンテンツを増やすことができる。

2 点目の「変更時の作業時間短縮」とは、ウェブサイトが完成した後でヘッダーやフッターの変更が入ると全ページを一つずつ修正せずとも、テンプレートファイルのみを修正するだけで保存時に全ての HTML ファイルも更新してくれる。
そのため、修正に要する作業時間が大幅に短縮できるだけでなく、編集漏れを無くすこともできる。

3. Dreamweaver でテンプレートを作成する方法

Dreamweaver でテンプレートを作成する方法としては、まず Dreamweaver を起動して上部メニューより「ファイル -> 新規ファイル」を選択する。
新規作成で表示される一覧から「空白のテンプレート -> HTML テンプレート」を選択する。

「空白のテンプレート -> HTML テンプレート」を選択

「空白のテンプレート -> HTML テンプレート」を選択すると通常の HTML ファイルを編集するようにコードとデザインビューで操作することができる。
ただ、通常の HTML ファイルと違う点は Dreamweaver で用意されているテンプレート専用のタグがあり、このタグで全ページ共通にする箇所や、コンテンツによっては編集可能な領域にするなど使い分けることができる。

テンプレートファイルのコードを表示した様子

テンプレートファイルを作成すると、編集中のウェブサイトのディレクトリ配下に自動的にフォルダ「Templates」が作成され、.dwt ファイルが保存される。
コンテンツ作成時は、各 HTML ファイルがこのテンプレートファイルを読み込んで利用される。

テンプレートファイルが保存されるディレクトリ

4. Dreamweaver で一括編集する方法

Dreamweaver で一括編集する方法は、前述のテンプレートファイルを編集して保存するだけで、テンプレートを利用している HTML ファイル全ても自動的に更新される。
一括で編集した後は全ての HTML ファイルが上書き保存されるため、テンプレートファイルを編集する前はウェブサイトがあるフォルダごとコピーしてバックアップしておくと編集を間違ってもやり直すことができる。

関連記事

@webolve をフォローしてください