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記事アイテム本文の表示には、リッチテキストボックスを使用します。

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

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

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

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

記事ページ全体のレイアウトやタイポグラフィを整えて、読みやすさを高めます。

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

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

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

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

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