コンポーネント

コンポーネントの作成方法

サイト内のほとんどの要素や要素グループからコンポーネントを作成できます。これは以下の4つの方法で行えます：

• 「コンポーネントを作成」ボタンをクリックして作成する
• 要素を右クリックして作成する
• コンポーネントパネルを開いて作成する
• キーボードショートカットを使用して作成する

“Create component” ボタンをクリックして作成する

次の手順で新しいコンポーネントを作成できます：

1. コンポーネントに変換したい要素を選択します。
2. StyleパネルまたはElement settingsパネルを開きます。
3. パネルの上部にある「Create component」をクリックします。
4. コンポーネントに名前を付け、[Create] をクリックします。

要素を右クリックして作成する

次の手順で新しいコンポーネントを作成できます：

1. コンポーネントに変換したい要素を選択します。
2. 右クリックし、「Create component」を選択します。
3. コンポーネントに名前を付け、[Create] をクリックします。

コンポーネントパネルを開いて作成する

次の手順で新しいコンポーネントを直接コンポーネントパネルから作成できます：

1. コンポーネントに変換したい要素を選択します。
2. Componentsパネルを開きます（またはキーボードショートカット Shift + A を使用します）。
3. Create new componentをクリックします。
4. コンポーネントに名前を付け、[Create] をクリックします。

キーボードショートカットを使用して作成する

詳しくは、メインコンポーネントの編集方法をご覧ください。

キーボードのショートカットキーを使用して、コンポーネントパネルを開き新しいコンポーネントを作成できます：

1. コンポーネントに変換したい要素を選択します。
2. Command + Shift + A（Mac の場合）または Control + Shift + A（Windows の場合）を押します。
3. コンポーネントに名前を付け、[作成] をクリックします。

上記のいずれかの方法でコンポーネントを作成した後、主なコンポーネントを編集することになります。主なコンポーネントへのすべての変更は、そのコンポーネントのすべてのインスタンスに反映されます。いつでも、以下の方法で任意のコンポーネントインスタンス内に主なコンポーネントを編集できます：

• インスタンスを右クリックして [Edit component] を選択します。
• インスタンスを選択し、ラベル内の [Edit component] アイコン（鉛筆アイコン）をクリックします。
• インスタンスを選択し、スタイル、要素設定、またはインタラクションパネルから [Edit component] ボタンをクリックします。
• インスタンスを選択し、キーボードショートカット Control + Enter を使用します。
• インスタンスを選択し、キーボードで Control キーを押してからインスタンスを ダブルクリック します。

詳細については、主なコンポーネントの編集方法 を確認してください。

コンポーネントの使い方と再利用

コンポーネントは、コンポーネントパネルからアクセスできます。（キーボードショートカット Shift + A を使用して、直接コンポーネントにアクセスできます。）

コンポーネントを作成したら、サイト内のどこでも再利用できます。

1. コンポーネントパネル（Components panel） を開きます。
2. 希望のコンポーネントを選択してドラッグアンドドロップし、サイト内の任意のページに配置します。
3. コンポーネントインスタンスをキャンバスに直接ドロップするか、ナビゲーターにドロップしてより精密に配置します。

コンポーネントインスタンスを選択すると、緑色でハイライト表示されてアウトラインが表示されます。[コンポーネントパネル] を開いて、サイト内で各コンポーネントが何回使用されているかを確認できます。

キーボードショートカット Command + E（Mac の場合）または Control + E（Windows の場合）を使用して、クイック検索を使用してキャンバスにコンポーネントを追加することもできます。。

注意: コンポーネントインスタンスを複製することは可能です（コピー＆ペースト、右クリック、またはキーボードショートカットの使用を使用して複製することができます）、しかし、主なコンポーネントをネイティブで複製することは現時点ではできません。代わりに、コンポーネントインスタンスをリンク解除し、そのリンク解除された要素または要素グループから新しいコンポーネントを作成できます。

主なコンポーネントをダブルクリックすると、主なコンポーネントに入り、コンポーネントの要素階層をナビゲーターパネルで表示できます。コンポーネントの要素階層は、主なコンポーネントからのみ表示されます（つまり、コンポーネントインスタンス内からでは表示されません）。

コンポーネントの場所を確認するためには、ナビゲーターパネルを開いてください。主なコンポーネントを編集した後、それを展開または折りたたんで、その中身を確認できます。これには他のネストされたコンポーネントも含まれます。

コンポーネントの編集方法

さまざまな方法でコンポーネントを操作し、編集する手順を説明しましょう。

