Studio CMS：CMS記事を作成して公開する

StudioCMSの仕組みや概要については、Studio CMSとはをご覧ください。

Studio CMSで記事コンテンツを作成する

まずはじめに、CMSダッシュボードで記事コンテンツの構造と中身を準備します。

CMSを使用するには、まず対象プロジェクトでStudio CMSを有効化する必要があります。

プロジェクト一覧から、対象プロジェクトにアクセスします。
プロジェクトのダッシュボード上部の [CMS] タブをクリックし、CMSダッシュボードにアクセスします。
デザインエディタから開く場合は、左上のStudioアイコン[／S]をクリックし、メインメニューから [CMS] を選択します。
CMS機能を有効化していないプロジェクトでは、CMSの始め方を選択する画面が表示されます。
この記事では、テンプレートを使用しない方法を紹介するので、[空白からはじめる]を選択します。
※ すでにCMSを利用中のプロジェクトでは、「はじめよう」のページは表示されません。

Tips: その他の方法でCMSを始める

テンプレートから始める場合

モデルやアイテムがあらかじめセットされたテンプレートデータを作成できます。同時に、プロパティが紐付いた動的ページや検索ページがデザインエディタ上で自動作成されるため、CMSダッシュボードでコンテンツを編集するだけですぐに利用を開始できます。

CMSの代表的な用途に合わせて、以下のテンプレートを用意しています。

WordPressのデータを引き継いで始める場合

画面下の[XMLファイルをインポート]を選択します。詳しい手順は、WordPressからStudioへデータをインポートするをご覧ください。

CMSを有効化したら、CMSダッシュボードで記事コンテンツの構造と中身を作成します。

CMSモデルを追加する
この記事では、記事作成に特化した記事タイプのCMSモデルを利用し、記事コンテンツをひとまとまりのグループとして管理します。
1. CMSダッシュボードで、画面左上の[＋]ボタンをクリックします。
2. プルダウンメニューから記事タイプを選択します。
3. 任意のモデル名を入力し、[作成する]をクリックします。
CMSアイテムを追加する
作成したCMSモデル内にCMSアイテムを追加します。
記事タイプのモデルには、記事コンテンツに必要な情報（記事タイトル、記事本文、カバー画像など）をCMSプロパティとして登録できます。
1. モデル一覧から対象のモデルを選択し、[アイテムを追加]ボタンをクリックします。
  画面右上の[＋新規追加]ボタンからもアイテムを追加できます。
2. アイテム編集画面で記事コンテンツを作成します。
  アイテム編集画面では、記事タイトル、本文、カバー画像などをCMSプロパティとして登録しコンテンツを作成します。
  ここで追加したテキストや画像などのCMSプロパティのデータは、後のステップでデザインエディタ上の動的ページに追加したボックスに紐付けて表示します。

デザインエディタに移動し、動的ページを追加してCMSプロパティとボックスを紐付けます。

Point: 動的ページとは

動的ページは、CMSダッシュボードで管理するコンテンツを動的に表示するために使用するページタイプです。

ℹ️ 2025年11月25日にリリースした「Editor 5.0」では、メニュー配置や操作手順が異なる場合があります。

記事の本文やカバー画像など、表示させたいプロパティを紐付けるボックスを追加します。
右パネルのデータタブでプロパティとボックスを紐付けます。
パネルが閉じている場合は、右パネルを開いてください。
以下の例では、画像ボックスにプロパティ「カバー画像」、リッチテキストボックスにプロパティ「本文」が紐付いています。