メインコンテンツにスキップ
CMSプロパティ

CMSプロパティを使うと、ブログ記事やニュースなどのコンテンツに必要な情報を簡単に追加・管理できます。この記事では、CMSプロパティの基本的な使い方と特徴をご紹介します。

Saika avatar
対応者:Saika
一週間前以上前にアップデートされました

CMSプロパティとは

CMSプロパティは、CMSアイテム(記事や商品などのコンテンツ)に追加できる関連情報です。モデル(アイテムのグループ)ごとにプロパティを設定でき、各アイテムに個別の値を登録できます。

次のプロパティタイプがあります。

  • テキスト

  • 数値

  • セレクト(単一の選択肢)

  • マルチセレクト(複数の選択肢)

  • ブール値(オン or オフ)

  • カラー

  • 画像

  • 参照(別モデルを参照)

スクリーンショット:プロパティ追加画面の様子。

CMSプロパティの追加方法

  1. CMSダッシュボードを開きます。

  2. モデルとアイテムを選択します。

  3. アイテム一覧画面で[+]をクリックして、プロパティの種類を選びます。

  4. プロパティのラベルを編集し、追加をクリックします。

  5. アイテムごとにプロパティの値を設定します。

CMSダッシュボードにて、CMSプロパティをアイテムに追加する様子。

Tips:追加したプロパティをページに表示するには、エディタ上でボックスにデータを紐付ける操作が必要です。詳しくは、動的ページ > CMSデータの紐付けをご覧ください。

アイテムの詳細画面でも同様に追加ができます。

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

ラベル編集とプロパティの削除

  1. CMSダッシュボードへアクセスします。

  2. モデルとアイテムを選択します。

  3. アイテム一覧画面でプロパティのラベルをクリックします。
    ここではラベルの変更やプロパティ自体の削除ができます。 プロパティ自体を削除すると元に戻せないためご注意ください。

CMSダッシュボードにて、追加済みCMSプロパティのラベル変更とプロパティ削除を行う様子。

アイテムの詳細画面でも同様の操作が行えます。

スクリーンショット:アイテム詳細画面からプロパティを編集・削除する様子。

プロパティの種類

1. テキストプロパティ

テキストプロパティは、文字列を登録できるプロパティです。1行表示と複数行表示を選択できます。改行設定は、後からプロパティ設定画面で切り替えられます。

ユースケース

  • 記事のサブタイトルとして表示

  • 商品の説明文を表示

  • 外部リンクのURLを登録

設定方法

  1. プロパティ追加時に[改行なし]または[改行あり]を選択します。

  2. テキストを入力して保存します。 改行ありの場合:Shift/Option + Returnで改行(WindowsではShiftまたはAlt)できます。

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

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

URLとしてテキストプロパティを活用している例:

スクリーンショット:URLとしてテキストプロパティを活用している例

2. 画像プロパティ

画像プロパティは、アップロード画像が追加できるプロパティです。アップロード可能な画像の形式は、Studioエディタにアップロード可能なファイル形式やサイズをご覧ください。

ユースケース

  • 記事ごとにアイキャッチ画像を表示

  • 商品ごとに写真を表示

スクリーンショット:画像プロパティをボックスに紐づける様子。

3. ブール値プロパティ

ブール値プロパティは、オン・オフ(true / false)が設定できるプロパティです。

ユースケース

  • 「新着」バッジの表示・非表示(表示条件を併用)

  • 「おすすめ」商品のマーク付け(表示条件を併用)

  • 特定コンテンツのスタイル(色やサイズなど)変更(条件付きスタイルを併用)

設定方法

  1. プロパティ追加時に[ブール値]を選択します。

  2. わかりやすいラベル名を設定(例:「新着表示」「おすすめ商品」)します。

  3. アイテムごとにオン・オフを設定します。

画像は条件付きスタイルを併用し、特定記事のスタイルを変更する様子です。

スクリーンショット:ブール値プロパティを使ってスタイルを設定する様子。

関連記事

4. 数値プロパティ

数値プロパティは、数字が追加できるプロパティです。

ユースケース

  • スタイルの数値設定(余白、文字サイズなど)

設定方法

  1. プロパティ追加時に[数値]を選択します。

  2. アイテムごとに数値を入力します。

数値プロパティは、スタイルバー上のパディング、文字サイズなど青枠で表示される各種数値に紐付けることができます。

スクリーンショット:数値プロパティを使って、スタイルを設定する様子。

5. カラープロパティ

色(カラーコード)を設定できるプロパティです。登録したカラープロパティは、ボックスの塗り、テキストボックスの色(文字色)として利用可能です。

ユースケース

  • カテゴリーごとの色分け

  • タグの背景色設定

設定方法

  1. プロパティ追加時に「カラー」を選択します。

  2. カラーピッカーまたはカラーコードを入力して色を選択します。

  3. 「決定」で保存します。

注意

  • グラデーションは設定できません。

  • CMSダッシュボードからお気に入りパレットへの追加や削除はできません。

スクリーンショット:カラープロパティを使って、スタイルを編集する様子。

6. セレクトプロパティ

セレクトプロパティは、登録済みのオプションから1つの項目を選択できるプロパティです。アイテムのカテゴリ分けやタグ表示に活用できます。

