Studio CMSの記事アイテムを表示する、CMS記事ページを作成する

Point: Studio CMSとは

Studio CMSは、Studio上でコンテンツを構造化して管理・更新できるCMS（Content Management System）機能です。モデルやアイテム、プロパティを組み合わせて、ブログやニュースなどの更新性が高い記事コンテンツを一元管理します。

Studio CMSの仕組みや基本的な使い方は、以下の記事も参照してください。

Studio CMSの特徴と仕組み

Studio CMSでは、以下のようにビジュアルデザインとコンテンツを分けて、作成や管理を行います。

デザインエディタ上でボックス要素とCMSプロパティを紐付けて、初めてサイト上に正しく表示されます。

	設定箇所	設定内容
コンテンツ	CMSダッシュボード	CMSモデル・CMSアイテムの作成、管理 CMSプロパティの設定 CMSコレクションの作成
ビジュアルデザイン	デザインエディタ	動的ページ、動的モーダル、動的リストの作成プロパティとボックス要素の紐付け

この記事では、CMSダッシュボードで作成した記事アイテムを表示するための、CMS記事ページを作成する方法を説明します。

CMS記事アイテムが未作成の場合には、以下のヘルプ記事を参照してください。

CMS記事アイテムが作成されていないと、この記事内の手順を進めることはできません。

CMS記事アイテムの本文であるbodyプロパティは、リッチテキストボックスに紐付けて表示します。テキストボックスを使用した場合、改行などがうまく反映されません。

本文が表示されない場合は、以下を確認してください。

タイトルやbody（本文）以外のCMSプロパティとして設定済みの他の情報（公開日・著者名・記事のカテゴリー情報など）をボックス要素に紐付けて表示します。

参考：
- Studio CMSで作成した記事ページにカテゴリー・タグを表示する
- Studio CMSで作成した記事コンテンツにライター情報を表示する

また、関連記事一覧をレイアウトしたい場合には、CMSリストを使用します。

記事ページ全体のレイアウトやタイポグラフィを整えます。

スクリーン上のボックスを選択し、右パネルの各タブ（ボックス、テキスト、画像など）でデザインを調整します。
パネルが閉じている場合は、右パネルを開いてください。
デザイン設定の詳細は、ボックスのデザイン設定や各種ボックスカテゴリーのヘルプ記事を参照してください。

CMS記事ページの表示内容やCMSアイテムの状態を確認したうえで、公開サイトに反映します。

ページパネル下部のセレクターで記事ページ内の表示アイテムを切り替えて、プロパティを紐付けたボックスの表示が適切に切り替わることを確認します。
ライブプレビューを開き、意図した通りに表示されているか確認します。
公開サイトでの表示を確認します。
- 該当のすべてのCMSアイテムのステータスが公開中であることを確認します。
- 問題がなければ公開パネルからサイトを公開します。
- すでに公開中のサイトの場合には、サイトを更新を行い、公開サイトへ反映します。

作成したCMS記事ページへのリンクを設定して、サイト内の回遊性を高めます。

設定方法などの詳細は、CMS記事ページへのリンクを設定するを参照してください。