今回はWebflowのコンポーネント機能の使い方について解説します。　

コンポーネントを使用すると、要素や子要素からカスタマイズ可能なブロックを作成して、一貫性があり、効率的な設計を維持できます。

これらのブロックをサイト全体で再利用し、1 か所で変更することで、繰り返し発生する各レイアウトを個別に修正する必要がなくなります。

‍

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

コンポーネントを使用して次のことができます。

• インスタンスごとに同一のコンテンツを作成します。

‍ナビゲーションバー、フッター、サインアップフォームなど、まったく同じコンテンツを持つ繰り返しレイアウトの同一コピーを作成します。

これらを 1 か所で編集すると、その変更がそのコンポーネントのすべてのインスタンスに影響を与えることがわかります。

• インスタンスごとに固有のコンテンツを作成します。

‍レイアウトは維持しつつも、複製先でテキスト、画像、ビデオ、またはリッチ テキストを変更し、各インスタンスに固有のコンテンツを与えながら一貫したデザインを維持します。

サイト上のほとんどの要素または要素のグループからコンポーネントを作成できます。

‍

1. コンポーネントにしたい要素を選択
2. Style panelまたはElement settings panelを開く
3. パネル上部のcreate componentアイコンをクリック
4. コンポーネントに名前を付けて、Createをクリック

‍

‍

メインコンポーネントの内の、一コンポーネントとなります。

これによって、メインコンポーネントに対する変更は、そのコンポーネントのすべてのインスタンスに反映されます。

次の方法でいつでも、任意のコンポーネント インスタンスのメインコンポーネント編集画面に入ることができます。

• コンポーネントインスタンスをダブルクリックする
• 右クリックし、Edit componentをクリックする
• インスタンスを選択し、ラベルの鉛筆アイコンをクリックする
• インスタンスを選択し、右側のパネルの右上にあるレンチアイコンをクリックする
• ‍

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

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

1. コンポーネントパネルを開く
2. 目的のコンポーネントをクリックしてサイト内の任意のページにドラッグ
3. コンポーネント インスタンスをキャンバス上またはナビゲーターに直接ドロップ

コンポーネントインスタンスを選択すると、そのインスタンスが強調表示され、緑色の枠で囲まれます。‍

コンポーネントパネルを開いて、サイト内で各コンポーネントが何回使用されたかを確認します。  

‍

注記

コンポーネント インスタンスの複製は可能ですが (コピーペースト、右クリック、またはキーボード ショートカットの使用による複製)

メイン コンポーネントの複製は現時点ではネイティブには不可能です。

代わりに、コンポーネント インスタンスのリンクを解除し、そのリンク解除された要素または要素のグループから新しいコンポーネントを作成できます。

コンポーネントをダブルクリックしてメインコンポーネントに入り、ナビゲーターパネルでコンポーネントの要素階層を表示できます。

コンポーネントの要素階層はメイン コンポーネントからのみ表示できます。

つまり、コンポーネント インスタンス内からコンポーネントの要素階層を表示することはできません。

‍

メインコンポーネントを編集する

コンポーネントのすべてのインスタンスに同じ変更を加えるには、メインコンポーネントを編集する必要があります。

次の方法で、任意のコンポーネントインスタンスのメインコンポーネントを編集できます。

• コンポーネントインスタンスをダブルクリックする
• 右クリックし、Edit componentをクリックする
• インスタンスを選択し、ラベルの鉛筆アイコンをクリックする
• インスタンスを選択し、右側のパネルの右上にあるレンチアイコンをクリックする

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

メインコンポーネントの編集は、すべてのコンポーネント インスタンスに影響します。

(コンポーネントインスタンスのコンポーネントプロパティがコンポーネント内の特定の要素に適用されている場合を除く)

メインコンポーネントに対する変更（要素の順番、レイアウト、サイズ、など）は、サイト全体のすべての同一コンポーネントインスタンスに反映されます。

‍

たとえば、コンポーネントとして設定されたカードデザインがあるとします。

カードコンポーネントには見出し要素、段落要素、ボタン要素が含まれており、ボタン要素はカードの一番下に配置されます。

カードのメインコンポーネントを編集し、ボタンをカードの下部から上部に移動すると、その変更はサイト全体のカードコンポーネントのすべてのインスタンスに影響します。

メインコンポーネントの編集は、コンポーネントインスタンスで特に変更されない限り、そのコンポーネントのすべてのインスタンスに影響します。

コンポーネントのプロパティの定義とコンポーネントインスタンスの値の変更について詳しくは、  こちらをご覧ください。

‍

メインコンポーネントを終了する

メインコンポーネントの編集が完了したら、次の方法でメインコンポーネントを終了できます。

• デザイナーの左上隅にあるbackの矢印をクリックする
• キャンバス上のコンポーネントの外側をクリックする
• キーボードのEsc キーを押す

メインコンポーネントの編集を停止した後は、コンポーネントインスタンス内の要素に加えた編集は、その特定のコンポーネントインスタンスにのみ影響することに注意してください。

‍

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

エディターでサイトのコンテンツを更新するようにコンテンツ編集者を招待した場合

コンポーネントプロパティで変更されておらず、全てのインスタンス間で一貫しているコンポーネント要素に対して行われた変更は他のすべてのインスタンスに適用されます。

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

‍

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

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

1. コンポーネントパネルを開く
2. コンポーネント名の上にマウスを置き、コンポーネントの右側に表示される鉛筆アイコンをクリック
3. 変更を加えて保存する

‍

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

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

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

‍

コンポーネント インスタンスをメイン コンポーネントからリンク解除する方法

コンポーネント インスタンスのリンクを解除し、メイン コンポーネントから独立して変更を加えるには

1. リンクを解除するインスタンス内の任意のコンポーネント要素を右クリックします
2. Unlink instanceをクリックします

リンクを解除すると、デザイン内でそのコンポーネントの他のリンクされたインスタンスを編集しても、リンクが解除されたインスタンスは変更されません。

‍

まとめ

いかがでしょうか。

当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。

以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。

ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。

Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。

‍

‍