プロパティは、CMSアイテムに付属する様々な情報を指します。

それらの追加・編集・削除方法と、種類について解説します。

CMSのモデル、アイテム、コレクションについて、詳しくはCMSデータの仕組みで解説しています。


  1. プロパティの追加

    1. アイテム一覧から

    2. アイテム詳細から

  2. プロパティの種類

    1. テキストプロパティ

    2. 画像プロパティ

    3. ブール値プロパティ

    4. 数値プロパティ

    5. カラープロパティ

    6. 参照プロパティ

  3. プロパティの編集・削除


1)プロパティの追加

CMSダッシュボード(アイテム一覧)、CMSアイテムの詳細画面、どちらからでも以下の手順で追加できます。

  1. プロパティ名を入力

  2. プロパティタイプ、または参照するモデルを選択

  3. 追加ボタンをクリック

プロパティの有無はモデル単位のため、追加すると同じモデル内の全てのアイテムで内容を設定できるようになります。

a) アイテム一覧から

アイテム一覧の一番右に「+」ボタンがあります。

ここをクリックし、さらに一番下にある「+プロパティを追加」から追加できます。

b) アイテム詳細から

記事タイプ:

画面右側の一番下「+プロパティを追加」から追加できます。

記事タイプ以外:

プロパティリストの一番下「+プロパティを追加」から追加できます。

2)プロパティの種類

5つのプロパティタイプ、そしてモデル参照型のプロパティ、あわせて6種類あり、それぞれに適した用途があります。

a) テキストプロパティ

入力した文字列をテキストボックスに紐付け文章として表示したり、リンク設定で使うURL文字列として利用できます

このプロパティを追加する際、改行なし・ありどちらかの選択が必要です。

改行ありを選択すると、プロパティ内でキーボードのshift、option、または ⌘(WindowsではShiftまたはAlt)を押しながらEnterを押して改行できます。

改行あり・なしは、後からプロパティ設定画面で切り替えることもできます。

ただ、改行ありからなしへ切り替える際、CMSダッシュボード上だけ改行箇所に <br> が表示され、エディター・プレビュー・公開サイト上では改行されたままになります。 必要に応じ、文字列 <br> を手動で削除してください。

テキストプロパティはリンク設定でも利用できます。

動的ページ・リスト内で、特定のリンク設定をアイテム毎に変更することができます。

URL設定例:

b) 画像プロパティ

画像をアイテム毎にアップロードできます。

エディターに配置した画像ボックスに紐付ければ、その画像を表示します。

c) ブール値プロパティ

トグルで、オン・オフ(true/false)どちらかを選択できます。デフォルトはオフです。

以下の機能を活用して、オンになっているアイテム内要素のスタイルを変える、または非表示にすることができます。

例えば下記画像では、表示条件を用いて、ブール値プロパティ「new」をTrueにしたCMSアイテムだけ、テキストボックス「New」を表示しています。

d) 数値プロパティ

数値のみ入力できます。テキストプロパティと同様、テキストボックスに紐付けて、数値を文字列として表示できます。

他にも、マージン・縦横幅・文字サイズなど、スタイルバーの各種数値設定に紐付けることができます。

e) カラープロパティ

色(カラーコード)を登録できます。

カラーパレットから選択するだけでなく、RGBAまたはHEXコードでの指定もできます。色を指定した後、「決定」ボタンをクリックして保存できます。

登録したカラープロパティは、ボックスの塗り、テキストボックスの色(文字色)でのみ利用可能です。

また現時点で、CMSダッシュボード側からお気に入りパレットへの色追加・削除はできません。エディターでお気に入りに追加した色はCMSダッシュボードからでも選択できます。

f) 参照プロパティ

参照プロパティは、CMS内の他モデルを参照しそのモデル内アイテムを紐付け表示させることができます。

この参照プロパティを追加する場合、シングルセレクトかマルチセレクトのどちらか選択する必要があります。

i ) シングルセレクト

シングルセレクトは、CMSダッシュボードで追加できる参照アイテムが1つのみとなり、デザインエディターで表示させるプロパティも1つになります。

例をもとに解説していきます!

あるブログサイトでは、画像のような3つのカテゴリーに分けて記事を作成しています。

このサイトで各記事に記事の属するカテゴリーを表示させたい場合、記事は記事モデルで管理し、カテゴリーはカテゴリーモデルで管理します。

次に各記事にカテゴリーを追加したいので、記事モデルに参照プロパティとして「カテゴリー」モデルをシングルセレクトで追加し、各アイテムに任意のカテゴリープロパティを設定します。

デザインエディターでカテゴリーを表示させるボックスを用意し、プロパティのデータ紐づけをします。

  1. カテゴリーを配置したいページを開き、テキストボックスを配置します

  2. テキストフィールドをクリックし、CMSプロパティの「カテゴリー」プロパティから「Title」を紐付る

  3. カテゴリー別記事一覧ページへのリンク設定をすれば完成です!

今回の例のようにアイテムに1つのプロパティ情報を追加するときにシングルセレクトを利用します。

ii ) マルチセレクト

マルチセレクトは、CMSダッシュボードで複数の参照アイテムを追加でき、デザインエディターではリストとしてプロパティを複数表示できます。

こちらも例をもとに解説していきます!

今回は、1つの記事に複数のタグを設定して表示します。

まずはCMSダッシュボードで「タグ」を管理するモデルを追加し、記事モデルに参照プロパティとしてタグを管理するモデルをマルチセレクトで追加し、各記事に任意のタグアイテムを設定します。

次に、デザインエディターでタグを表示させるボックスを用意し、プロパティのデータ紐づけをします。

  1. タグを配置したいページを開き、テキストボックスを配置します

  2. テキストフィールドをクリックし、CMSプロパティから「タグ」を紐付る

  3. タグ別記事一覧ページへのリンク設定をすれば完成です!

マルチセレクトはリストとして表示されるところがシングルセレクトと異なり特徴的です。

注意点

  • シングルセレクトはテキスト/画像ボックスに、マルチセレクトはリストにしか紐づかないため、リスト化されているマルチセレクトのボックスの表示内容を後からシングルセレクトに変更しようとしても、選択肢にシングルセレクトは出てきません。

  • 参照プロパティ追加時に選んだシングルセレクト/マルチセレクトは後から変更ができないので、変更したい場合はプロパティを削除し新しく追加する必要があります。

プロパティの編集・削除

プロパティの編集は、アイテム一覧画面とアイテム詳細画面のどちらからでも行えます。それぞれの編集画面は次の通りです。

アイテム一覧画面

プロパティ名をクリックすると設定画面が表示されます。

プロパティ名横の鉛筆マークからプロパティ名の編集ができ、削除ボタンからプロパティ削除できます。

アイテム詳細画面(記事モデル)

記事モデルのアイテム詳細画面右側にあるプロパティ名にカーソルをあてるとボタンが表示されます。ボタンをクリックして鉛筆マークからプロパティ名の編集ができ、削除ボタンから削除できます。

アイテム詳細画面(記事モデル以外)

プロパティにカーソルをあてるとプロパティ名の左横にボタンが表示されます。

ボタンをクリックすると設定画面が開き、鉛筆マークからプロパティ名の編集ができ削除ボタンから削除できます。

注意点

  • プロパティ自体を削除すると、同じモデルに所属する他すべてのアイテムからも削除されます

property reference

回答が見つかりましたか?