CMSアイテムに付属情報を追加できるプロパティの種類と編集方法について解説します。

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


  1. プロパティの追加

  2. プロパティの種類

    1. テキストプロパティ

    2. 画像プロパティ

    3. 参照プロパティ

      1. シングルセレクト

      2. マルチセレクト

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


1)プロパティの追加

プロパティは、アイテムの一覧画面と詳細画面どちらからでも追加できます。

プロパティはモデル単位の設定なので、追加すると、同じモデル内の全てのアイテムに反映されます。

アイテム一覧

CMSダッシュボードで、モデル名をクリックするとモデル設定モーダルが表示されます。その中の「+プロパティを追加」から追加できます。

アイテム詳細画面(記事タイプ)

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

アイテム詳細画面(記事タイプ以外)

テーブルの一番下の行「+プロパティを追加」から追加できます。

2)プロパティの種類

プロパティは、次の3種類で直接入力またはアップロードするか、他のモデルを参照することができます。

テキストプロパティ

プロパティ項目欄に直接テキスト入力ができ、テキスト情報だけでなくURL文字列を追加しデザインエディターにてリンク設定として使用することもできます。

画像プロパティ

手元の画像を直接アップロードすることができます。デザインエディターにて、画像ボックスを配置しプロパティ紐付けすることでアップロードした画像を表示させることができます。

参照プロパティ

参照プロパティは他2つのプロパティと違い、直接入力やアップロードではなく、CMS内の他モデルを参照しモデル内アイテムを紐付け表示させることができます。

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

シングルセレクト

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

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

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

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

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

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

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

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

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

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

マルチセレクト

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

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

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

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

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

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

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

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

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

注意点

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

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

プロパティの編集・削除

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

アイテム一覧画面

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

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

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

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

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

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

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

注意点

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

property reference

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