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

Studio CMS:記事作成から公開までの流れ

Studio CMSで記事コンテンツを作成し、サイトで公開するまでの流れを説明します。CMSの有効化から、CMSダッシュボードでのデータ作成、デザインエディタでの紐付け、サイト公開までの手順をステップごとに解説します。

Point: Studio CMSとは

Studio CMSは、Studio上でコンテンツを構造化して管理・更新できるCMS(Content Management System)機能です。

モデルやアイテム、プロパティを組み合わせて、ブログやニュースなどの更新性が高いコンテンツを一元管理します。

Studio CMSの仕組みや概要については、Studio CMSとはを参照してください。


この記事では、Studio CMSを有効化して記事コンテンツを作成し、サイトで公開するまでの流れを説明します。手順は以下のとおりです。

  1. CMSをはじめる

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

  3. デザインエディタでCMSコンテンツのデザインを調整する

  4. CMSアイテムの公開ステータスを変更する

  5. サイトを公開する


手順1. CMSをはじめる

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

  1. CMS機能を有効化していないプロジェクトでは、CMSの始め方を選択する画面が表示されます。[空白からはじめる]を選択します。

    すでにCMSを利用中のプロジェクトでは、この画面は表示されません。

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

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

CMSモデルCMSアイテムがあらかじめセットされたテンプレートデータを活用できます。

テンプレートから始めた場合、プロパティが紐付いた動的ページ検索ページもデザインエディタ上で自動作成されるため、CMSダッシュボードでコンテンツを編集するだけですぐにページにコンテンツが反映されます。

用途に合わせて以下のテンプレートを用意しています。

  • メディア・ブログ

  • メンバー紹介

  • ニュース・お知らせ

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

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


手順2.Studio CMSで記事コンテンツを作成する

CMSを有効化したら、CMSダッシュボードで記事コンテンツの構造と中身を作成します。CMSモデルCMSアイテムCMSプロパティの順に追加・編集をします。

記事コンテンツの作成手順は、CMSダッシュボードでCMS記事アイテムを作成するも参照してください。

記事タイプモデルを作成する

CMSモデルは、コンテンツデータ(CMSアイテム)をまとめて管理するための枠組みです。この記事では、記事作成に特化した記事タイプモデルを作成します。

  1. CMSダッシュボードで、画面左上の[+]ボタンをクリックします。

  2. プルダウンメニューから記事タイプを選択します。

  3. 任意のモデル名を入力し、[作成する]をクリックします。

記事アイテムを追加して、本文を作成する

CMSアイテムは、CMSモデル内で管理する単一のコンテンツデータです。作成した記事タイプモデル内に記事アイテムを追加し、本文などのコンテンツを入力します。

  1. 対象のモデル内に記事アイテムを新規追加します。

    モデル一覧から対象のモデルを選択し、[アイテムを追加]ボタンをクリックします。

    画面右上の[+新規追加]ボタンからもアイテムを追加できます。

  2. 記事アイテムの詳細編集画面を開き、リッチテキストプロパティを編集して本文を作成します。

CMSプロパティを追加する

アイテムに追加する関連情報がCMSプロパティです。記事タイトル、カバー画像など、サイトに表示したい情報をプロパティとして追加します。

アイテム内で管理する各種関連情報がCMSプロパティです。記事タイトル、記事本文、カバー画像などの必要な情報をCMSプロパティとして登録します。

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

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

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


手順3.動的ページを作成してプロパティを紐付ける

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

Point: 動的ページとは

動的ページは、紐付けたCMSモデルのアイテムを切り替えて表示できるページタイプです。1つのページデザインで、複数の記事アイテムをまとめて管理できます。

動的ページを追加する

  1. デザインエディタで動的ページを追加します。紐付けるCMSモデルとして、手順2で作成した記事タイプモデルを指定します。

  2. 追加された動的ページには、紐つけたCMSモデル(記事モデル)のプロパティのうち、「Title / タイトル」のみが初期状態で配置されます。

ボックスを追加して、プロパティを紐付ける

  1. 本文やカバー画像など、表示するプロパティを紐付けるボックスを追加します。

  2. 右パネルの [データ] タブで、各ボックスにプロパティを紐付けます。パネルが閉じている場合は、右パネルを開いてください。

    紐付け操作の手順は、デザインエディタで、ボックス要素とCMSプロパティを紐付けるも参照してください。

    以下の例では、画像ボックスにプロパティ「カバー画像」、リッチテキストボックスにプロパティ「本文」が紐付いています。

ボックスのデザインを整える

ボックスのサイズやマージン・パディングなどのデザインを整えます。

Tips:動的ページで表示するCMSアイテムを切り替える

ページパネル下部のセレクターで、動的ページに表示する記事アイテムを切り替えられます。複数のアイテムでプロパティの表示が意図どおりに切り替わるか確認してください。


4.CMSアイテムの公開ステータスを変更する

Studio CMSでは、CMSアイテム自体の公開管理機能(公開ステータス)を備えています。ステータスが「公開中」のアイテムのみが、公開サイト上に表示されます。

公開日時を未来の日付に設定して公開予約もできます。詳しくは、CMSプロパティ:ステータスと公開日時を参照してください。

注意:ステータスが「公開中」でないCMSアイテムは、サイト自体が公開されていてもサイト上に表示されません。


5.サイトを公開する

CMSコンテンツを含め、サイト全体の調整が完了したらサイトを公開します。

注意:ページごとに公開・更新はできません。サイト全体の設定が完了してから公開操作を行ってください。

Studioでは、独自ドメインまたはStudioサブドメインでサイトを公開できます。詳しくは以下を参照してください。


Studio CMSについて動画で学ぶ

以下の動画でも、Studio CMSを使用してお知らせ記事を公開するまでの手順を詳しく解説しています。


CMS blog 記事 ブログ 新規作成 動的ページ

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