特徴

  • CMSリストでフィルター条件として単一の項目を指定し、アイテムを絞り込むことが可能です。

  • 参照プロパティとは異なり、スラッグ(固有のURL)を持たないためセレクトプロパティを使って独立したページパスを作成することはできません。

ユースケース

  • イベント情報のお知らせ記事で、イベントごとの参加方法として「要予約」「予約不要」の単一ラベルを付ける(ラベルごとの記事一覧ページは作成しない場合)

スクリーンショット:イベント情報のお知らせ記事で、イベントごとの参加方法として「要予約」「予約不要」の単一ラベルを設定する様子。

設定方法

  1. プロパティ追加時に[セレクト]を選択します。

  2. 選択肢を登録します。

  3. アイテムごとに1つの項目を選び、設定します。

スクリーンショット:セレクトプロパティを設定する様子。

7. マルチセレクトプロパティ

マルチセレクトプロパティは、登録済みのオプションの中から複数の項目を選択できるプロパティです。

CMSリストのフィルター条件を使って、一度に複数の条件で絞り込みを行う場合に活用できます。絞り込み条件には、最大5つのプロパティ項目(and検索)が設定できます。

特徴

  • CMSリストでフィルター条件として複数の項目を指定し、アイテムを絞り込むことが可能です。

  • 参照プロパティとは異なり、スラッグ(固有のURL)を持たないためセレクトプロパティを使って独立したページパスを作成することはできません。

ユースケース

  • 採用ページに業務内容として「人事」「経理」などの複数ラベルを表示する(ラベルごとの記事一覧ページは作成しない場合)

  • ポートフォリオサイトで「グラフィック」「Webサイト」などの複数ラベルを表示する(ラベルごとの記事一覧ページは作成しない場合)

スクリーンショット:採用ページに業務内容として「人事」「経理」などの複数ラベルを表示する様子。

設定方法

  1. プロパティ追加時に[マルチセレクト]を選択します。

  2. 選択肢を登録します。

  3. アイテムごとに必要な項目を複数選択します。

  4. サイト上とダッシュボード内での表示順がドラッグ&ドロップで編集できます。 上部の項目はサイト上の表示順で、下部はダッシュボード内での表示順です。

マルチセレクトプロパティを設定する様子。

8. 参照プロパティ

参照プロパティはアイテムに直接追加するプロパティとは異なり、他のモデルのアイテムを参照できるプロパティです。シングルセレクト(1つ)とマルチセレクト(複数)から選択できます。

特徴

  • プロパティ自体にスラッグ(固有のURL)などの付属情報が設定できるため、独立したページパスを作成したり、プロパティ項目ごとに画像やテキストを追加表示することができます。

  • CMSリストのフィルター条件に単一または複数の項目を指定して、アイテムを絞り込むことが可能です。マルチセレクトの場合、最大5つのプロパティを条件(and検索)に絞り込みが設定できます。

ユースケース

  • 記事にライター情報(画像や名前など複数の情報)を掲載する

  • タグやカテゴリーを表示する(タグやカテゴリーごとに記事一覧ページも作成する場合)

設定方法

  1. プロパティ追加時に[モデルを参照]から、モデルを選択します。

  2. シングルセレクト・マルチセレクトのいずれかを選びます。

  3. アイテムごとに参照アイテムを選択します。

参照プロパティは追加時にシングルセレクトかマルチセレクトを選択します。後からセレクト設定を切り替えることはできないため、シングル・マルチを切り替えたい場合はプロパティの作り直しが必要となります。

スクリーンショット:参照プロパティを追加する様子。

シングルセレクトとマルチセレクトの違い

シングルセレクト:

  • 1つのアイテムのみ参照可能

  • テキストや画像ボックスに紐付け可能

マルチセレクト:

  • 複数のアイテムを参照可能

  • リストにのみ紐付け可能

スクリーンショット:参照プロパティのマルチセレクトをボックスに紐づけた様子。

注意:リストに紐づく参照プロパティを、マルチセレクトからシングルセレクトに変更することはできません。 マルチ・シングルの変更が必要な場合には、リストの再作成が必要となります。

スクリーンショット:参照プロパティのマルチセレクトをボックスに紐づけた様子。

プロパティ項目の編集と設定解除

  1. CMSダッシュボードへアクセスします。

  2. モデルとアイテムを選択します。
    アイテム一覧画面で、追加されているプロパティ項目を編集します。

    • 通常のプロパティ:アイテム一覧または詳細画面で直接編集が可能です。

    • 参照プロパティ:プロパティ自体の編集は参照元のモデルで行います。

  3. 設定したプロパティ項目は、[×]をクリックして解除することができます。

  4. アイテムの更新
    公開中のアイテムで、プロパティ項目の編集や設定を解除すると、ステータスが「更新あり」になります。公開サイトへ変更を反映するには、アイテムのステータスを更新する必要があります。

スクリーンショット:アイテムの詳細画面からプロパティ項目の編集と設定を解除する様子。

アイテムの詳細画面でも同様の操作が行えます。

スクリーンショット:アイテムの詳細画面からプロパティ

property reference

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