• 主なコンポーネントの編集
• 主なコンポーネントからの終了
• エディター内でのコンポーネントの編集
• コンポーネントの名前の変更
• コンポーネントの削除

主なコンポーネントの編集

コンポーネントのすべてのインスタンスに対して同じ変更を行うには、主なコンポーネントを編集する必要があります。コンポーネントインスタンス上で主なコンポーネントを編集するには、以下のいずれかの方法を使用できます：

• コンポーネントインスタンスをダブルクリックする
• インスタンスを右クリックし、「Edit component」を選択する
• インスタンスを選択し、ラベル内の「鉛筆」アイコンをクリックする
• インスタンスを選択し、スタイル、エレメント設定、または相互作用パネルで「Edit component」ボタンをクリックする
• インスタンスを選択し、キーボードショートカット Enter を使用する

コンポーネント・インスタンスを右クリックし、"Edit component "を選択してメイン・コンポーネントを編集する。

コンポーネント・インスタンスを選択し、ラベルの "鉛筆 "アイコンをクリックしてメイン・コンポーネントを編集する。

コンポーネントインスタンスを選択する。スタイルパネル、要素設定パネル、またはインタラクションパネルを開き、"Edit component "ボタンをクリックしてメインコンポーネントを編集します。この例では、ボタンはスタイルパネルに表示されています。

コンポーネントインスタンスビューでは、Element settings panel.内でコンポーネントプロパティのデフォルト値を見つけることができます。

コンポーネントプロパティを使用すると、メインコンポーネント内の特定の要素の値（テキスト、リッチテキスト、画像、ビデオ、可視性など）をコンポーネントインスタンスで変更できるようになります。また、コンポーネントプロパティをCMSフィールドに接続して、CMSコレクションからデータを取得することもできます。コンポーネントプロパティの定義について詳しく読むことができます。

お知らせ:注意: スタイルプロパティを変更するサポートは開発中

メインコンポーネントを編集すると、すべてのコンポーネントインスタンスに影響が出ます（特定の要素にコンポーネントプロパティが適用されている場合を除く）。

メインコンポーネントを編集する際に、構造や要素の順序を変更すると、サイト全体でコンポーネントインスタンスに同時に影響が出ます。

たとえば、カードデザインがコンポーネントとして設定されているとします。カードコンポーネントには、ヘッディング要素、段落要素、ボタン要素が含まれていますが、ボタン要素はカードの一番下に配置されています。カードのメインコンポーネントを編集し、ボタンをカードの一番下から一番上に移動する場合、その変更はサイト全体のカードコンポーネントのすべてのインスタンスに影響を与えます。

2つのコンポーネント・インスタンスが、それぞれ同じコンテンツとレイアウト（見出し、段落、いくつかのボタン）を表示します。

メインコンポーネントを編集する際、ボタンをコンポーネントの上部に移動した場合、そのボタンの位置はコンポーネントのすべてのインスタンスに影響を与えます。

メインコンポーネントの編集は、特定のコンポーネントインスタンスで明示的に変更されていない限り、そのコンポーネントのすべてのインスタンスに影響を与えます。コンポーネントプロパティの定義とコンテンツの変更について詳しく読むことができます。

メインコンポーネントから抜ける

メインコンポーネントの編集が終了したら、以下の方法でメインコンポーネントから抜けることができます：

• デザイナーの左上隅にある「Back to instance」をクリックする
• キャンバスのコンポーネントの外側をクリックする
• キーボードで「Escape」キーを押す

デザイナーの左上隅にある「Back to instance」をクリックして、メインコンポーネントから抜けることができます。

メインコンポーネントの編集を停止した後、コンポーネントインスタンス内の要素を編集しても、その特定のコンポーネントインスタンスにのみ影響があります。

エディタでコンポーネントを編集する

サイトのコンテンツをエディタで更新するためにコンテンツエディタを招待した場合、コンポーネント要素にコンポーネントプロパティで変更が加えられていない場合、一貫してすべてのインスタンスに適用される変更は、他のすべてのインスタンスに適用されます。

これは、編集対象の要素にカーソルを合わせると表示される情報のメモでも示されています。

コンテンツエディタがすべてのコンポーネントインスタンスに一貫して影響を与える要素を変更すると、情報提供のメモが表示され、変更がすべての同期された要素に影響を及ぼすことが伝えられます。

一方、コンテンツエディタがコンポーネントプロパティを介して変更されたコンポーネント要素に変更を加えた場合、その変更は編集中のコンポーネントインスタンスにのみ適用されます。

