マニュアルキャンセル

Dreamweaver テンプレートについて

検索

最終更新日 : 2021年4月28日

Dreamweaver テンプレートを使用して、"固定" ページレイアウトをデザインし、そのページレイアウトを継承したテンプレートに基づいてドキュメントを作成する方法について説明します。

テンプレートは、"固定" ページレイアウトをデザインするために使用する特殊なドキュメントです。そのページレイアウトを継承したテンプレートに基づいて、ドキュメントを作成することができます。テンプレートをデザインする際、そのテンプレートに基づいて、ドキュメント内でユーザーが編集できるコンテンツを "編集可能" として指定します。テンプレートにより、ライターやグラフィックアーティスト、Web デベロッパーなどのテンプレートユーザーが編集できるページエレメントをテンプレートの作成者が制御できます。テンプレートの作成者がドキュメントに設定できるテンプレート領域には数種類あります。

注意：

テンプレートを使用することにより、広範囲のデザイン領域を制御し、レイアウト全体を再利用することができます。サイトの著作権情報やロゴなど、個別のデザインエレメントを再利用する場合は、ライブラリ項目を作成します。

テンプレートを使用すると、複数のページを同時に更新することができます。テンプレートを使用して作成されたドキュメントは、後からテンプレートを切り離さない限り、そのテンプレートに関連付けられたまま維持されます。テンプレートを変更すると、そのテンプレートから作成されたすべてのドキュメントのデザインを、瞬時に更新することができます。

注意：

Dreamweaver のテンプレートは、Dreamweaver テンプレートのページセクションが初期設定で固定または編集不能になっている、他の Adobe Creative Cloud ソフトウェアのテンプレートと異なります。

テンプレート領域のタイプ

ドキュメントをテンプレートとして保存すると、ドキュメントのほとんどの領域がロックされます。テンプレートの作成者は、テンプレートから作成されたドキュメントのどの領域を編集できるようにするかを、テンプレートに編集可能領域または編集可能パラメーターを挿入することによって指定します。

編集可能領域およびロックされている領域は、テンプレートを作成しながら変更することができます。ただし、テンプレートから作成されたドキュメントでは、テンプレートユーザーが編集できる領域は、編集可能領域に制限されます。つまり、ロックされている領域を変更することはできません。

テンプレート領域には、次の 4 つのタイプがあります。

編集可能領域：テンプレートから作成されたドキュメント内のロックされていない領域、つまりテンプレートユーザーが編集できる部分です。テンプレートの作成者は、テンプレートの任意の領域を編集可能領域として指定できます。テンプレートを有効にするには、最低 1 つの編集可能領域を定義する必要があります。そうでないと、テンプレートから作成されたページを編集することができません。編集可能領域について詳しくは、テンプレート編集可能領域の作成を参照してください。

リピート領域：テンプレートから作成されたドキュメントに設定されたドキュメントレイアウトの 1 つのセクションです。テンプレートユーザーは、必要に応じてこのリピート領域のコピーを追加または削除できます。例えば、テーブルの行を繰り返すように設定できます。リピート領域は編集可能で、テンプレートユーザーは繰り返しエレメント内のコンテンツを編集できます。デザイン自体はテンプレートの作成者によって制御されます。

テンプレートに挿入できるリピート領域には、リピート領域とリピートテーブルの 2 つのタイプがあります。リピート領域の使用方法については、Dreamweaver でのリピート領域およびテーブルの作成を参照してください。

オプション領域：ドキュメントに表示または非表示にするテキストまたはイメージなどのコンテンツが保持された、テンプレートの一部分です。テンプレートから作成されたページにコンテンツを表示するかどうかは、通常、テンプレートユーザーが制御します。詳しくは、オプション領域節を参照してください。

編集可能なタグ属性：テンプレート内のタグ属性のロックを解除して、テンプレートから作成されたページで属性を編集できます。例えば、テンプレートの作成者がドキュメントに表示するイメージを「ロック」して、イメージを左、右、中央のいずれに表示するかは、テンプレートユーザーが設定できるようにすることができます。詳しくは、Dreamweaver での編集可能なタグ属性の定義を参照してください。

テンプレート内のリンク

既存のページをテンプレートとして保存する方法でテンプレートファイルを作成すると、Templates フォルダー内に保存される新しいテンプレートとファイル内のすべてのリンクが、正しいドキュメント相対パスに更新されます。そのテンプレートを使用してドキュメントを作成し保存すると、ドキュメント相対リンクがすべて更新され、正しいファイルへのリンクが維持されます。

新しいドキュメント相対リンクをテンプレートファイルに追加する場合、プロパティインスペクターの「リンク」テキストボックスにパスを入力すると、誤ったパス名を入力してしまうことがあります。テンプレートファイルの正しいパスは、Templates フォルダーから、リンクするドキュメントへのパスです。テンプレートから作成されたドキュメントのフォルダーから、リンクするドキュメントへのパスではありません。テンプレートにリンクを作成する場合は、プロパティインスペクターのフォルダーアイコンまたはファイルの指定アイコンを使用して、リンクの正しいパスを設定します。

テンプレートのサーバースクリプトおよびテンプレートから作成されたドキュメント

サーバースクリプトの中には、ドキュメントの最先端または最後尾（<html> タグの前、または </html> タグの後）に挿入されるものがあります。このようなスクリプトは、テンプレートおよびテンプレートから作成したドキュメントにおいて、特別な扱いが必要です。通常、テンプレートの <html> タグの前、または </html> タグの後にあるスクリプトコードを変更しても、テンプレートから作成するドキュメントに変更はコピーされません。そのため、テンプレートの本体に含まれる他のサーバースクリプトが、コピーされなかったスクリプトに依存している場合、サーバーにエラーが生じる可能性があります。テンプレートの <html> タグの前、または </html> タグの後にあるスクリプトを変更すると、警告が表示されます。

この問題を避けるには、テンプレートの head セクションに、以下のコードを挿入します。

<!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->

このコードがテンプレートに挿入されると、<html> タグの前または </html> タグの後のスクリプトへの変更は、テンプレートから作成されたドキュメントにコピーされます。ただし、ドキュメント側でこれらのスクリプトを編集することはできなくなります。つまり、これらのスクリプトの編集は、テンプレート、またはテンプレートから作成したドキュメントのいずれかで行います。両方では編集できません。

テンプレートパラメーター

テンプレートパラメーターは、テンプレートから作成されたドキュメント内のコンテンツを制御するための値を示します。テンプレートパラメーターは、オプション領域や編集可能タグ属性に使用するだけでなく、添付先のドキュメントに継承する値の設定に使用できます。それぞれのパラメーターには、名前、データタイプ、および初期設定値を選択します。パラメーター名は、大文字と小文字が区別され一意の名前でなければなりません。パラメーターには、テキスト、Boolean、カラー、URL、数値の 5 つの許可されたデータタイプのいずれかを使用する必要があります。

テンプレートパラメーターは、インスタンスパラメーターとしてドキュメントに渡されます。テンプレートユーザーは、通常、パラメーターの初期設定値を編集して、テンプレートから作成されたドキュメントに表示するコンテンツをカスタマイズできます。また、テンプレート作成者は、テンプレート式の値に基づいて、ドキュメントに表示するコンテンツを決定することできます。

テンプレート式

テンプレート式は、値を計算または評価するステートメントです。

式を使用して値を保存し、その値をドキュメントに表示することができます。例えば、@@(Param)@@ などのようにパラメーターの値と同じくらいシンプルな式、または @@((_index & 1) ? red : blue)@@ などのように、テーブル行の背景色を変換するための値を計算する複雑な式を作成することができます。

単独の if 条件または複数の if 条件を表す式を定義することもできます。条件ステートメントで使用される式は、Dreamweaver では true（真）または false（偽）として評価されます。条件が true の場合、テンプレートから作成されたドキュメントにオプション領域が表示され、条件が false の場合は表示されません。

テンプレート式は、オプション領域を挿入するときにコードビューまたはオプション領域ダイアログボックスで定義できます。

コードビューでテンプレート式を定義するには、コメントで <! と記述する方法と、@@(式)@@ と記述する方法の 2 つがあります。テンプレートコードにテンプレート式を挿入すると、デザインビューに式のマーカーが表示されます。そのテンプレートを適用すると、Dreamweaver によって式が評価され、テンプレートから作成されたドキュメントに値が表示されます。

テンプレート式の言語

テンプレート式の言語は JavaScript の少数のサブセットであり、JavaScript のシンタックスと優先ルールが使用されています。例えば以下のように JavaScript の演算子を使用して、式を記述します。

