参照を作成する方法

参照とは、元の要素が変更されると自動的に更新される複製された要素です。例えば、フッターやお問い合わせフォームなど、特定の要素をすべてのサブページで複数回使用したいとします。参照を使用すれば、元の要素を調整するだけですべての参照が即座に更新されるため、個別に調整する必要はありません。

基礎知識

参照とは、要素またはセクションの複製です。例えば、複数の要素を含むセクションの参照を作成すると、そのセクションとそのすべてのコンテンツが単一のインスタンスに変換されます。つまり、参照が作成されると、参照内の子要素は1つの要素として扱われるため、選択できなくなります。

参照先の親要素に設定されたカスタムクラスは参照先に残ります。これにより、元の要素に有効なすべてのCSSが適用されます。
汎用クラスは、それぞれの参照クラスに置き換えられます。例えば、 .ed-headline は.ed-reference-headline に、.ed-text は.ed-reference-textに置き換えられます。
注: .ed-text 用に記述されている場合、適用されたスタイルを無効にできますが、 .ed-reference-text用には無効になりません。
参照オブジェクトには個別のIDが付与されます。
注: 特定のIDに対して適用されたスタイルが無効になる場合があります。
参照はプロジェクト (Web サイト) とそのすべてのサブページ内で有効になりますが、異なるプロジェクト (Web サイト) 間で適用することはできません。
参照を別の要素に変換し、個別に変更することができます（親要素と子要素）。これにより、参照は元の要素から切り離され、参照されなくなるため自動更新の動作は機能しなくなります。これは基本的に、要素を複製するのと同じです。

参照を作成する方法

仕組みを説明するために、ヘッダーを参照してみましょう。これは、すべてのサブページで同じヘッダーを維持したい場合に便利です。

参照は次のいずれかの方法で作成できます。

参照したい要素内で 右クリック し、 「参照を作成」 を選択すると、以下の参照が作成されます。エディター下部の パンくずリスト で、正しい要素が選択されていることを確認してください。目的の要素は通常、パンくずリストの一番左の要素、またはセクションの親コンテナです。
右クリック して 「コピー」 を選択し、参照を貼り付けたい場所に移動してもう一度 右クリック し、 「参照を貼り付け」 を選択します。これにより、コピーした要素が参照として、ページをまたいででも、必要な場所に貼り付けられます。
参照する要素を選択し、パンくずリスト内の要素を右クリックすると、コンテキストメニューが開き、 [ 参照の作成] を選択できます。

参照-1

パンくずリスト のコンテナが参照情報に変わっていることに注目してください。これにより、要素がオリジナルか参照されているかを簡単に確認できます。また、クラスは変更されていないことにも注目してください。

参照-2

参照設定

参照要素を ダブルクリック すると、左側に設定パネルが開きます。

参照-3

ここで、新しい ID といくつかの設定およびアクションを見つけることができます。

設定をコピー: このチェックボックスをオンにすると、特定のエフェクトやアニメーションが複製され、参照にも適用されます。
参照の変換: これを使用して、この参照を通常の複製に変換し、すべての更新動作を無効にします。
元の要素を表示: 元の要素が配置されている場所に移動します。

「スタイル」をクリックすると、アニメーションの追加、有効期限の設定、カスタムクラスの適用など、他の要素と同様にこの参照の設定を調整できます。

部分参照

ヘッダーの背景を変更したいが、メニューと情報バーはそのままにしておきたいなど、サブページでヘッダー全体を参照させたくない場合があります。特定の部分だけを参照したい場合は、以下の手順に従ってください。

まず、セクション全体をコピーします。パンくずリストで、正しいコンテナ要素が選択されていることを確認してください。パンくずリスト内のプリセットを右クリックするとコンテキストメニューが開き、 「コピー」 を選択できます。または、ショートカット [Ctrl + C] を使用することもできます。

参照-4

これで、ヘッダーをサブページに貼り付けることができます。この手順では、 「参照として貼り付け」 ではなく 「貼り付け」 を使用することが重要です。

この例では、

ヘッダーの背景を変更し、中央のテキストを調整したい
メニューと情報バーはすべてのサブページで同じである必要があります

ここでは、変更しない要素、つまり情報バーとメニューバーのみを参照します。そのためには、元のヘッダーに戻り、情報バーを選択します。ここでも、パンくずリストは、正しい要素を選択したかどうかを確認するのに役立ちます。次に、右クリックして 「コピー」 を選択します。サブページに戻り、ショートカット [Ctrl + SHIFT + V] を使用して 貼り付ける か、右クリックして **「参照として貼り付け」**を選択して、コピーした情報バーの下に情報バーを追加します。この場合、2つ目の情報バーは参照です。

参照-5

ここで、最初の情報バーを削除し、参照先の情報バーだけが表示されるようにします。パンくずリストをチェックして、参照先の情報バーを削除または保持していることを確認してください。

次に、メニューバーについても同じ手順を繰り返します。これで、参照先の情報バーとメニューバーが作成されます。これらの情報バーとメニューバーは、元の要素が変更されると自動的に変更されますが、ヘッダーの背景とテキストは必要に応じて調整できます。

これを好きなだけ繰り返すことで、すべてのサブページの外観に一貫性を持たせることができます。

ベストプラクティス

参照したい要素の種類と、それが他の要素とどのように関連しているかを理解することは常に重要です。パンくずリストは、要素を識別するための優れた方法です。例えば、サブページにヘッダー全体を表示したくない場合や、メニューや連絡先情報の一貫性を保ちながらヘッダー領域のテキストや画像を変更したい場合などです。

複数の要素をまとめて参照することも可能です。特にヘッダーセクション、メニュー、フッターについては、参照方式の使用をお勧めします。これらの要素は通常、各ページで同じです。

すべてのページに Cookie バーを表示したい場合は、すべてのサブページで既に参照されているフッターに Cookie 要素を設定することができます。そのため、どこでも Cookie を参照する必要はありません。