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

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

Studio CMSで作成した記事コンテンツに、記事を執筆したライター名やプロフィール画像などの情報を表示する方法を説明します。Studio CMSのモデルとアイテムの仕組みと、デザインエディタでの表示設定の流れを紹介します。

今日アップデートされました

Point: Studio CMSとは

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

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

事前準備

ライター情報を設定する前に、Studio CMSの記事コンテンツを作成します。

  1. CMSダッシュボードで記事アイテムを作成して公開します。

  2. デザインエディタで、動的ページを使用して、1で作成したCMSモデルを紐付けた記事ページを作成します。成したCMSモデルを紐付けた記事詳細ページを作成します。

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


設定手順

1. ユーザータイプのモデルを追加する

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

  1. CMSダッシュボードで、ユーザータイプ新しいモデルを作成します。

  2. モデル名を「ライター」や「著者」など、ライター管理と分かる名称に設定します。

スクリーンショット:ユーザータイプモデルを追加する様子。

2. ユーザーアイテムを追加する

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

  1. 作成したモデル内に、新規アイテムを追加します。

  2. ライターのプロフィール画像を設定します(ユーザータイプにはアバター用画像プロパティが含まれます)。

  3. 名前、プロフィールテキスト、SNSアカウント情報など、ライターの情報として表示したい内容のCMSプロパティを追加します。

  4. 必要なライターの人数分だけユーザーアイテムを作成します。

スクリーンショット:CMSアイテムにプロパティを追加する様子。

3. 記事アイテムのプロパティとして、作成したユーザータイプのモデルを参照する

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

  1. CMSダッシュボードのモデル一覧で、ライター情報を掲載したい記事アイテムのモデルを選択します。

  2. アイテム一覧画面で、新しいプロパティを追加します。

  3. プロパティタイプは、プロパティリスト下部の[モデルを参照]を選び、参照先として手順1で作成したユーザータイプモデルを指定します。

  4. 参照方法として、シングルセレクトまたはマルチセレクトを選択します(ライターが1人の場合はシングルセレクト、複数人で執筆する場合はマルチセレクトが適しています)。

スクリーンショット:記事タイプモデルにライターモデルを参照する様子。

4. 各記事アイテムのプロパティ情報を設定する

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

スクリーンショット:記事タイプモデルに参照アイテムを追加する様子。

5. 記事詳細ページに、ライター情報を表示するボックスを追加する

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

  1. ページパネルを開き、該当の動的ページを選択します。

  2. ライター情報を追加するためのボックス要素を表示したい位置に追加します。

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

6. 追加したボックス要素に、設定したCMSプロパティを紐づける

  1. 追加したボックス要素を選択します。

  2. 右パネルで[データ]タブを選択します。

    パネルが閉じている場合には、右パネルを開いてください。

  3. CMSのプロパティリストから、参照プロパティを探します。

  4. プロパティ名横の矢印をクリックし、詳細を開きます。

    スクリーンショット:データタブでプロパティリストを表示している。「ライター」という参照プロパティ項目の横に矢印が表示され、詳細プロパティを開くことができる。
  5. 紐付けたいプロパティ(ライター名、プロフィールテキスト、アバター画像など)と、テキストボックスや画像ボックスなどのボックス要素を、コネクターを使用して紐づけます。

    スクリーンショット:「Avater」というプロパティと画像ボックスをコネクターを使用して紐づけているようす

7. ボックス要素のデザインを調整する

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

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

8. 設定を確認する

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

  1. ライブプレビューを開き、ライター情報が正しく表示されているか確認します。​

  2. 公開サイトでの表示を確認します。

    • 該当のすべてのCMSアイテムのステータスが公開中であることを確認します。

    • 問題がなければ公開パネルからサイトを公開します。

    • すでに公開中のサイトの場合には、サイトを更新を行い、公開サイトへ反映します。

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