@@(firstName+lastName)@@

サポートされている機能および演算子は以下のとおりです。

数字リテラル、ストリングリテラル（二重引用符のシンタックスのみ）、ブールリテラル（true または false）
変数リファレンス（この項の後半に示された定義済みの変数のリストを参照）
フィールドリファレンス（"dot" 演算子）
単項演算子： +, -, ~, !
バイナリ演算子： +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >>
条件演算子： ?:
カッコ：()
データタイプには、ブール、IEEE 64 bpc 浮動小数点、ストリング、およびオブジェクトが使用されます。Dreamweaver のテンプレートでは、JavaScript の "null" タイプおよび "undefined" タイプはサポートされていません。また、オブジェクトに暗黙的に変換されるスカラータイプも使用できません。したがって、"abc".length という式はエラーを引き起こし、3 という値を求めることはできません。
式オブジェクトモデルで定義されているオブジェクトのみ使用できます。定義されている変数は、以下のとおりです。
_document
ドキュメント内のパラメーターごとに 1 つずつフィールドがあり、ドキュメントレベルのテンプレートデータを保持します。
_repeat
リピート領域内に表示される式に対してのみ定義されます。領域に関する組み込み情報を指定します。
_index
現在のエントリの数字インデックス（0 から）。
_numRows
このリピート領域に含まれるエントリの合計数。
_isFirst
現在のエントリがリピート領域の最初のエントリの場合は true。
_isLast
現在のエントリがリピート領域の最後のエントリの場合は true。
_prevRecord
_repeat オブジェクト。領域の最初のエントリに対してこのプロパティを使用するとエラーになります。
_nextRecord
_repeat オブジェクト。領域の最後のエントリに対してこのプロパティを使用するとエラーになります。
_parent
ネストされたリピート領域で、外側のリピート領域の "_repeat" オブジェクトを指定します。ネストされたリピート領域以外にこのプロパティを使用するとエラーになります。
式の評価では、_document オブジェクトおよび _repeat オブジェクトのすべてのフィールドが暗黙的に使用可能になります。例えば、_document.title の代わりに title を入力して、ドキュメントのタイトルパラメーターを表示することができます。
フィールドの衝突が生じた場合は、_repeat オブジェクトのフィールドが _document オブジェクトのフィールドに優先します。したがって、_document または _repeat を明示的に参照する必要はありません。ただし、リピート領域のパラメーターによって非表示にされているドキュメントパラメーターを参照するために、リピート領域の内側に _document が必要な場合を除きます。
ネストされたリピート領域が使用されている場合は、最も内側にあるリピート領域のフィールドのみが暗黙的に使用可能になります。外側の領域は、_parent を使用して明示的に参照する必要があります。

テンプレートコードの複数の If 条件

単独の if 条件または複数の if 条件を表すテンプレート式を定義できます。以下の例は、"Dept" というパラメーターを定義して、初期値を設定した後、表示するロゴを確定する複数の If 条件を定義しています。

以下は、テンプレートの head セクションに入力するコード例です。

<!-- TemplateParam name="Dept" type="number" value="1" -->

次の条件ステートメントは、Dept パラメーターに割り当てられた値をチェックします。条件が true、つまり一致する場合は、適切なイメージが表示されます。

<!-- TemplateBeginMultipleIf --> 
<!-- checks value of Dept and shows appropriate image--> 
<!-- TemplateBeginIfClause cond="Dept == 1" --> <img src=".../sales.gif"> <!-- TemplateEndIfClause --> 
<!-- TemplateBeginIfClause cond="Dept == 2" --> <img src=".../support.gif"> <!-- TemplateEndIfClause--> 
<!-- TemplateBeginIfClause cond="Dept == 3" --> <img src=".../hr.gif"> <!-- TemplateEndIfClause --> 
<!-- TemplateBeginIfClause cond="Dept != 3" --> <img src=".../spacer.gif"> <!-- TemplateEndIfClause --> 
<!-- TemplateEndMultipleIf -->

テンプレートからドキュメントを作成すると、テンプレートパラメーターが自動的にそのドキュメントに渡されます。テンプレートユーザーは表示するイメージを決定します。

その他の関連ヘルプ

Adobe

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト

今すぐ登録