コンポーネントのプロパティ

今回はWebflow内の機能である、コンポーネントプロパティについて詳しく解説していきます。

注記

この記事の手順を行う前に、「コンポーネント機能の使い方」の記事を読んで理解を深めましょう。

‍

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

これは、構造は均一であるが各インスタンスに固有のコンテンツを持つ必要がある、繰り返しレイアウトパターンに最適です。

異なるコンポーネントインスタンスで特定の要素を非表示または表示して、構造をわずかに調整する必要がある場合があります。

‍

注記

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

‍

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

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

• Content properties(コンポーネントインスタンス内のコンテンツを変更する)

• Visibility properties（コンポーネントインスタンス内の要素を非表示または表示する）

注記

コンポーネントインスタンスのスタイルを変更するには、classカスタム属性を使用します。

‍

Content properties

Content propertiesを使用すると、コンポーネントインスタンス内の要素コンテンツをカスタマイズできます。

たとえば、サイト全体の複数のページで使用するヒーローセクションデザインがあるとします。

デザイン構造は同じままにする必要がありますが、各コンポーネントインスタンスには異なる段落コンテンツが必要です。

段落のContent propertiesを作成し、サイト上のヒーローセクションが表示される場所でその段落コンテンツを変更できます。

サポートされている要素は次のとおりです。

• テキスト（段落、見出しなど）
• 画像
• ビデオ
• リンク（ボタン、リンクブロックなど）
• リッチテキスト

‍

Visibility properties

Visibility propertiesを使用すると、特定の要素を表示または非表示にすることで、さまざまなコンポーネントインスタンスにレイアウトのバリエーションを作成できます。

たとえば、ナビゲーションバー コンポーネント内のリンクやボタンを表示したり非表示にしたりすることで、ナビゲーションバーのバリエーションを作成できます。

または、さまざまなアイコンを表示したり非表示にしたりすることで、ボタンのバリエーションを作成することもできます。

コンポーネント内の画像、ビデオ、ボタン、リンクなど、複数の異なる要素を表示したり非表示にしたりすることで、セクション全体のバリエーションを作成することもできます。

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

ヒント

コンポーネントインスタンスで非表示の要素を選択できない場合は、ナビゲーターを開き、コンポーネントの要素階層内から非表示の要素を選択します。

ナビゲーターパネルでコンポーネント階層を展開すると、コンポーネント内の非表示の要素を見つけることができます。

非表示の要素は、「取り消し線の付いた目」アイコンで示されます。

‍

知っておくと良いこと

「非表示」に設定された要素は、ドキュメント オブジェクトモデル (DOM) の順序から削除されます。

DOMの順序はサイトの論理構造と、そのアクセス方法および操作方法を指定するため、非表示のコンポーネント要素は支援技術によって読み取られず、サイト訪問者にとってよりアクセスしやすいエクスペリエンスが促進されます。

また、重複コンテンツが排除され、SEOに悪影響を及ぼしません。

‍

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

コンポーネントインスタンスのプロパティ値を変更するには、まずメインコンポーネントにコンポーネントプロパティを作成する必要があります。

その後、これらのメインコンポーネントプロパティをオーバーライドして、さまざまなコンポーネントインスタンスにカスタムコンテンツを作成できます。

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

または、メインコンポーネントに直接コンポーネントプロパティを作成し、後で要素に接続することもできます。

‍

コンポーネントプロパティを作成して接続する

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

新しいプロパティを作成して要素に接続するには、次の手順を実行します。

1. 変更したい要素を含むコンポーネントを見つけます
2. メインコンポーネントを編集するには、コンポーネントインスタンスをダブルクリックします。
3. コンポーネントプロパティを作成する要素を選択します
4. Element settings panelに移動します
5. プロパティを作成する値（visibility、テキストなど）の横にある紫色のドットアイコンをクリックします。
6. 「Create & connect new property」をクリックします
7. プロパティのデフォルト値を定義します (例: テキスト コンテンツの追加、画像の設定、表示の切り替えなど)。
8. Createをクリックして完了