コンポーネントの名前を変更する

コンポーネントの名前を変更するには：

1. Components panelを開きます
2. コンポーネントの名前の上にカーソルを合わせ、コンポーネントの右側に表示される「鉛筆」アイコンをクリックします
3. 変更を加えてSaveします

クイックファインドからコンポーネントの名前を変更するには、

1. 検索結果でコンポーネントの名前にカーソルを合わせます
2. コンポーネントの右側に表示される「鉛筆」アイコンをクリックします
3. 変更を加えてSaveします

注意： キーボードショートカット Command + E（Macの場合）または Control + E（Windowsの場合）でクイックファインドにアクセスできます。

コンポーネントを削除する

コンポーネントを完全に削除するには：

1. サイトからコンポーネントのすべてのインスタンスを削除またはリンクを解除します
2. Components panelを開きます
3. コンポーネントの右側に表示される「鉛筆」アイコンをクリックします
4. 「削除」をクリックして確認します

コンポーネントプロパティを定義する方法

注意： ナビゲーションバー、フッター、一部のフォームなど、各インスタンスにまったく同じコンテンツがあるコンポーネントを作成する場合、そのコンポーネントの要素にコンポーネントプロパティを作成する必要はありません。

コンポーネントプロパティを使用すると、コンポーネント内の特定の要素をコンポーネントインスタンスで一意の値で変更できます。

これは、構造が均一である必要があるが、各インスタンスに固有のコンテンツがある再発レイアウトパターンに適しています。または、異なるコンポーネントインスタンスで特定の要素を非表示または表示することにより、構造をわずかに調整したい場合です。

次に進みましょう：

• サポートされているプロパティ
• コンポーネントプロパティを作成する方法

サポートされているプロパティ

サポートされているコンポーネントプロパティは次の通りです：

• **コンテンツプロパティ(**Content properties )（コンポーネントインスタンスでコンテンツを変更するため）
• **可視性プロパティ(**Visibility properties )（コンポーネントインスタンスで要素を非表示または表示するため）

お知らせ： スタイルプロパティを変更するサポートは開発中です。

コンテンツプロパティ（Content properties）

コンテンツプロパティを使用すると、コンポーネントインスタンス内で要素のコンテンツをカスタマイズできます。例えば、複数のページで使用するヒーローセクションのデザインを持っているとします。デザインの構造は変更する必要はありませんが、各コンポーネントインスタンスに異なる段落コンテンツが必要です。この段落に対してコンポーネントプロパティを作成し、コンポーネントインスタンスが表示される場所でその段落コンテンツを変更できます。

段落のコンテンツ（左）は、コンポーネントインスタンス内でコンポーネントプロパティ（右）を介して変更されます。

サポートされている要素は次の通りです：

• テキスト（段落、見出し等）
• 画像
• 動画
• リンク（ボタン、リンクブロック等）
• リッチテキスト

可視性プロパティ（Visibility properties）

可視性プロパティを使用すると、特定の要素を表示または非表示にして、異なるコンポーネントインスタンスでレイアウトのバリエーションを柔軟に作成できます。

例えば、ナビゲーションバーコンポーネント内のリンクやボタンを表示または非表示にすることで、ナビゲーションバーバリエーションを作成できます。また、異なるアイコンを表示または非表示にすることで、ボタンのバリエーションを作成することもできます。画像、動画、ボタン、リンクなど、コンポーネント内の複数の異なる要素を表示または非表示にすることで、セクション全体のバリエーションを作成することもできます。

可視性プロパティはすべての要素で使用できます。

ナビゲーションバーコンポーネントには「今すぐ購入」ボタンが含まれています。このボタンの表示は、可視性プロパティを介して管理されています。ホームページのコンポーネントインスタンスでは、ボタンが表示されています（上の例）。チェックアウトページのコンポーネントインスタンスでは、チェックアウト中には不要なためボタンが非表示になっています（下の例）。

プロのヒント：コンポーネントインスタンス内の非表示要素を選択するのに問題がある場合、ナビゲータを開いてコンポーネントの要素階層から非表示要素を選択します。

ナビゲータパネルでコンポーネント階層を展開すると、コンポーネント内の非表示要素を見つけることができます。非表示の要素は、"取り消し線付きの目 "のアイコンで表示されます。この例では、"Button Primary "が可視条件によって非表示になっています。

