CMSプロパティとは
CMSプロパティとは、CMSアイテムに追加することができる関連情報です。 初期設定時はタイトル、slugなど最低限のプロパティが設定されています。 モデルごとにプロパティを追加することができ、各アイテムごとに個別の値を登録します。
次の5種類のプロパティタイプがあります。
テキストプロパティ
画像プロパティ
ブール値プロパティ(オン/オフ)
数値プロパティ
カラープロパティ
また、別のモデルのアイテム情報を参照する「参照プロパティ」もあります。
この記事ではプロパティの追加・編集方法と各プロパティの特徴をご紹介します。プロパティを使うことでCMSを使ったWebサイト表現の幅が広がるのでぜひご活用ください。
CMSプロパティの追加方法
CMSアイテム一覧とCMSアイテムの詳細画面の2箇所から追加できます。プロパティタイプを選ぶか、「モデルを参照」から参照モデルを選択し、追加します。
CMSアイテム一覧
アイテム詳細画面(記事タイプ)
アイテム詳細画面(記事タイプ以外)
プロパティの種類
プロパティを追加する際、5つのプロパティとモデルを参照するプロパティが選択できます。
1. テキストプロパティ
テキストプロパティは、文字列を追加できるプロパティです。
ユースケース
記事のサブタイトルとして表示
商品の説明文を表示
外部リンクのURLを登録
設定方法
プロパティ追加時に「改行なし」「改行あり」を選択
改行ありの場合:Shift/Option + Returnで改行(WindowsではShiftまたはAlt)
テキストを入力して保存
注意:改行ありからなしへ切り替える際、CMSダッシュボード上だけ改行箇所に<br> が残り、エディタ・ライブプレビュー・公開サイト上では改行されたままになります。 必要に応じ、文字列 <br>を手動で削除してください。
URL設定例:
2. 画像プロパティ
画像プロパティは、アップロード画像やUnsplashの画像が追加できるプロパティです。
ユースケース
記事(アイテム)ごとに画像を表示する
記事ごとにカバー画像を設定する
3. ブール値プロパティ
ブール値プロパティは、オン・オフ(true / false)が設定できるプロパティです。
ユースケース
「新着」バッチの表示/非表示(表示条件を併用)
「おすすめ」商品のマーク付け(表示条件を併用)
特定コンテンツのスタイル(色やサイズなど)変更(条件付きスタイルを併用)
設定方法
プロパティ追加時に「ブール値」を選択
わかりやすいラベル名を設定(例:「新着表示」「おすすめ商品」)
各アイテムでオン/オフを切り替え
画像は条件付きスタイルを併用し、特定記事のスタイルを変更する様子です。
関連記事
4. 数値プロパティ
数値プロパティは、数字が追加できるプロパティです。
ユースケース
テキストとして表示する
スタイルの数値設定(余白、文字サイズなど)
設定方法
プロパティ追加時に「数値」を選択
必要に応じて初期値を設定
各アイテムで数値を入力
スタイルバーには、パディング、文字サイズなど青枠で表示される各種数値に紐付けることができます。
5. カラープロパティ
色(カラーコード)を設定できるプロパティです。登録したカラープロパティは、ボックスの塗り、テキストボックスの色(文字色)として利用可能です。
ユースケース
カテゴリーごとの色分け
タグの背景色設定
設定方法
プロパティ追加時に「カラー」を選択
カラーピッカーまたはカラーコードを入力して色を選択
「決定」で保存します
注意:
グラデーションは設定できません。
CMSダッシュボードからお気に入りパレットへの追加や削除はできません。
6. 参照プロパティ
参照プロパティはアイテムに直接追加するプロパティとは異なり、他のモデルのアイテムを参照できるプロパティです。シングルセレクト(1つ)とマルチセレクト(複数)から選択できます。
ユースケース
記事にライターを表示する
タグやカテゴリーを表示する
設定方法
プロパティ追加時に「参照モデル」を選択
参照するモデルを選択
シングル/マルチセレクトを選択
各アイテムで参照アイテムを設定
参照プロパティを追加する際、シングルセレクトかマルチセレクトのどちらか選択する必要があります。なお後から切り替えることができないため、切り替えたい場合はプロパティを削除し新しく追加する必要があります。
シングルセレクトとマルチセレクトの違い
シングルセレクト:
1つのアイテムのみ参照可能
テキストや画像ボックスに紐付け可能
マルチセレクト:
複数のアイテムを参照可能
リストにのみ紐付け可能
プロパティ名の編集とプロパティ削除
プロパティの編集は、アイテム一覧画面とアイテム詳細画面の両方から行えます。
なおプロパティ自体を削除すると、同じモデルに所属する他すべてのアイテムからも削除されます。ご注意ください。
アイテム一覧画面
プロパティ名をクリックすると設定画面が表示されます。
プロパティ名横の鉛筆マークからプロパティ名の編集ができ、削除ボタンから削除します。
アイテム詳細画面(記事モデル)
プロパティ名にカーソルをあてるとボタンが表示されます。ボタンをクリックして鉛筆マークからプロパティ名の編集。削除ボタンから削除ができます。
アイテム詳細画面(記事モデル以外)
プロパティにカーソルをあてるとプロパティ名の左横にボタンが表示されます。
ボタンをクリックすると設定画面が開き、鉛筆マークからプロパティ名の編集。削除ボタンから削除ができます。
property
reference