メインコンテンツにスキップ

CMSプロパティ

CMSプロパティは、CMSアイテム(記事や商品などのコンテンツ)に追加できる関連情報です。CMSプロパティの基本的な使い方と特徴について説明します。

昨日アップデートされました

Point: Studio CMSとは

Studio CMSは、Studio上で利用できるCMS(Content Management System)機能です。

仕組みや概要については、以下のヘルプ記事をご覧ください。

タイトル、本文、カバー画像などのコンテンツや条件設定に利用できるブール値など、CMSアイテムの関連情報はCMSプロパティとして管理します。

必須プロパティと任意プロパティ

プロパティには必須プロパティと任意プロパティがあり、必須プロパティはデフォルト表示され削除ができません。

任意プロパティはCMSモデルごとに追加が可能で、モデル内の各CMSアイテムごとに個別の値を登録します。

必須プロパティ

プロパティ名

説明

タイトル

CMSアイテムを識別する名前として常に表示されるプロパティです。

スラッグ

公開ページのURL末尾として利用する一意の文字列です。通常は各アイテムごとに自動生成されますが、必要に応じて変更できます。

ステータス

「下書き」「公開中」「変更あり」「公開予約中」などの公開状態を管理するプロパティです。

公開日時

公開サイトで閲覧可能になる日時を管理するプロパティです。

最終更新

CMSアイテムが最後に更新された日時を示すプロパティです。

編集操作に応じて自動的に更新され、ユーザーが直接変更したり削除したりすることはできません。

任意プロパティ

プロパティ種別

説明

テキスト

自由な文字情報(概要や補足説明など)を保存するプロパティです。必要に応じてモデルごとに追加・削除できます。

画像

サムネイル画像や本文とは別の画像を保存するプロパティです。カードデザイン用の画像など、任意の用途に合わせて追加します。

数値

価格や並び順、数値のIDなど、数値情報を保存するプロパティです。ソートや条件分岐に利用できます。

セレクト

あらかじめ登録した候補から1つだけ選択するプロパティです。ステータス風のラベルや種別の管理に向いています。

マルチセレクト

登録済みの候補から複数選択できるプロパティです。タグや複数カテゴリの紐付けに利用します。

ブール値

ON/OFFや有無などを管理する真偽値のプロパティです。フラグ的な情報(例:目立たせる、ピックアップ対象 など)を表現できます。

カラー

カラーコードなど色に関する情報を保存するプロパティです。カテゴリごとの色分けや、デザインと連動した表示に使えます。

参照プロパティ

他のCMSモデルのアイテムを紐付けるためのプロパティです。カテゴリとの紐付けや、関連記事・関連商品などの関係性を表現できます。


CMSプロパティを追加する

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

任意プロパティは以下の手順で追加します。

  1. 画面左のモデル一覧から、プロパティを追加したいモデルを選択します。

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

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

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

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

アイテムの詳細編集画面でも、同様にプロパティを追加できます。

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

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

  1. 画面左のモデル一覧から、対象のモデルを選びます

  2. アイテム一覧画面で、編集したいプロパティのラベルをクリックします。

  3. リストメニューで、以下の操作が可能です。

    • ラベル名の編集

    • セレクトプロパティやマルチセレクトプロパティの値選択

    • プロパティの非表示

    • プロパティの削除(プロパティ自体を削除すると元に戻すことができません。)

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

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

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

必須プロパティの種類

1. ステータス

アイテムの公開ステータスをコントロールするための機能です。「下書き」「公開中」「変更あり」「公開予約中」の4つのステータスがあります。

2. タイトル

CMSアイテムを識別する名前として常に表示されるプロパティです。

記事タイプでは記事のタイトルになります。

3. Slug(スラッグ)

スラッグはCMSアイテムを特定するための「ID」で、公開サイトのページURLの末尾になる文字列です。詳しくは、CMSプロパティ:Slug(スラッグ)を参照してください。

4. 公開日時

アイテムが公開サイトで閲覧できるようになった日時で、一度公開した後にその公開日時を編集時点、またはそれより過去の日付に変更が可能です。

5. 最終更新

CMSアイテムが最後に更新された日時を示します。編集操作に応じて自動的に更新され、ユーザーが直接変更したり削除したりすることはできません。


任意プロパティの種類

1. テキストプロパティ

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

ユースケース

設定方法

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

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

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

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

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

2. 画像プロパティ

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

ユースケース

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

  • 商品ごとに写真を表示

  • ライターのアイコンとして表示

3. ブール値プロパティ

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

ユースケース

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

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

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

設定方法

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

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

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

関連記事

4. 数値プロパティ

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

ユースケース

  • 値段を入力し、エディタの絞り込み機能で3,000円以下の商品のみ表示する

  • 商品のサイズを入力し、エディタの絞り込み機能で100cm~500cmの商品のみ表示する

設定方法

  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つのアイテムのみ参照可能

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

マルチセレクト:

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

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

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

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

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


CMSプロパティの値を編集する

  1. 画面左のモデル一覧から、対象のモデルを選びます。
    CMSアイテム一覧画面で、対象のプロパティの値を編集します。

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

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

    • セレクト / マルチセレクトプロパティの値を削除する場合には、[×]をクリックして解除します。

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

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

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

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

property reference

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