‍

プロパティパネルからプロパティを作成する

Propsパネルからメインコンポーネントにコンポーネントプロパティを作成するには以下の手順を実行します。

1. 変更したい要素を含むコンポーネントを見つけます
2. メインコンポーネントを編集するには、コンポーネントインスタンスをダブルクリックします。
3. Propsパネルに移動
4. 「プラス」アイコンをクリックして新しいプロパティを作成します
5. メニューからpropertyタイプを選択してください
6. デザインにおける機能に基づいてプロパティに名前を付けます
7. プロパティのデフォルト値を定義します (例: テキスト コンテンツの追加、画像の設定、表示の切り替え、グループの割り当てまたは作成など)。

次に、プロパティを要素に接続するには、次のようにします。

1. 変更したい要素を含むコンポーネントを見つけます
2. メインコンポーネントを編集するには、コンポーネントインスタンスをダブルクリックします。
3. コンポーネントプロパティを接続する要素を選択します
4. Element settings panelに移動
5. プロパティを作成する値（、テキストなど）の横にある紫色の「ドット」アイコンをクリックします。‍
6. ドロップダウンから選択した要素に接続するコンポーネントプロパティを選択します

注記

新しいプロパティは、コンポーネント要素を接続するまで切断されたままになります。

‍

プロパティグループを作成する方法

プロパティを作成するときに、プロパティグループを作成できます。

グループ名を編集するには、Propsパネルに移動し、編集するグループ名の横にある「」アイコンをクリックして、「Rename」をクリックします。

グループを削除するには、Propsパネルに移動し、編集するグループ名の横にある「3 つのドット」アイコンをクリックして、「Delete」をクリックします。グループ名を削除しても、グループ内のプロップは削除されないことに注意してください。

‍

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

プロパティを作成したら、メインコンポーネントを終了して個々のコンポーネントインスタンスに戻ります。

そこで、コンポーネントプロパティの値を変更して、インスタンス上のコンテンツや表示をカスタマイズできます (つまり、コンポーネント インスタンス内の特定の要素に固有のコンテンツを作成できます)。

注記

コンポーネン インスタンスのスタイルを変更するには、classカスタム属性を使用します。

コンポーネントインスタンスは、次の 2 つの方法で変更できます。

• 静的な値を持つプロパティを変更する
• プロパティをCMSデータに接続する

静的コンテンツと動的コンテンツの違いについて

静的な値を持つプロパティを変更する

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

1. 値を変更する要素を含むコンポーネントインスタンスを見つけます
2. 右のパネルに移動します
3. 要素のプロパティ値を変更します (例: テキストの更新、画像の置き換え、可視性の設定など)

選択したコンポーネントインスタンス内の要素の値をキャンバス上で直接編集することもできます。

コンポーネントをクリックし、コンポーネントインスタンス内で編集する要素をダブルクリックします。

コンポーネントプロパティに接続されている要素は、コンポーネント インスタンス内のキャンバス上で点線の緑色のアウトラインで示されます。

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

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

1. キャンバス上のコンポーネントインスタンスを選択する
2. コンポーネントインスタンスの右パネルに移動します
3. 右上隅にある「・・・」アイコンをクリックします
4. Reset all propertiesを選択

単一のプロパティをデフォルト値にリセットするには:

1. 値をリセットしたい要素を含むコンポーネントインスタンスを見つけます
2. キャンバス上の要素を選択します
3. 右のパネルに移動
4. コンポーネントプロパティの名前をクリックします
5. Reset to default property valueをクリックします

プロパティをCMSデータに接続する

一貫したデザインを維持しながら、さまざまなCMSコレクションページ間でレイアウトを再利用するには、メインコンポーネントからリンクを解除せずに、コンポーネントインスタンスに CMS コレクションデータを接続して表示することもできます。

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

• 日付 / 時刻
• プレーンテキスト
• メール
• 電話
• ビデオリンク
• リンク
• オプション
• 番号
• 画像
• リッチテキスト
• ファイル
• 参照

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

