マニュアル キャンセル

Dreamweaver テンプレートについて

  1. Dreamweaver ユーザーガイド
  2. はじめに
    1. レスポンシブ web デザインの基本
    2. Dreamweaver の新機能
    3. Dreamweaver を使用した web 開発 - 概要
    4. Dreamweaver / よくある質問
    5. キーボードショートカット
    6. Dreamweaver の必要システム構成
    7. 機能の概要
  3. Dreamweaver と Creative Cloud
    1. Dreamweaver 設定と Creative Cloud の同期
    2. Dreamweaver での Creative Cloud ライブラリ
    3. Dreamweaver での Photoshop ファイルの使用
    4. Adobe Animate と Dreamweaver の操作
    5. ライブラリから web 用に最適化された SVG ファイルを抽出する
  4. Dreamweaver のワークスペースとビュー
    1. Dreamweaver ワークスペース
    2. ビジュアル開発のための Dreamweaver ワークスペースの最適化
    3. ファイル名またはコンテンツに基づいたファイルの検索 | Mac OS
  5. サイトの設定
    1. Dreamweaver サイトについて
    2. ローカルバージョンのサイトの設定
    3. Publishing server への接続
    4. テストサーバーの設定
    5. Dreamweaver サイトの設定の読み込みおよび書き出し
    6. リモートサーバーからローカルサイトのルートに既存の web サイトを取り込む
    7. Dreamweaver のアクセシビリティ機能
    8. 詳細設定
    9. ファイル転送に関するサイト環境設定の設定
    10. Dreamweaver でのプロキシサーバー設定の指定
    11. Dreamweaver 設定と Creative Cloud の同期
    12. Dreamweaver での Git の使用
  6. ファイルの管理
    1. ファイルの作成およびオープン
    2. ファイルとフォルダーの管理
    3. サーバーからのファイルの取得とサーバーへのファイルの送信
    4. ファイルのチェックインとチェックアウト
    5. ファイルの同期
    6. ファイルの違いの比較
    7. Dreamweaver サイト内のファイルおよびフォルダーのクローク
    8. Dreamweaver サイトでのデザインノートの有効化
    9. Gatekeeper の脆弱性の悪用を防ぐ
  7. レイアウトとデザイン
    1. レイアウト用ビジュアルエイドの使用
    2. CSS を使用したページのレイアウトについて
    3. Bootstrap を使用したレスポンシブな web サイトのデザイン
    4. Dreamweaver でのメディアクエリーの作成と使用
    5. テーブルを使用したコンテンツの表示
    6. カラー
    7. 可変グリッドレイアウトによるレスポンシブデザイン
    8. Dreamweaver 内の Extract
  8. CSS
    1. カスケーディングスタイルシートについて
    2. CSS デザイナーを使用したページのレイアウト
    3. Dreamweaver での CSS プリプロセッサーの使用
    4. Dreamweaver で CSS スタイルの環境設定を行う方法
    5. Dreamweaver での CSS ルールの移動
    6. Dreamweaver でのインライン CSS の CSS ルールへの変換
    7. Div タグの操作
    8. 背景へのグラデーションの適用
    9. Dreamweaver での CSS3 移行効果の作成および編集
    10. コードのフォーマット
  9. ページコンテンツとアセット
    1. ページプロパティの設定
    2. CSS 見出しプロパティおよび CSS リンクプロパティの設定
    3. テキストの操作
    4. テキスト、タグ、属性の検索と置換
    5. DOM パネル
    6. ライブビューでの編集
    7. Dreamweaver でのドキュメントのエンコード
    8. ドキュメントウィンドウでのエレメントの選択および表示
    9. プロパティインスペクターでのテキストプロパティの設定
    10. web ページのスペルチェック
    11. Dreamweaver での区切り線の使用
    12. Dreamweaver でのフォントの組み合わせの追加と変更
    13. アセットを使用した作業
    14. Dreamweaver での日付の挿入と更新
    15. Dreamweaver でのお気に入りアセットの作成と管理
    16. Dreamweaver でのイメージの挿入と編集
    17. メディアオブジェクトの追加
    18. Dreamweaver でのビデオの追加
    19. HTML5 ビデオの挿入
    20. SWF ファイルの挿入
    21. オーディオエフェクトの追加
    22. Dreamweaver での HTML5 オーディオの挿入
    23. ライブラリ項目の操作
    24. Dreamweaver でのアラビア語およびヘブライ語のテキストの使用
  10. リンクおよびナビゲーション
    1. リンクおよびナビゲーションについて
    2. リンク
    3. イメージマップ
    4. リンクのトラブルシューティング
  11. jQuery Widget と効果
    1. Dreamweaver での jQuery UI Widget と Mobile Widget の使用
    2. Dreamweaver での jQuery 効果の使用
  12. web サイトのコーディング
    1. Dreamweaver でのコーディングについて
    2. Dreamweaver のコーディング環境
    3. コーディングの環境設定
    4. コードカラーリングのカスタマイズ
    5. コードの記述と編集
    6. コードヒントとコード補完機能
    7. コードの折りたたみと展開
    8. スニペットでコードを再利用する
    9. 構文チェックコード
    10. コードの最適化
    11. デザインビューでのコードの編集
    12. ページのヘッドコンテンツの操作
    13. Dreamweaver でのサーバーサイドインクルードの挿入
    14. Dreamweaver でのタグライブラリの使用
    15. Dreamweaver へのカスタムタグの読み込み
    16. JavaScript ビヘイビアーの使用(基本操作)
    17. JavaScript に組み込まれているビヘイビアーの適用
    18. XML および XSLT について
    19. Dreamweaver でのサーバーサイド XSL 変換の実行
    20. Dreamweaver でのクライアントサイド XSL 変換の実行
    21. Dreamweaver での XSLT の文字エンティティの追加
    22. コードのフォーマット
  13. 製品間ワークフロー
    1. Dreamweaver への拡張機能のインストールと使用
    2. Dreamweaver のアプリ内アップデート
    3. Dreamweaver での Microsoft Office 文書の挿入(Windows のみ)
    4. Fireworks および Dreamweaver による作業
    5. Contribute を使用した Dreamweaver サイトでのコンテンツの編集
    6. Dreamweaver と Business Catalyst の統合
    7. パーソナライズされた電子メールキャンペーンの作成
  14. テンプレート
    1. Dreamweaver テンプレートについて
    2. テンプレートおよびテンプレートから作成されたドキュメントの認識
    3. Dreamweaver テンプレートの作成
    4. テンプレート編集可能領域の作成
    5. Dreamweaver でのリピート領域およびテーブルの作成
    6. テンプレートの任意の領域の使用
    7. Dreamweaver での編集可能なタグ属性の定義
    8. Dreamweaver でネストされたテンプレートを作成する方法
    9. テンプレートの編集、更新、削除
    10. Dreamweaver での xml コンテンツの書き出しおよび読み込み
    11. 既存のドキュメントでのテンプレートの適用または削除
    12. Dreamweaver テンプレートでのコンテンツの編集
    13. Dreamweaver でのテンプレートタグのシンタックスルール
    14. テンプレート領域のハイライト表示の環境設定
    15. Dreamweaver でテンプレートを使用する利点
  15. モバイルとマルチスクリーン
    1. メディアクエリーの作成
    2. モバイルデバイス向けのページ方向の変更
    3. Dreamweaver を使用したモバイルデバイス向けの web アプリの作成
  16. 動的サイト、ページおよび web フォーム
    1. web アプリケーションについて
    2. アプリケーション開発のためのコンピューター設定
    3. データベース接続のトラブルシューティング
    4. Dreamweaver での接続スクリプトの削除
    5. 動的ページのデザイン
    6. 動的コンテンツソースの概要
    7. 動的コンテンツのソースの定義
    8. ページへの動的コンテンツの追加
    9. Dreamweaver での動的コンテンツの変更
    10. データベースのレコードの表示
    11. Dreamweaver でのライブデータの入力とトラブルシューティング
    12. Dreamweaver でのカスタムサーバービヘイビアーの追加
    13. Dreamweaver を使用したフォームの作成
    14. フォームを使用したユーザーからの情報の収集
    15. Dreamweaver での ColdFusion フォームの作成と有効化
    16. web フォームの作成
    17. フォームエレメントの HTML5 サポート強化
    18. Dreamweaver を使用したフォームの開発
  17. アプリケーションのビジュアル開発
    1. Dreamweaver でのマスターページと詳細ページの作成
    2. 検索ページと結果ページの作成
    3. レコード挿入ページの作成
    4. Dreamweaver でのレコードの更新ページの作成
    5. Dreamweaver でのレコード削除ページの作成
    6. Dreamweaver での ASP コマンドによるデータベースの修正
    7. 登録ページの作成
    8. ログインページの作成
    9. 許可されたユーザーのみがアクセスできるページの作成
    10. Dreamweaver を使用した ColdFusion のフォルダーの保護
    11. Dreamweaver での ColdFusion コンポーネントの使用
  18. web サイトのテスト、プレビュー、パブリッシュ
    1. ページのプレビュー
    2. 複数のデバイスでの Dreamweaver web ページのプレビュー
    3. Dreamweaver サイトのテスト
  19. トラブルシューティング
    1. 修正された問題
    2. 既知の問題

 

 

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 の場合は表示されません。

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

コードビューでテンプレート式を定義するには、コメントで <!<!-- TemplateExpr expr="式" --> と記述する方法と、@@(式)@@ と記述する方法の 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 2025

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

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