重要なポイント: "hidden"に設定された要素は、DOM（Document Object Model）の順序から削除されます。DOMの順序は、サイトの論理的な構造とそのアクセスおよび操作方法を指定するものです。そのため、非表示のコンポーネント要素はアシストデバイスによって読み取られず、サイト訪問者にとってよりアクセス可能な体験を提供します。また、繰り返しコンテンツが排除され、SEOにも悪影響を及ぼしません。

コンポーネントプロパティの作成方法

サイト上のコンポーネントインスタンスのプロパティ値を変更するには、まずメインコンポーネントでコンポーネントプロパティを作成する必要があります。その後、これらのメインコンポーネントプロパティをキャンバス上または要素設定パネルで直接オーバーライドして、異なるコンポーネントインスタンスにカスタムコンテンツを作成できます。

メインコンポーネントで新しいプロパティを作成し、同時にそのプロパティを特定のコンポーネント内の要素に接続することができます。あるいは、メインコンポーネントで直接コンポーネントプロパティを作成し、後で要素をコンポーネントプロパティに接続することもできます。

コンポーネントプロパティの作成と接続方法

メインコンポーネントで新しいプロパティを作成し、そのプロパティを特定のコンポーネント内の要素に直接接続することができます。新しいプロパティを作成し、要素に接続する手順は以下の通りです：

1. 要素を変更したいコンポーネントを見つけます
2. メインコンポーネントを編集するためにコンポーネントインスタンスをダブルクリックします
3. コンポーネント内でプロパティを作成したい要素を選択します
4. Element settings panelに移動します
5. 要素の設定セクションに移動します（選択した要素によってセクションの見出しが若干異なる場合があります。例：Heading 1 の設定、Image の設定など）
6. プロパティを作成したい値の隣にある紫色の「ドット」アイコンをクリックします（可視性、テキストなど）
7. Create & connect new property をクリックします
8. サイトデザイン内の機能に基づいて新しいプロパティに名前を付けます（例：「ボタンの可視性」、「見出しのテキスト」など）
9. Create property をクリックします
10. 作成したばかりの新しいプロパティの紫色のメニューをクリックします
11. Property settings をクリックします
12. プロパティのデフォルト値を定義します（デフォルトのテキストコンテンツを変更、画像を設定、可視性をトグルなど）

メイン・コンポーネント内の要素を選択して、要素設定パネルにその要素の新しいコンポーネント・プロパティを作成する。

プロパティのデフォルト値を定義するには、Property settings をクリックします

要素のプロパティ値を変更し、メインコンポーネントを終了した後、要素を選択したままで、新しいコンポーネントプロパティは Element settings パネル の Component properties の下に表示されます。ここから、選択したコンポーネントインスタンスの値を編集できます（つまり、コンポーネントインスタンス内で選択した特定の要素に対してカスタムコンテンツを作成できます）。

青でハイライトされたコンポーネントプロパティ名は、非デフォルト値のコンポーネントプロパティ（つまり、選択したコンポーネントインスタンスに設定されたコンポーネントプロパティ値）を示しています。

また、コンポーネントインスタンス内で編集したい要素をダブルクリックすることで、キャンバス上で選択した要素のコンテンツの値も編集できます。コンポーネントプロパティに接続された要素は、コンポーネントインスタンス内のキャンバス上で点線の緑色のアウトラインで示されます。プロパティの値を変更する方法について詳しくはこちら。

Element settingsからプロパティを作成

1. 要素を変更したいコンポーネントを見つけます
2. メインコンポーネントを編集するためにコンポーネントインスタンスをダブルクリックします
3. Element settings panel > Component properties > Manage propertiesに移動します
4. 新しいプロパティを作成するための "プラス" アイコンをクリックします
5. typeを選択し、デザイン内の役割に基づいたnameを付け、デフォルトの値を定義します（テキストコンテンツを追加したり、画像を設定したり、可視性を切り替えたりするなど）

その後、プロパティを要素に接続するために:

1. 要素を変更したいコンポーネントを見つけます
2. メインコンポーネントを編集するためにコンポーネントインスタンスをダブルクリックします
3. コンポーネント内でコンポーネントに接続したい要素を選択します
4. Element settings panelパネルに移動します
5. 要素の設定セクションを開きます（選択した要素によっては、セクションの見出しがわずかに異なる場合があります。たとえば、見出し1の設定、画像の設定など）
6. プロパティを作成したい値の隣にある紫色の "点" アイコンをクリックします（可視性、テキストなど）
7. ドロップダウンから選択した要素に接続するコンポーネントプロパティを選択します。

メイン・コンポーネントを編集して、要素設定パネルに新しいコンポーネント・プロパティを作成します。後で、これらのプロパティをコンポーネント内の要素に接続することができます。