CMSコレクションとコレクションフィールドの詳細については、こちらをご覧ください

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

1. Pages panel> CMS Collection pagesを開き、コンポーネントを含むページを選択します
2. メインコンポーネントを編集するには、コンポーネントインスタンスをダブルクリックします
3. 接続する要素にプロパティがまだ存在しない場合は、コンポーネントプロパティを作成します
4. コレクションデータに接続する要素を選択します
5. Element settings panelに移動します
6. コンポーネント プロパティ (テキスト、画像、可視性など) を接続する値の横にある紫色の「ドット」アイコンをクリックします
7. ドロップダウンから選択した要素に接続するコンポーネントプロパティを選択します
8. デザイナーの左上隅にある「戻る」矢印をクリックするか、キーボードのEscキーを押してメインコンポーネントを終了します
9. コレクションデータに接続する要素を選択します
10. 右のパネルに移動します
11. コンポーネント プロパティの変更可能なコンテンツ (テキスト、画像、可視性など) の横にある紫色の「ドット」アイコンをクリックします
12. メニューからコレクション フィールドを選択します (例: 名前、公開日、サムネイル画像など)

コンポーネントインスタンスには、選択したコレクション フィールドの内容が表示されます (コレクション フィールドにコレクション内のデータが入力されている場合)。

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

1. Pages panel> CMS Collection pagesを開き、コンポーネントを含むページを選択します。
2. 切断するコンポーネント要素を選択します
3. 右のパネルに移動します
4. 物件の紫色のメニューをクリックします
5. Disconnect propertyをクリック

コンポーネントプロパティの並べ替え、削除、切断の方法

コンポーネントのプロパティを管理するには、メイン コンポーネントに入ります。

‍[Props] パネルでは、メイン コンポーネントのプロパティのリストが表示され、要素の接続を決定したり、デフォルトの設定や値を調整したり、プロパティの順序を変更したり、削除したりできます。

プロパティの並べ替え

デフォルトでは、コンポーネントのプロパティは、作成された順序でプロパティパネルに表示されます。

プロパティをクリックしてドラッグすると、任意の順序に並べ替えることができます。

プロパティを削除する

メイン コンポーネントのプロパティを削除するには、メイン コンポーネントに移動し、プロパティパネルに移動して、「ゴミ箱」アイコンをクリックします。

プロパティが 1 つまたは複数のコンポーネント要素にまだ接続されている場合は、プロパティを削除すると、コンポーネント要素から切断されます。

接続されているプロパティの内容はプロパティを削除すると失われ、設定したデフォルト値に置き換えられます。

要素を削除し、以前に設定したコンポーネントプロパティに再接続します。

メイン コンポーネントから要素を削除すると、他のコンポーネント インスタンス内の対応する各要素も削除されます (コンポーネント プロパティを介して一意のコンテンツに変更されている場合でも)。

ただし、コンポーネント プロパティとそれに適用される値は、各インスタンスに残ります (そのプロパティに元々接続されていた要素が削除されている場合でも)。

その後、新しい要素または既存の要素をそれらのプロパティに接続できます。

それらの要素には、以前に設定されたプロパティに適用された値 (更新されたテキスト コンテンツ、画像、visilityなど) が反映されます。

注記

新しいプロパティは、コンポーネント要素を接続するまで切断されたままになります。

切断プロパティ

メイン コンポーネントを編集するときに、Propsパネルでプロパティを切断できます。コンポーネント要素からプロパティを切断するには、次の手順を実行します。

1. プロパティを切断する要素を含むコンポーネントを見つけます
2. メインコンポーネントを編集するには、コンポーネントインスタンスをダブルクリックします。
3. Propsパネルに移動
4. 切断したいプロパティの名前をクリックします
5. 接続されている要素の名前をクリックします
6. 要素の設定の下にある紫色のドロップダウンメニューをクリックし、Disconnect propertyを選択します。

注記

プロパティが複数の要素に接続されている場合は、接続されている要素ごとに切断プロセスを繰り返す必要があります。

‍