Studio CMSで作成した記事ページにカテゴリー・タグを表示する

Point: Studio CMSとは

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

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

事前準備

カテゴリー・タグを表示する、Studio CMSの記事コンテンツを作成します。

CMSダッシュボードで記事アイテムを作成して公開します。
- 記事タイプのCMSモデルを作成し、記事アイテム（CMSアイテム）を追加します。
- CMSアイテムの詳細編集画面で記事アイテムの本文を入力し、カテゴリなどの関連情報をプロパティとして追加します。
- 編集が完了した記事アイテムの公開ステータスを[公開中]に設定します。
デザインエディタで、動的ページを使用して、1で作成したCMSモデルを紐付けた記事ページを作成します。成したCMSモデルを紐付けた記事詳細ページを作成します。

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

Studio CMSの記事コンテンツにカテゴリーやタグを追加するを参考に、記事アイテムにカテゴリー・タグを追加します。

事前準備として作成済みの記事コンテンツを表示する動的ページ上に、カテゴリー・タグを表示するボックスを配置します。

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

追加したテキストボックスを選択します。
右パネルで[テキスト]タブを選択します。
パネルが閉じている場合には、右パネルを開いてください。
テキストフィールドをクリックして、プロパティリストを表示します。
[CMSプロパティから選択]該当のプロパティを選びます。
マルチセレクトのプロパティの場合には、プロパティ接続時に[リスト化して接続]を有効にし、複数項目がカンマ区切りなどで表示されるように設定します。

右パネルの各種タブを使用して、デザインを整えます。

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

カテゴリー・タグで動的にフィルタされたCMS記事コンテンツの一覧ページのリンクを設定すると、CMSコンテンツ全体の回遊性を高めることができます。

注意：カテゴリー・タグのプロパティを参照プロパティとして追加した場合にのみ、リンク設定が可能です。

表示と公開状態を確認します。

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