コンポーネントプロパティのデフォルト値、タイプを定義するには、Element settings panel > Component properties でコンポーネントプロパティをクリックします。

要素のプロパティ値を変更し、メインコンポーネントを終了した後も、要素が選択されたままで、新しいコンポーネントプロパティはElement settings panelパネル内の Component propertiesの下に表示されます。ここで、選択したコンポーネントインスタンスの値を編集できます（つまり、コンポーネントインスタンス内で選択した特定の要素のカスタムコンテンツを作成できます）。

青色で強調表示されたコンポーネント・プロパティ名は、デフォルト値以外の値を持つコンポーネント・プロパティを示します（すなわち、選択されたコンポーネント・インスタンスに設定されたコンポーネント・プロパティ値）。

また、コンポーネント・インスタンス内で編集したい要素をダブルクリックすることで、選択した要素の内容の値をキャンバス上で編集することもできます。コンポーネント・プロパティに接続された要素は、コンポーネント・インスタンス内のキャンバス上で緑色の点線の輪郭で示されます。 プロパティ値の変更について、詳しくはこちらをご覧ください。

コンポーネントインスタンスでプロパティ値を変更する方法

プロパティを作成したら、メインコンポーネントを終了 して個々のコンポーネントインスタンスに戻ります。ここで、コンポーネントプロパティの値を変更してコンテンツや表示をカスタマイズできます。

コンポーネントインスタンスを変更する方法は2つあります：

• 静的値を使用してプロパティを変更する
• プロパティを CMS データに接続する

静的値を使用してプロパティを変更する

コンポーネントプロパティ内の静的コンテンツを編集する最も迅速な方法は次の通りです。

1. 要素を含むコンポーネントインスタンスを見つけます
2. キャンバス上の要素を選択します
3. Element settings パネル > Component properties に移動します
4. 要素のプロパティ値を変更します（例：テキストの更新、画像の置き換え、表示の設定など）

また、コンポーネントインスタンス内で編集したい要素をダブルクリックしてキャンバス上で選択したコンポーネントインスタンスの値を編集することもできます。

知ってると得**:** 選択したコンポーネントインスタンスの要素プロパティの値を表示し、変更するには、Element settings パネルを開いて、そこから直接値を変更することもできます。

コンポーネントインスタンスを選択し、要素設定パネルを開くことで、すべてのコンポーネントプロパティとその値の概要を確認できます。また、このセクションから直接値を変更することもできます。

コンポーネントプロパティをデフォルト値に戻すには、すべてのプロパティを一度にリセットするか、個別にリセットすることができます。

すべてのプロパティを一度にデフォルト値にリセットするには：

1. キャンバス上でコンポーネントインスタンスを選択します
2. Element settings panel > Component properties
3. "back arrow" アイコンをクリックして "すべてリセット" を選択します

ご不明点があれば、どうぞお知らせください。

個別のプロパティをデフォルト値にリセットするには：

1. 値をリセットしたい要素が含まれるコンポーネントインスタンスを見つけます
2. キャンバス上で要素を選択します
3. Element settings panel > Component properties
4. コンポーネントプロパティの名前をクリックします（青で表示されます）
5. "Reset" をクリックします

コンポーネントプロパティをCMSデータに接続する

一貫したデザインを保ちながら、異なるCMSコレクションページでレイアウトを再利用するために、メインコンポーネントから切り離すことなく、コンポーネントインスタンス内でCMSコレクションデータを接続して表示することもできます。

次のCMSフィールドにプロパティを接続できます：

• Date / Time
• Plain text
• Email
• Phone
• Video link
• Link
• Option
• Number
• Image
• Rich text
• File
• Reference

注意：コンポーネントプロパティをコレクションフィールドデータに接続するには、すでにサイト内でコレクションを作成している必要があります。

コレクションページでコンポーネントプロパティをCMSコレクションデータに接続するには：

1. Pages panel > CMS Collection pages を開き、コンポーネントを含むページを選択します
2. メインコンポーネントを編集するためにコンポーネントインスタンスをダブルクリックします
3. Element settings panel > Component properties > Manage  に移動し、接続する要素に既にプロパティが存在しない場合は、コンポーネントプロパティを作成します
4. コレクションデータに接続したい要素を選択します
5. Element settings panel に移動します
6. 接続したいプロパティの横にある紫色の「点」アイコンをクリックします（例：テキスト、画像、可視性など）
7. ドロップダウンから、選択した要素に接続したいコンポーネントプロパティを選択します
8. メインコンポーネントから出て、"インスタンスに戻る" をクリックするか、キーボードのEscを押してメインコンポーネントから抜けます
9. コレクションデータに接続したい要素を選択します
10. Element settings panel に移動します
11. コンポーネントプロパティの修正可能なコンテンツ（テキスト、画像、可視性など）の横にある紫色の「点」アイコンをクリックします
12. メニューからコレクションフィールドを選択します（例：名前、公開日、サムネイル画像など）

