Studio CMSで作成した記事コンテンツにライター情報を表示する

Point: Studio CMSとは

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

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

事前準備

この記事で紹介する手順は、CMS記事コンテンツを作成済みであることを前提としています。以下について対応済みであることを確認してください。

CMSダッシュボードで、記事タイプモデル（CMSモデル）とCMS記事アイテム（CMSアイテム）を作成します。
- 参考：CMSダッシュボードでCMS記事アイテムを作成する
デザインエディタで、動的ページを使用して、1で作成したCMS記事モデルを紐付けた記事ページを作成します。
- 参考：Studio CMS記事アイテムの本文を表示するCMS記事ページを作成する

CMS記事作成から公開までの全体像は、次の記事も合わせて参照してください。

ライター情報は、アバター画像プロパティを含むユーザータイプのCMSモデルを使用して管理すると便利です。

ユーザータイプモデルに、ライターごとのプロフィール情報を登録します。

参照プロパティを使用して、事前準備で作成した記事アイテムとライター情報のユーザータイプモデルを関連付けます。

CMSダッシュボードのモデル一覧で、ライター情報を掲載したい記事アイテムのモデルを選択します。
アイテム一覧画面で、新しいプロパティを追加します。
プロパティタイプは、プロパティリスト下部の[モデルを参照]を選び、参照先として手順1で作成したユーザータイプモデルを指定します。
参照方法として、シングルセレクトまたはマルチセレクトを選択します（ライターが1人の場合はシングルセレクト、複数人で執筆する場合はマルチセレクトが適しています）。

作成した参照プロパティで、各記事のライターを指定します。

事前準備で作成済みの記事アイテムを表示する動的ページ（記事ページ）上に、ライター名やプロフィール画像を表示するボックスを配置します。

デザインエディターを開きます。
ページパネルを開き、該当の動的ページを選択します。
ライター情報を追加するためのボックス要素を表示したい位置に追加します。
- ライター名、プロフィール情報：テキストボックスを追加
- アバター画像：画像ボックスを追加

意図した位置に追加できなかった場合は、レイヤーパネルなどを活用して対象ボックスを移動し、表示したいレイヤー構造に整えます。

デザインエディタで、ボックス要素とCMSプロパティを紐付けるを参考に、追加したボックス要素と設定したCMSプロパティを紐づけます。

右パネルの各種タブを使用して、デザインを整えます。パネルが閉じている場合には、右パネルを開いてください。

ボックスのデザイン設定カテゴリーや各種ボックスカテゴリー内のヘルプ記事も参考にしてください。

ライター情報の表示と公開状態を確認します。

ライブプレビューを開き、ライター情報が正しく表示されているか確認します。
公開サイトでの表示を確認します。
- 該当のすべてのCMSアイテムのステータスが公開中であることを確認します。
- 問題がなければ公開パネルからサイトを公開します。
- すでに公開中のサイトの場合には、サイトを更新を行い、公開サイトへ反映します。