![](https://mik2062.jp/wp-content/uploads/2022/08/fbb78db025839258a0abd0d6100df36a-150x150.png)
STUDIOのCMSでもブログのようにカテゴリに分けることはできますか?
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
STUDIOのCMSでカテゴリに分ける方法を説明します
CMSのデータをカテゴリに分ける
STUDIOのCMSデータをカテゴリ分けするには、ブログ記事を記事型のデータ
として作成するのと同じように、記事のカテゴリをカテゴリ型のデータ
として作成します。
その上で記事型のデータ
の中にカテゴリ型の項目
を追加して各記事をカテゴリに紐づけます。
![](https://mik2062.jp/wp-content/uploads/2024/02/image-27.png)
![](https://mik2062.jp/wp-content/uploads/2024/02/image-27.png)
記事データを作成する
STUDIOのCMSで記事タイプのデータを作成します。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-56.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-56.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/8089e50294910c6cb163e5cb54ad137b-2-300x158.jpg)
![](https://mik2062.jp/wp-content/uploads/2023/01/8089e50294910c6cb163e5cb54ad137b-2-300x158.jpg)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-10-1024x595.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-10-1024x595.png)
カテゴリモデルを作成
CMSの画面でモデルの+
ボタンをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-24.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-24.png)
新規モデルの作成画面でモデル名
を入力してモデルタイプ
でカテゴリータイプ
を選択して 作成するボタンをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-25.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-25.png)
作成したモデルのデータを作成します。
+ 作成するボタンをクリックします。![](https://mik2062.jp/wp-content/uploads/2023/01/image-26.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-26.png)
カテゴリ
型のデータの作成画面で、タイトル
とSlug(スラッグ)
を入力します。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-27.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-27.png)
以下はカテゴリの各データに画像項目を持たせる場合の手順になります。
カテゴリ
データの編集画面でプロパティを追加
をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-53.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-53.png)
一番上の入力欄にプロパティ名を入力してプロパティタイプ
は画像を選んで 追加ボタンをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-54-1024x562.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-54-1024x562.png)
これでカテゴリ
モデルのデータに画像項目が追加されます。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-55.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-55.png)
作成したカテゴリ
型のデータを公開するために公開する
をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-28.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-28.png)
続けて別のカテゴリを作成するために複製
をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-18-1024x678.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-18-1024x678.png)
複製された別のカテゴリの入力画面になります。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-19-1024x667.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-19-1024x667.png)
複製したカテゴリにも値を入力して同じように公開する
をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-20-1024x661.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-20-1024x661.png)
同じようにして、カテゴリのデータを必要なだけ作成します。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-52.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-52.png)
記事にカテゴリを追加する
今度は、投稿モデルのデータにカテゴリの入力欄を追加します。
投稿データの一覧画面でリスト上部にある+
をクリックしてプロパティを追加
を選択します。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-29-1024x591.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-29-1024x591.png)
プロパティ名にカテゴリと入力してモデルを参照
のカテゴリを選択します。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-30-1024x592.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-30-1024x592.png)
設定
はシングルセレクトを選択します。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-31-1024x590.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-31-1024x590.png)
投稿データのリストに、カテゴリ
列が追加されます。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-32-1024x590.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-32-1024x590.png)
CMSの投稿データのリストのカテゴリ
列をクリックして選択できるアイテム
でカテゴリを選択します。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-34-1024x597.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-34-1024x597.png)
選択したカテゴリが、投稿データにセットされます。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-35-1024x597.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-35-1024x597.png)
公開後にデータに行った編集は、そのままでは公開しているデータには反映されません。
編集したデータの先頭列の●をクリックして更新する
を選択することで、編集内容が公開データに反映されます。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-36-1024x599.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-36-1024x599.png)
最新の内容が公開された状態になり、先頭列が●に変わります。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-37-1024x593.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-37-1024x593.png)
入力したカテゴリを削除したい場合、カテゴリ列を彩度クリックして選択中
のカテゴリの右の×
ボタンをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-57.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-57.png)
カテゴリを各データの編集画面で入力する場合は、先頭列を選択して
![](https://mik2062.jp/wp-content/uploads/2023/01/image-41.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-41.png)
カテゴリデータ編集画面でカテゴリ欄を入力します。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-40-1024x592.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-40-1024x592.png)
すべての投稿データにカテゴリをセットします。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-58-1024x538.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-58-1024x538.png)
カテゴリの使い方
カテゴリの表示
カテゴリも他のCMSの項目と同様に表示することができます。
デザインエディタに移動します。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-59.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-59.png)
画面左側の一番下のアイコンをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-44-1024x455.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-44-1024x455.png)
追加
タブを開いてCMS
を選択して一番上のリストをクリックして配置します。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-45-1024x558.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-45-1024x558.png)
一番下のテキスト欄を選択して右上のアイコンをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-46-1024x562.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-46-1024x562.png)
ボックスの情報が表示されるのでテキストをクリックしてDeleteキーで空欄にします。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-48-1024x555.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-48-1024x555.png)
CMSプロパティから選択
のカテゴリ
の Titleを選択します。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-49-1024x561.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-49-1024x561.png)
CMSリストの各記事にカテゴリが表示されます。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-50-1024x597.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-50-1024x597.png)
指定したカテゴリのみ表示
CMSデータのリストを選択して画面右側のアイコンをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-63-1024x495.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-63-1024x495.png)
リストのフィルター
でカテゴリを選択します。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-64-1024x431.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-64-1024x431.png)
フィルター条件
でカテゴリのいずれかを選択します。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-65-1024x535.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-65-1024x535.png)
リストに選択したカテゴリのデータのみが表示されます。
![](https://mik2062.jp/wp-content/uploads/2023/01/image-66-1024x690.png)
![](https://mik2062.jp/wp-content/uploads/2023/01/image-66-1024x690.png)