Dreamweaverのテンプレートの作り方をお探しですね。

Webサイトを運営していると、ヘッダーやナビゲーション、フッターなど、複数のページで同じパーツを使う場面がよくあります。

ページ数が少ないうちは手作業でも何とかなりますが、10ページ、30ページと増えてくると、共通部分の修正漏れが起こりやすくなってしまいます。

そんなとき便利なのが、Dreamweaverの「テンプレート（.dwt）」機能です。

共通レイアウトを1つのファイルで管理して、関連するHTMLページへまとめて反映できるので、作業がぐっと楽になります。

この記事では、Dreamweaverテンプレートの基本から作り方、ページへの適用方法、更新時の注意点まで、初心者の方にも分かりやすく解説していきます。

広告

Dreamweaverのテンプレート（.dwt）って何？複数ページ管理に便利な理由

Dreamweaverのテンプレートは、複数のHTMLページで共通して使うレイアウトやパーツを管理するための専用ファイルです。

拡張子は「.dwt」で、通常はサイト内の「Templates」フォルダに保存されます。

たとえば、サイト全体で共通のヘッダーやグローバルナビ、フッターをテンプレート側に用意しておけば、それをもとに作った各ページへ同じ構造を反映できるんです。

テンプレートの一番の特徴は、「編集できる部分」と「編集できない共通部分」を分けられること。

各ページで本文やページタイトルだけを変えたい場合は、その部分を「編集可能領域」として設定します。

一方、ロゴやメニュー、フッターの著作権表記など、全ページで統一したい要素はテンプレート側で管理して、個別ページでは基本的に変更できないようにします。

こうすることで、デザインの崩れや表記のバラつきを防ぎやすくなります。

また、テンプレートを使うメリットは修正作業の効率化だけではありません。

サイト全体の構造を統一できるので、ユーザーがページを移動したときに違和感を感じにくくなります。

さらに、ナビゲーションの追加やフッターリンクの変更、共通CSSやJavaScriptの読み込み調整などをまとめて行えるので、メンテナンスもしやすくなります。

特に静的HTMLで作られた小〜中規模サイトでは、CMSを導入しなくても共通パーツを管理しやすい方法として重宝します。

ただし、Dreamweaverのテンプレートは、サーバー上で自動的に共通部分を読み込む仕組みではありません。

テンプレートを更新すると、Dreamweaver上で関連HTMLファイルが書き換えられるので、その更新済みファイルをサーバーへアップロードする必要があります。

PHPのincludeやCMSのテーマ機能とは仕組みが違うので、「Dreamweaver内で静的HTMLを効率よく管理する機能」と理解しておくと、使い方を間違えにくくなりますよ。

テンプレート（.dwt）の作り方：サイト定義から編集可能領域の設定まで

Dreamweaverでテンプレートを使う前に、まず「サイト定義」を行うことが大切です。

サイト定義というのは、作業するWebサイトのローカルフォルダをDreamweaverに登録する設定のこと。

これをやらないままテンプレートを作ると、リンクパスや画像パスが正しく管理されず、ページ作成後にリンク切れが起きる原因になってしまいます。

テンプレートはサイト全体と結びついて動くので、最初に対象サイトをきちんと登録しておきましょう。

テンプレートを作る方法は、大きく分けて「既存のHTMLページから作る方法」と「新規テンプレートとして作る方法」があります。

初心者の方におすすめなのは、完成に近いHTMLページを1つ用意して、それをテンプレートとして保存する方法です。

共通化したいヘッダー、ナビゲーション、フッター、基本レイアウトをあらかじめ整えておくと、テンプレート化したあとの作業がスムーズになります。

基本的な流れはこんな感じです。

– Dreamweaverで基準にしたいHTMLファイルを開く
– 「ファイル」メニューから「テンプレートとして保存」を選ぶ
– サイトを選択して、テンプレート名を入力して保存する
– 本文やタイトルなど、ページごとに変更したい部分を「編集可能領域」に設定する

テンプレートとして保存すると、Dreamweaverは通常、サイト直下に「Templates」フォルダを作って、その中に「template.dwt」のようなファイルを保存します。

テンプレート名は後から管理しやすいように、「main.dwt」「base.dwt」「column2.dwt」など、用途が分かる名前にしておくと便利です。

複数のレイアウトを使うサイトなら、トップページ用、下層ページ用、2カラム用など、目的別にテンプレートを分けることもあります。

次に大事なのが、編集可能領域の設定です。

Dreamweaverでは、テンプレート内の一部を「この範囲だけ各ページで編集できる」と指定できます。

たとえば、メインコンテンツ部分を編集可能領域にすれば、各ページで本文を自由に変更できます。

ページタイトル、meta description、h1、本文エリアなど、ページごとに内容が変わる場所は編集可能にしておくのが基本です。

逆に、全ページで統一したいナビゲーションやフッターを編集可能にしてしまうと、ページごとに内容がバラバラになってしまうので注意してください。

編集可能領域には、分かりやすい名前を付けましょう。

「main」「content」「pageTitle」「description」など、後から見ても役割が分かる名前にすると管理しやすくなります。

日本語名でも扱える場合はありますが、環境の違いやコードの見通しを考えると、半角英数字の名前にしておく方が無難です。

テンプレートは一度作れば終わりではなく、サイト運営中に何度も見直す可能性があるので、最初の命名と構造設計が後の作業効率を左右しますよ。

テンプレートをページに適用する方法と、編集できる範囲の考え方

テンプレートを作ったら、それをもとにHTMLページを作成していきます。

Dreamweaverでは、テンプレートから新規ページを作ったり、既存ページにテンプレートを適用したりできます。