このようにして、コンポーネントインスタンスは、選択したコレクションフィールドのコンテンツを表示します（コレクションフィールドにデータが入力されている場合）。

紫色の「点」アイコンをクリックすると、接続するコレクションフィールドのリストが表示されます。この例では、「Heading 2 - Text」をコレクションフィールドに接続しています。

要素をコレクションフィールドから切断するには：

1. Pages panel > CMS Collection pages を開き、コンポーネントを含むページを選択します
2. 切断したいコンポーネント要素を選択します
3. Element settings を開きます
4. プロパティの紫色のメニューをクリックします
5. 「Disconnect property」を選択します

コンポーネントプロパティの管理方法

要素設定パネルでプロパティを管理することで、メインコンポーネントのプロパティのリストを確認し、それらがコンポーネント内の要素に接続されているか切断されているかを判断し、各プロパティとやり取りしてデフォルト設定やプロパティ値を調整できます。

「プロパティの管理」セクションへのアクセス方法

要素設定パネルの Manage properties セクションには、次の2つの方法でアクセスできます。

• コンポーネントの親要素を介してプロパティを管理する
• コンポーネントの子要素を介してプロパティを管理する

コンポーネントの親要素を介してプロパティを管理する

1. コンポーネントの親要素を選択します
2. Element settings panelを開きます
3. Edit componen をクリックします
4. Component properties > Manage properties に移動します

コンポーネントの子要素を介してプロパティを管理する

代わりに、コンポーネントの親要素ではなく、最初にコンポーネントの子要素をクリックした場合にも、コンポーネントプロパティを管理できます。

1. コンポーネントの子要素を選択します
2. Element settings panelを開きます
3. 「Edit component」をクリックします
4. 要素の設定セクションを開きます（選択した要素に応じて、セクションの見出しがわずかに異なることに注意してください。例えば、見出し1の設定、画像の設定など）
5. 紫色のドロップダウンメニューをクリックし、「Manage all properties」を選択します

各コンポーネント・プロパティと相互作用

ここから、各コンポーネントプロパティと対話して以下の操作ができます：

• プロパティのデフォルト値を更新する
• プロパティの名前を変更する
• プロパティに接続された要素を特定する
• プロパティを削除する
• 新しいプロパティを追加する
• プロパティを切断する

プロパティのデフォルト値を更新する

デフォルトのプロパティ値を更新するには：

1. Element Settings panelのManage propertiesセクションを開きます
2. Manage properties の下にリストされている任意のプロパティをクリックしてそのプロパティの設定を開きます
3. 「Type」ドロップダウンをクリックしてプロパティのタイプを変更します（例：テキスト、リッチテキスト、ビデオなど）
4. デフォルトの値を更新するために任意の追加フィールドをクリックします（例：URL、テキストコンテンツなど）

プロパティの名前を変更する

プロパティの名前を変更するには：

1. Element Settings panelのManage propertiesセクションを開きます
2. Manage propertiesの下にリストされている任意のプロパティをクリックしてそのプロパティの設定を開きます
3. 「Name」フィールドをクリックして、そのプロパティのデザイン内での機能に基づいて名前を変更します

どの要素がプロパティに接続されているかを判断する

どの要素（または要素）がプロパティに接続されているかを判断するには：

1. Element Settings panelのManage propertiesセクションを開きます
2. Manage properties の下にリストされている任意のプロパティをクリックしてそのプロパティの設定を開きます
3. 設定のモーダルウィンドウの下部に接続された要素のリストが表示されます
4. リスト内の任意の接続された要素をクリックして、その特定の要素の設定にアクセスします

プロパティを削除

プロパティを削除するには：

1. Element Settings panelのManage propertiesセクションを開きます
2. プロパティの名前の上にホバーします
3. "ゴミ箱"アイコンをクリックします

プロパティがまだコンポーネントの要素に接続されている状態で削除すると、そのプロパティがその要素から切断されることになります。もしプロパティが複数の要素に接続されていた場合、それらの要素からも切断されます。

