プロパティを活用して、同一コンポーネントのデータやデザインを配置箇所ごとに変える

Point：コンポーネントとは？

コンポーネントは、プロジェクト内で繰り返し使用するデザイン要素を共通パーツとして登録し、再利用や一括管理ができる機能です。基本操作については、コンポーネントをご覧ください。

通常、同一コンポーネントのデータやデザインを配置場所ごとに個別設定することはできませんが、プロパティを利用すると、配置箇所ごとにデータやデザインを切り替えられます。

プロパティの種類

コンポーネントでは、次の6種類のプロパティを使用できます。

プロパティの種類	説明
テキストプロパティ	テキストボックスやリッチテキストボックスに紐付けます。
画像プロパティ	アップロード画像やフリー画像を設定し、画像ボックスに紐付けます。
URLプロパティ	プロジェクト内のページや、外部サイトへのリンクを設定します。
数値プロパティ	デザインに利用する数値をプロパティとして登録します。パディングや横幅などに紐付けが可能ですが、マージンと枠線には紐付けできません。
ブール値プロパティ	オン／オフ（true / false）を表します。おすすめ商品のマーク付けや、特定データの色変更などに利用できます。
カラープロパティ	色（カラーコード）を登録し、ボックスの塗りやテキストの文字色として利用できます。

テキストや画像ボックスをコンポーネント内に追加すると、自動的にプロパティとして追加するオプションが表示されます。

右パネル内の各要素の設定タブで適切なプロパティを選択する。

以下のプロパティを使用して、同一コンポーネントのデータ（画像・テキスト等）を設置箇所ごと変えることができます。

プロパティの値は、対象コンポーネントの設置箇所ごとに設定・編集ができます。

以下のプロパティを活用して、同一コンポーネントのデザインを設置箇所ごと変える設定ができます。

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

ブール値プロパティを活用すると、特定の要素に表示・非表示の設定ができます。特定の設置箇所でのみ、特別なコンテンツを表示する場合に便利です。

コンポーネントにブール値プロパティを追加します。
プロパティの値を設定します。
該当のコンポーネントを設置した場所ごとに、ブール値を設定します。
表示条件としてブール値プロパティを使用します。
コンポーネント内で表示を制御したい要素を選択します。
右パネルで[設定]タブを開き、[表示条件]でブール値を選択します。
パネルが閉じている場合は、右パネルを開いてください。

カラーや数値プロパティをスタイルに紐付けて、各コンポーネントのデザインを調整できます。

（例）