【Studio】コンポーネントのプロパティについて分かりやすく解説

コンポーネントを使っていると、一箇所だけページごとにデザインを変えたいということがあると思います。

普通に変えてしまうとサイト全体で変わってしまいますが、プロパティという仕組みを使うことで実現可能です。

本記事ではStudioのコンポーネントのプロパティの設定について解説します。

プロパティとは

プロパティとは、コンポーネントの一部だけを配置場所ごとに変えられるようにする仕組みです。

通常、同じコンポーネントのデータやデザインはすべて共通化されますが、プロパティを設定すると、その場所だけ個別に扱えるようになります。

同じにしたいところは同じにして、変えたいところは変えられる。

そんな良いとこどりみたいなことができるわけです。

プロパティの種類

プロパティは6種類、内容を変えるだけでなく、デザインを変えることも可能です。

• テキスト：文字の内容を差し替える
• 画像：表示する画像を差し替える
• URL：リンク先を設定する
• カラー：背景色や文字色を変える
• 数値：数字の内容を差し替える
• ブール値：要素の表示と非表示を切り替える

名前だけで、何ができるかなんとなく分かると思います。

数値はサイズとか余白が変えられるのかと思いきや、ただ表示される数字を変えることができるだけ。

特殊なのはブール値で、これはオンオフを切り替えることで、紐付けした要素の表示・非表示を切り替えることができます。

プロパティの追加と紐付け

それでは、実際にコンポーネントにプロパティを設定していく方法についてお話ししていきます。

プロパティを設定する方法は大きく分けて二つ、

• コンポーネント作成時に指定する
• 後から追加する

コンポーネント作成時に指定する方法は手軽で簡単。

作成時の管理名を入力する画面にプロパティ化したい要素にチェックを入れるだけでデータの追加と紐付けまで完了します。

変えたい箇所がはっきりしているなら、この段階で済ませてしまうのが手っ取り早いです。

プロパティを追加する方法

すでに作成済みのコンポーネントにも、プロパティを追加することが可能です。

コンポーネントの編集モードに入ったら、右パネルの「データ」タブを開きます。

「プロパティ」横の「+」ボタンを押すと、追加するプロパティの種類を選べるので、追加したい内容に合わせたものを追加しましょう。

プロパティは、追加しただけでは何も起きず、実際の要素と結びつける必要があります。

追加したプロパティの左のグレーの丸をドラッグすると、紐のように伸びてくれるので、それをデザインエディタ上の要素へと接続します。

設定した内容に要素が変化すれば上手く接続できている証拠です。

プロパティの編集

値の設定は、編集モードではなく通常の選択状態でも可能です。

サイトに配置したコンポーネントを選択すると、右パネルにプロパティとして設定した項目を編集できる状態になります。

ここで入力した内容は選択しているコンポーネントでしか反映されないので、安心して編集することができます。

プロパティを扱う際の注意点

プロパティは便利な一方でクセのある設定なので、きちんと注意点を理解しておきましょう。

後からプロパティを追加して紐付ける操作を行うと、要素はプロパティの内容に置き換わる、つまり元の要素の内容は消えてしまいます。

何も考えずに追加・紐付けを行うと後悔する可能性があるので、注意しましょう。

ちなみに、最初から追加する際は元の文章の内容でプロパティが設定されるので、その心配はありません。

プロパティを追加すると全てのコンポーネントに反映されます。

一箇所を追加して編集しても、他の要素では初期状態のままなので、全てのコンポーネントの内容に問題がないかチェックしておきましょう。

実際プロパティを追加する際は、ここを変えたいと思って、プロパティを追加して変更。
それで満足してしまって他のページを元の状態に戻す作業を忘れてしまいがちなので、肝に銘じておくおく必要があります。

また、これは僕が考える使用上の注意なのですが、
プロパティはあまり増やしすぎないようにしておきましょう。

コンポーネントの強みは要素の共通化、変更すれば他の場所にも反映してくれるという所ですが、プロパティを追加すると、その分その強みを削ることになります。

極端な話全ての要素をプロパティ化すると通常のブロックとそう変わらなくなってしまうので、コンポーネントする意味が失われてしまいます。

プロパティを追加するときは慎重に、とりあえずでは追加しないようにしておきましょう。

まとめ

プロパティがあることで、コンポーネントはさらに便利になって、使い所も一気に広がります。

一方で設定する手間も増えるため、必要な箇所を見極めながら使わなくてはいけない。

そんな自身の力量が試されるプロパティ、ぜひ使ってみてください。