削除すると、それらのプロパティはメインコンポーネント内でまだ定義されたままになり、それぞれのインスタンスから個別に削除されるまで、インスタンスに表示され続けます。

各インスタンスからコンポーネント プロパティを個別に削除するには：

1. コンポーネント インスタンスの親要素を選択します
2. Element settings panelを開きます
3. 切断されたコンポーネントプロパティを見つけます（切断されたプロパティは黄色で表示されます）
4. コンポーネント プロパティの名前をクリックします
5. "Delete" をクリックします

以前に設定されたコンポーネント プロパティに対する要素の削除と再接続

メインコンポーネントから要素を削除すると、他のコンポーネント インスタンス内の対応する要素も削除されます（その要素がコンポーネント プロパティを介して一意の内容に変更されている場合でも同様です）。ただし、コンポーネント プロパティとそれに適用された値は、各インスタンスには残ります（そのプロパティに元々接続されていた要素が削除されている場合でも同様です）。

以前に使用したコンポーネント プロパティが残っているため、新しい要素または既存の要素をそれに接続することができます。それらの要素は、以前に設定されたプロパティに適用された値（テキストの内容の更新、画像の設定、表示/非表示の切り替えなど）を反映します。同じプロパティに複数の要素を接続することもできるため、各要素が同じコンテンツや表示設定を表示することができます。

例えば、2つの異なる状態を持つインタラクションを作成したとしますが、各状態のコンテンツが常に同じである必要があります。各状態の要素を同じプロパティに接続して、値を一貫させることができます。

新しいプロパティの追加

新しいプロパティを追加するには：

1. Manage properties セクションを開きます
2. 新しいプロパティを作成するには、プラスアイコンをクリックします
3. "Type" を選択し、デザイン内の機能に基づいてプロパティに名前を付け、一意の値を更新します（テキストの内容を追加、画像の設定、表示/非表示の切り替えなど）。

メイン・コンポーネントを編集して、要素設定パネルに新しいコンポーネント・プロパティを作成します。後で、これらのプロパティをコンポーネント内の要素に接続することができます。

コンポーネント・プロパティのデフォルト値は、Element settings panel > Component properties でコンポーネント・プロパティをクリックすることで、そのタイプを含めて定義することができます。

注意: 新しいプロパティは、コンポーネントの要素と接続するまで切断された状態です。

プロパティを切断する

メインコンポーネントのManage properties セクションで、コンポーネント要素からプロパティを切断できます。コンポーネント要素からプロパティを切断するには：

**

1. Element Settings panelのManage propertiesセクションを開きます
2. 切断したいプロパティの名前をクリックします。
3. 接続されている要素をクリックします。
4. 要素の設定の下で紫色のドロップダウンメニューをクリックし、「Disconnect property」を選択します。

注意： プロパティが複数の要素に接続されている場合、各接続された要素に対して切断プロセスを繰り返す必要があります。

紫色の "点 "アイコン（または紫色のドロップダウンメニュー）をクリックして、特定の要素に接続する別のプロパティを選択できます。

コンポーネントをネストする方法

コンポーネントを他のコンポーネントの中にネストすることで、複雑なレイアウトをより簡単かつ効率的に構築・保守することができます。例えば、ボタンを1つのコンポーネントとして作成することができます。そして、そのボタンのコンポーネントをサイト内のさまざまな他のコンポーネントの中にネストすることができます。ナビゲーションコンポーネント、ヒーローセクションコンポーネント、またはフィーチャーカードコンポーネントなどの中に配置することができるでしょう。

「Button」コンポーネントは「Card」コンポーネントの中にネストされており、左側のナビゲーターパネルの要素階層にも表示されています。

これにより、各コンポーネントを独立して1か所で更新し、それらの変更が他のすべてのインスタンスに影響を与えるのを確認できます。

コンポーネントをネストする方法は2つあります：

• 既存のコンポーネントをネストする
• 既存のコンポーネントの要素から新しいネストされたコンポーネントを作成する

既存のコンポーネントをネストする

既存のコンポーネントを別の既存のコンポーネントにネストするには：

1. 別のコンポーネントに別のコンポーネントを配置したい場所を選択します。
2. メインコンポーネントを編集します。
3. Components パネルを開きます（またはキーボードショートカット Shift + A を使用します）。
4. パネルからコンポーネントを選択して、キャンバス内またはナビゲーター内の選択したコンポーネントにドラッグしてから離します。

既存のコンポーネントの要素から新しいネストされたコンポーネントを作成する

既存のコンポーネント内に新しいコンポーネントを作成するには：

1. Select the component in which you want to place another component
2. Edit the main component
3. Open the Style panel or the Element settings panel
4. Click “Create component”
5. Give your new component a name and click Create
6. 別のコンポーネントに新しいコンポーネントを配置したい場所を選択します。
7. メインコンポーネントを編集します。
8. Style panel または Element settings panel を開きます。
9. 「Create component」をクリックします。
10. 新しいコンポーネントに名前を付けて、Create をクリックします。

知っておくと便利： メインコンポーネントを編集して新しいネストされたコンポーネントを作成することもできます。その後、新しいネストされたコンポーネントにしたい要素を右クリックし、「コンポーネントを作成」を選択します。または、キーボードショートカット Command + Shift + A（Macの場合）または Control + Shift + A（Windowsの場合）を使用します。

さらに、既にコンポーネントが含まれている親要素からもコンポーネントを作成することができます。例えば、非コンポーネントのカード（例：divブロック）がボタン要素を含んでいるとしましょう。ボタン要素をコンポーネントに変換しました。そして、今度はカード全体をコンポーネントに変換したいとします。ボタンコンポーネントの親要素（つまり、カードのdivブロック）を選択し、divブロックから新しいコンポーネントを作成します。これにより、ボタンコンポーネントがカードdivブロックコンポーネントの中にネストされることになります。

ネストされたコンポーネントのプロパティを親コンポーネントのプロパティに接続する

コンポーネントのプロパティが設定されたコンポーネントを別のコンポーネントの中にネストする際、ネストされたコンポーネントのプロパティを親コンポーネントのプロパティに接続するオプションがあります。これにより、ネストされたコンポーネントのプロパティは親コンポーネントのインスタンスから変更された値を使用できるようになります。

例えば、カードがあるとしましょう。そのカード内には見出し、段落テキスト、ボタンがあります。カード自体がコンポーネントです。カード内のボタン要素もコンポーネントです（つまり、ネストされたコンポーネント）。各要素にコンポーネントのプロパティが設定されている限り、ボタンのテキストをカードのテキストに接続することができます。

ネストされたコンポーネントのプロパティを親コンポーネントのプロパティにリンクするには：

1. ネストされたコンポーネントの親コンポーネントを選択し、メインコンポーネントを編集します。
2. 親コンポーネントの中で、接続を行いたいネストされたコンポーネントを選択します。
3. Element settings panel > Component propertiesを選択します。
4. （任意）要素を変更するためのコンポーネントのプロパティが存在しない場合は、「Create」をクリックし、ステップ6に進みます。
5. 親コンポーネントのプロパティと接続したいコンポーネントのプロパティを見つけます。
6. パープルの「点」アイコン（またはプロパティが既に接続されている場合はパープルのメニュー）をクリックします。
7. 親コンポーネントのプロパティに接続するための名前を選択します。

この例では、ネストされたボタンコンポーネントのテキストブロックのプロパティを親のカードコンポーネントのプロパティに接続しています。

ネストされたボタンコンポーネントのテキストブロックプロパティを親カードコンポーネントの見出しプロパティに接続した後、ボタンコンポーネントは親プロパティの値を表示するようになりました。

コンポーネントのインスタンスをメインコンポーネントから切断する方法

コンポーネントのインスタンスを切断し、メインコンポーネントから独立して変更を加える方法は以下の通りです：

1. 切断したいインスタンス内のコンポーネント要素を右クリックします。
2. Unlink instanceを選択します。

一度切断されると、デザイン内の他のリンクされた同じコンポーネントのインスタンスを編集しても、切断されたインスタンスには影響を与えません。

コレクションリストとコレクションページでコンポーネントを使用する方法

コレクションリストアイテムとコレクションページ内にコンポーネントを追加または作成することができます。そして、コレクションのフィールドをコンポーネントのプロパティに接続し、コンポーネント内で動的なデータを使用することができます。

コレクションリストアイテムにコンポーネントを追加するには、コレクションリストの外部でコンポーネントを作成し、その後キャンバスまたはナビゲーター内のコレクションリストアイテムにドラッグアンドドロップします。

すでにコレクションリストアイテムがCMSコレクションに接続されている場合、そのコレクションリストアイテムからコンポーネントを作成することはできません。既存のコレクションリストアイテムをコンポーネントに接続するには、まずすべてのCMSフィールドを切断し、次にコレクションリストアイテムをコンポーネントに変換し、最後にコレクションリストアイテムをCMSコレクションに再接続します。