Dreamweaver でネストされたテンプレートを作成し、デザインエレメントを共有するページのコンテンツを制御する方法について説明します。

ネストされたテンプレートは、デザインおよび編集可能領域が別のテンプレートを基に作成されているテンプレートです。ネストされたテンプレートは、サイト内の複数ページで多数のデザインエレメントが共有されているがページ間の違いが少ない場合に、コンテンツを制御するために便利です。例えば、基本テンプレートでは、デザイン領域を広く定義し、サイトにコンテンツを提供する多数の製作者が利用できるようにします。一方、ネストされたテンプレートでは、サイト内の特定の部分用に編集可能領域をさらに定義します。

基本テンプレート内の編集可能領域はネストされたテンプレートに継承されます。それらの領域に新しいテンプレート領域が挿入されない限り、ネストされたテンプレートから作成されるページでも、編集可能なまま保持されます。

基本テンプレートに変更を加えると、基本テンプレートから作成されたテンプレートに自動的に反映されます。さらに、基本テンプレートとネストされたテンプレートから作成されたすべてのドキュメントに自動的に反映されます。

以下の例では、テンプレート trioHome に 3 つの編集可能領域があり、それぞれに BodyNav BarFooter という名前が付けられています。

3 つの編集可能領域を持つテンプレート
3 つの編集可能領域を持つテンプレート

ネストされたテンプレートを作成するために、テンプレートを基に新規ドキュメントを作成します。それをテンプレートとして保存して、「TrioNested」という名前を付けました。 ネストされたテンプレートの Body と名付けられた編集可能領域には、2 つの編集可能領域を追加しました。

ネストされたテンプレート
ネストされたテンプレート

ネストされたテンプレートに継承された編集可能領域に新しい編集可能領域を追加すると、編集可能領域のハイライト表示がオレンジ色に変わります。editableColumn のグラフィックなど、編集可能領域の外側に追加したコンテンツは、ネストされたテンプレートから作成されたドキュメントでは編集できなくなります。青でハイライト表示されている編集可能領域は、ネストされたテンプレートで追加された場合も、基本テンプレートから継承された場合も、ネストされたテンプレートから作成されたドキュメントで編集可能なまま維持されます。編集可能領域を挿入しなかったテンプレート領域は、テンプレートベースのドキュメントに編集可能領域として継承されます。

ネストされたテンプレートの作成

ネストされたテンプレートは、基本テンプレートのバリエーションです。複数のテンプレートをネストすれば、次々と特定のレイアウトを定義することができます。

初期設定では、基本テンプレートの編集可能なテンプレート領域はすべてネストされたテンプレートに継承され、さらにネストされたテンプレートを基に作成されるドキュメントに継承されます。つまり、基本テンプレートに編集可能領域を作成し、その後でネストされたテンプレートを作成すると、ネストされたテンプレートの編集可能領域に新しいテンプレート領域を挿入しない限り、その編集可能領域はネストされたテンプレートから作成されるドキュメントに表示されます。

注意:

編集可能領域内にテンプレートマークアップを挿入し、ネストされたテンプレートから作成されるドキュメントに編集可能領域として継承されないようにすることができます。このような領域は、青のボーダーの代わりにオレンジ色のボーダーで表示されます。

  1. ネストされたテンプレートの基となるテンプレートからドキュメントを作成します。次のいずれかの操作を実行します。

    • アセットパネルの左ペインから「テンプレート」をクリックします。下のペインから「テンプレートから新規作成」を選択します。

    • ファイル/新規を選択します。新規ドキュメントダイアログボックスで、「テンプレートから作成」カテゴリーを選択し、使用するテンプレートが設定されているサイトを選択します。テンプレートリストでそのテンプレートをダブルクリックして、新規ドキュメントを作成します。

  2. ファイル/別名で保存を選択します。名前を付けて保存ダイアログボックスで、タイプを指定して保存ドロップダウンリストで「テンプレートファイル」を選択します。

  3. 保存先」ボックスに名前を入力し、「OK」をクリックして、新規ドキュメントをネストされたテンプレートとして保存します。

ネストされたテンプレートへの編集可能領域継承の防止

ネストされたテンプレートでは、継承される編集可能領域は、青のボーダーで表示されます。編集可能領域内にテンプレートマークアップを挿入し、ネストされたテンプレートから作成されるドキュメントに編集可能領域として継承されないようにすることができます。このような領域は、青のボーダーの代わりにオレンジ色のボーダーで表示されます。

  1. コードビューで、継承しない編集可能領域を選択します。

    編集可能領域は、テンプレートコメントタグで定義されています。

  2. 編集可能領域に次のコードを追加します。
    @@(" ")@@

    このテンプレートコードは、編集可能領域で囲まれたタグ <!-- InstanceBeginEditable --><!-- InstanceEndEditable --> の中であれば、どこにでも配置することができます。以下に例を挙げます。

    <!-- InstanceBeginEditable name="EditRegion1" --> 
    <p>@@("")@@ Editable 1 </p> 
    <!-- InstanceEndEditable -->

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー