メインコンテンツにスキップ
すべてのコレクションよくある質問エディタ(デザイン)
コンポーネントごとにデザインやデータの表示を変える方法
コンポーネントごとにデザインやデータの表示を変える方法

共通パーツをコンポーネント化し、それぞれのデザインやデータ表示を個別に調整する方法を解説します。

Saika avatar
対応者:Saika
今週アップデートされました

Tips:コンポーネントとは?

コンポーネントとは、プロジェクト内の要素を共通パーツとして管理・再利用するための機能です。コンポーネントにプロパティを追加することで、各パーツごとに異なる表示や編集が可能になります。例えば、同じデザインを使用しつつ、リンク先や表示する画像を変更できます。基本操作については、コンポーネントをご覧ください。

コンポーネントごとに表示を変える方法

コンポーネントでは、データ(画像やテキスト)やデザイン(色やボタン表示の有無)を個別に設定することが可能です。以下の手順で具体的な設定方法を説明します。

表示するデータ(画像・テキスト等)を変える

以下のプロパティを使用してコンポーネントごとに異なるデータ(画像・テキスト等)を表示させることができます。

  • 画像

  • テキスト

  • URL

  • 数値

設定手順

1.コンポーネントにプロパティを追加

コンポーネントを選択しレイヤーパネルを表示します。[コンポーネント編集]をクリックします。

スクリーンショット:コンポーネントを編集する様子。

[+]をクリックしプロパティを追加します。

スクリーンショット:コンポーネントにプロパティを追加する様子。

2.ボックスへのプロパティ紐付け

ここでは例としてコンポーネント内にテキストボックスを追加します。

テキストボックスへプロパティをコネクターを使って紐付けるか、画面右側のボックス設定パネルで適切なプロパティを選択します。

スクリーンショット:コンポーネントのプロパティをボックスへ紐づける様子。

表示するデザイン(スタイル)を変える

数値、カラー、ブール値プロパティを使って、コンポーネントごとに異なるデザインを設定することが可能です。

要素の表示・非表示を制御する

ブール値プロパティを使用して、特定の要素の表示・非表示を設定できます。例えば、特定のコンポーネントでのみ特別なコンテンツを表示する場合に便利です。

設定手順

1.コンポーネントにブール値プロパティを追加

コンポーネントを選択しレイヤーパネルを表示し、[コンポーネント編集]をクリックします。[+]をクリックしブール値を追加します。

2.コンポーネント毎に有効/無効を設定

表示したいコンポーネントで、ブール値プロパティを有効にします。

スクリーンショット:表示条件を設定するする様子。

3.表示条件を設定

表示を制御したい要素を選択し画面右側のボックス設定パネルを開きます。表示条件からブール値を選択します。

注意:CMSのブール値で設定可能な表示条件の「is True」「is False」は、コンポーネントの場合選択できません。トグル切り替えのみで調整します。

スクリーンショット:色や数値を設定する様子。

カラーと数値

カラーや数値プロパティをスタイルに紐付けることで、各コンポーネントのデザインを調整できます。例えば、カラープロパティを塗りに、数値プロパティを幅やパディングに適用することで、スタイルを統一しつつ個別に調整することが可能です。なお、数値プロパティはマージンと枠線へは紐付けできません。

スクリーンショット:カラーや数値を設定する様子。

こちらの回答で解決しましたか?