【日本語版Webflow University】 シンボル

この投稿はWebflow社が提供する「Symbols」の内容を元に作成しています。

引用元：https://university.webflow.com/lesson/symbols

日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。

‍

シンボルを使用して、任意の要素とその子要素を再利用可能なコンポーネントに変換します。

シンボルを使用することで、サイト全体で繰り返し使われるコンテンツを効率的に管理する方法をご説明します。

シンボルを使用すると、シンボル要素とその子要素を再利用可能なコンポーネントに変えることができます。

あるページでシンボルを更新および編集すると、他のページで使われているシンボルにも変更が同期されるため、同じ修正作業を複数回行う必要が無くなります。

シンボルは主に 2 つの方法で使用できます。

1. インスタンスごとに同一のコンテンツ：ナビゲーションバー、フッター、サインアップフォームなど、まったく同じコンテンツを持つレイアウトの同一コピーを作成します。編集は一箇所で行い、その変更がシンボルのすべてのインスタンスに反映されます。
2. インスタンスごとに固有のコンテンツ：シンボル内のテキスト、画像、ビデオなどのコンテンツ要素にオーバーライドフィールドを作成し、シンボルのレイアウトを再利用しながら、各シンボルインスタンスに固有のコンテンツを与えることができます。

レッスン概要

1. シンボルを作成する
2. オーバーライドフィールドを定義する
3. シンボルを使用する
4. シンボルを編集する

シンボルを作成する

body 要素を除く、サイト内の任意の要素または要素のグループを元にシンボルを作成できます。

シンボルを作成する方法は次の通りです。

1. シンボルに変換する要素を選択します
2. 右クリックして シンボルの作成を選択します
3. シンボルに名前を付けて、Create Symbolを押します

シンボルを作成すると、そのシンボルのメインモードに入ります。メインモードでのすべての変更は、そのシンボルのすべてのインスタンスにわたって更新されます。ダブルクリックすることでどのインスタンスでもメインモードに入ることができます。

ショートカットキー

キーボードのショートカット キー Command + Shift + A (Mac の場合) またはControl + Shift + A (Windows の場合)) を押して、新しいシンボルを作成することもできます。これにより、選択した要素を元にシンボルが作成されます。

オーバーライドフィールドを定義する

一言メモ

各インスタンス(ナビゲーション バー、フッター、一部のフォームなど)でまったく同じコンテンツを持つシンボルを作成する場合、そのシンボルにオーバーライドフィールドを作成する必要はありません。

オーバーライドフィールドでは、シンボル内の特定の要素を定義し、シンボルインスタンスに固有のコンテンツでオーバーライドすることができます。これは、構造は同じなんだけど、各ページで別々のコンテンツを表示させたい場合に有効です。

オーバーライド可能な要素を選択し、要素設定パネルでオーバーライドフィールドを作成します。

オーバーライドフィールドを作成する方法は次の通りです。

1. ダブルクリックしてシンボルのメイン編集モードに入ります
2. オーバーライドフィールドを作成する要素を選択します
3. 要素設定パネルの紫のドットアイコンをクリックして、この要素のオーバーライドフィールドを作成します。
4. デザインの機能に基づいて名前を付けます

別の方法 : 最初にフィールドを作成してから、それをシンボル内の要素に接続することもできます。

また、設定パネルからメインのシンボルを直接編集しながらオーバーライドフィールドを作成し、それらのフィールドをシンボル内の要素に接続することもできます。

オーバーライドフィールドが適用できる要素の種類

次のタイプの要素のオーバーライドを作成できます。

• テキストフィールド (段落、ヘッダーなど)
• 画像要素
• 動画要素
• リンク (ボタン、リンク ブロック)
• リッチ テキスト要素

スタイルのオーバーライドは現在開発中です。

シンボルを使用する

シンボルパネルからシンボルにアクセスできます。(ショートカット: Shift + A を押すと、シンボルに直接アクセスできます)

表示されるシンボルはプロジェクト内で作成したすべてのシンボルです。

シンボルを作成したら、サイト内のどこでも再利用できます。

1. シンボルパネルを開く
2. シンボルをクリックして、サイト内のどのページにもドラッグできます。
3. シンボルをキャンバスやナビゲーターパネルに直接ドロップすることもできます。

シンボルのインスタンスを選択すると、ハイライトされ緑色の枠で表示されます。スタイルパネルをクリックすると、そのシンボルがサイト内で何回表示されているかを確認できます。

シンボルをキャンバスに追加するには、Command + E（Mac の場合）または Control + E（Windows の場合）のクイック検索を使用することもできます。

ネストシンボル

シンボルを他のシンボルの中に入れ子にすることで、複雑なレイアウトをより簡単かつ効率的に構築、管理することができます。シンボルを入れ子にすることで、ボタンをシンボルにし、ナビゲーション、ヒーローセクション、フィーチャーカードなどもシンボルにすることができます。

これにより、シンボルの変更を1か所で行うと、他の箇所でも変更が反映されるようになります。

‍

シンボルをネストするには:

1. シンボルを入れ子にしたい親シンボルをダブルクリックします
2. シンボルパネルを開きます (または、キーボード ショートカットShift + Aを使用します) 。
3. パネルからシンボルを選択したシンボルにドラッグし、離します。

シンボルを含む親要素をシンボル化することもできます。

ネストされたオーバーライドフィールドを親シンボルにリンクさせる

オーバーライドフィールドを持つシンボルを別のシンボル内にネストすると、そのネストしたシンボルのフィールドを親シンボルにリンクさせるプロンプトが表示されます。これにより、ネストされたシンボル内のフィールドに対して、親シンボルのインスタンスからオーバーライドを設定することができます。

ネストされたシンボルを親シンボルにリンクするには:

1. 親シンボルにリンクするオーバーライドフィールドを持つネストされたシンボルを選択します
2. 「紫色のドット」アイコンをクリックして、オーバーライドフィールドを作成し、親シンボルのオーバーライドフィールドにリンクします。
3. 親シンボルにリンクしているオーバーライドフィールドに基づいて名前を付けます (例: 「card-button」)

コンテンツオーバーライドをシンボルインスタンスに適用する

要素設定パネルで個々のシンボルインスタンスにコンテンツオーバーライドを適用します。

シンボルインスタンスの要素にコンテンツオーバーライドを適用するには:

1. シンボルインスタンスをクリックします
2. シンボルの要素設定パネルから各オーバーライドフィールドの内容を編集します
3. そのシンボルインスタンスの歯車アイコンをクリックして、そのシンボルの設定モーダルを開きます。

オーバーライドをそのシンボルのデフォルトコンテンツに戻すには、インスタンスオーバーライド ラベルをクリックして、すべてのオーバーライドを一度にリセットします。

インスタンス オーバーライドラベルのいずれかをクリックして、デフォルトのコンテンツに戻すオプションを表示します。この例では、「Banner Header - Text」のラベルが青く強調表示されています。これが、オーバーライドされているサインです。

シンボルを編集する

メインシンボルの編集

シンボルを編集するには、インスタンスをダブルクリックするか、インスタンスを選択して Enter キーを押します。編集モードに入ると、メインのシンボルに変更が加えられます。

ダブルクリックして、メインのシンボルを編集します。メインのシンボルビューに、オーバーライドフィールドのデフォルト値が表示されます。

メインのシンボルを編集すると、すべてのシンボルインスタンスに反映されます。 (シンボルインスタンスにコンテンツオーバーライドが適用されている場合を除く)。

また、すべてのシンボルインスタンスの構造と要素の順序を、どのシンボルからでも一度に変更できます。

シンボルインスタンスで特にオーバーライドされない限り、シンボルの編集は各インスタンスに反映されます。

要素を削除して再接続し、フィールドをオーバーライドする

要素を既存のオーバーライドされたフィールドに接続すると、各インスタンスは以前に設定されたオーバーライドを再び適用します。

シンボルから要素を削除すると、他のインスタンスの同じ要素も削除されます(これはオーバーライドされている場合でも同様です)。新しい要素をメインのシンボルに追加し、それらを既存のオーバーライドフィールドに再接続できます。各インスタンスは、以前に設定されたオーバーライドを適用します。

シンボルを終了する

シンボルの編集が完了したら次のいずれかでシンボルの編集を終了できます。

1. 左上隅にあるインスタンスに戻るをクリック
2. キャンバス上のシンボルの外側をクリック
3. キーボードのEscキーを押します
   

エディタでシンボルを編集する場合

簡単更新ツール(Editor)でサイトのコンテンツを更新するようコラボレーターを招待した場合、コラボレーターがシンボル要素に加えたすべての変更は、各インスタンスすべてに適用されます。オーバーライドフィールドに関連付けられているシンボル内の要素を編集する場合、そのシンボルインスタンスの要素に対する編集は、そのシンボルインスタンスにのみ適用されます。

シンボルの名前を変更する

シンボルの名前を変更するには:

1. シンボルパネルを開きます
2. シンボルの横にある鉛筆アイコンをクリックします。

クイック検索を使用してシンボルの名前を変更するには:

1. 検索結果のシンボルインスタンスにカーソルを合わせます
2. 編集アイコンをクリックします

シンボルを削除する

シンボルを完全に削除するには:

1. シンボルのすべてのインスタンスをサイトから削除します
2. シンボルパネルを開きます
3. 鉛筆アイコンをクリックします
4. 消去をクリックします。

シンボルのリンクを解除

シンボルのリンクを解除して個別に変更するには:

1. シンボルラベルを右クリックします。
2. シンボルからのリンク解除を選択
3. もしくは、ナビゲーターで要素を右クリックして、リンクを解除を選択します。

リンクを解除すると、そのシンボルのリンクされたインスタンスを編集しても、リンクされていないインスタンスは変更されません。

一言メモ

メインシンボルが編集しようとしているコンテンツと重なっている場合、バーをダブルクリックすると、そのバーがデザイナーの上部に移動します。

‍

まとめ

いかがでしょうか。

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

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

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

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

今後とも宜しくお願い致します。

‍

Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。

‍Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。

Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。

‍

‍