新規ページの場合は、テンプレートを選択してページを作ると、共通部分が固定された状態のHTMLが生成されて、編集可能領域だけを入力できるようになります。

これで、レイアウトを崩さずにページごとのコンテンツを作成できるわけです。

既存ページにテンプレートを適用する場合は、もともとのHTML構造とテンプレートの編集可能領域をどう対応させるかがポイントになります。

ページ本文がどの領域に入るのか、タイトルやmeta情報をどこで編集するのかを確認しながら適用しないと、意図しない場所に内容が入ったり、既存のコードが消えてしまったりする可能性があります。

大切な既存ページに適用する前には、必ずバックアップを取っておくと安心です。

テンプレートを適用したページでは、通常、テンプレート側でロックされている部分は編集できません。

これは不便に感じることもあるかもしれませんが、共通部分を誤って変更しないための仕組みなんです。

たとえば、あるページだけナビゲーションのHTMLを直接書き換えてしまうと、サイト全体の統一感が失われてしまいます。

テンプレート管理では「個別ページで変えるべき内容」と「全ページで統一すべき内容」を明確に分けることが大切です。

特にSEOを意識する場合、ページごとに変更できる領域を適切に設けることが欠かせません。

titleタグやmeta description、h1、本文コンテンツが全ページで同じになってしまうと、検索エンジンに各ページの違いが伝わりにくくなってしまいます。

なので、テンプレートを作る段階で、head内の必要な要素を編集可能にするか、少なくともページごとに調整できる設計にしておきましょう。

共通化を優先しすぎると、運用は楽になってもSEO上の柔軟性が落ちる場合があります。

テンプレート適用時に注意したい代表的なポイントは、次の3つです。

– ページごとに変えるべきtitle、description、h1、本文は編集可能にする
– 共通ナビゲーション、ロゴ、フッターなどはテンプレート側で管理する
– 画像やCSS、JavaScriptのパスはサイト定義を前提に正しく指定する

また、画像やCSSのリンクパスにも注意が必要です。

テンプレートファイルは「Templates」フォルダ内にありますが、実際に生成されるHTMLページはサイト内の別フォルダに保存されることがあります。

Dreamweaverがリンク調整を手伝ってくれますが、フォルダ構造が複雑なサイトでは、相対パスが想定通りになっているか確認しましょう。

公開前にブラウザで表示確認して、画像、CSS、リンク、スクリプトが正しく読み込まれているかをチェックすることが大切ですよ。

テンプレートの更新方法と、反映されないときの確認ポイント

テンプレートの本当の強みは、作成後の更新作業で特に発揮されます。

たとえば、全ページ共通のフッターに会社情報を追加したい場合、各HTMLファイルを1つずつ開いて修正する必要はありません。

元になっている「.dwt」ファイルを開いて、該当箇所を変更して保存すると、Dreamweaverがそのテンプレートを使っているページを更新するか確認してくれます。

ここで更新を実行すれば、関連ページの共通部分に変更が反映されます。

更新の基本手順は、テンプレートファイルを開いて修正し、保存時に表示される更新確認で対象ページを更新する流れです。

環境やバージョンによってメニュー名は少し違う場合がありますが、「テンプレートの更新」「ページの更新」「サイト全体の更新」といった機能から、テンプレートに紐づくページを再生成できます。

更新後は、ローカル環境のHTMLファイルが変更されるので、公開サイトへ反映するには更新されたHTMLファイルをサーバーにアップロードする必要があります。

ここで誤解しやすいのは、テンプレートファイルをサーバーへアップロードしただけでは、公開中のHTMLページが自動更新されるわけではないという点です。

Dreamweaverのテンプレートは、あくまでローカル側でHTMLを生成・更新するための管理機能なんです。

サーバー上でリアルタイムに共通パーツを読み込む仕組みではないので、テンプレート更新後にどのHTMLファイルが変更されたかを確認して、必要なファイルをアップロードしましょう。

テンプレートの変更がページに反映されない場合は、いくつかの原因が考えられます。

まず確認したいのは、そのHTMLページが本当に該当テンプレートから作られているかどうかです。

テンプレートと関連付いていない通常のHTMLファイルは、テンプレートを更新しても変更されません。

また、共通部分だと思っていた箇所が実は編集可能領域内にある場合、テンプレート側の修正が個別ページに反映されないことがあります。

反映トラブルを防ぐには、次の点を確認すると効果的です。

– 対象ページが正しいテンプレートに関連付いているか確認する
– 更新後のHTMLファイルを保存して、サーバーへアップロードしているか確認する
– ブラウザのキャッシュや古いCSSが原因で表示が変わっていないように見えていないか確認する

さらに、テンプレートを編集する前には、影響範囲を把握することも大切です。

1つのテンプレートに多数のページが紐づいている場合、小さなHTML変更でも全ページに影響します。

ナビゲーションのclass名を変更しただけでCSSが効かなくなったり、共通JavaScriptの読み込み位置を変えて動作に影響が出たりすることがあります。

大きな修正を行う場合は、ローカルで複数ページを確認して、必要に応じてバックアップを取ってから更新すると安全です。

Dreamweaverのテンプレートは、正しく使えば静的サイトの運用効率を大きく高められる機能です。

ポイントは、最初にサイト定義を行って、共通部分と編集可能領域をはっきり分けて、更新後は関連HTMLの反映とアップロードまで確認すること。

複数ページをまとめて管理したい場合は、単に作業時間を短縮するだけでなく、デザインや情報設計の統一にもつながります。

ページ数が増えて管理が大変になってきたら、Dreamweaverのテンプレート（.dwt）を活用して、修正漏れの少ない運用体制を整えてみてください。

広告