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

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

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記事アイテムが作成されていないと、以下の手順を進めることができません。


1. デザインエディタで動的ページを作成する

  1. 動的ページは、デフォルトでタイトルプロパティが紐付いたテキストボックスがスクリーン上部に配置されています。

  2. 右パネルで展開する[ページ]タブで、追加した動的ページのページ名やパス、ページのメタ情報などを必要に応じて設定します。​

2. 動的ページにリッチテキストボックスを追加して、本文を紐付ける

CMS記事アイテム本文の表示には、リッチテキストボックスを使用します。

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

  • テキストボックスではなくリッチテキストボックスがが配置されているか

  • 本文プロパティ(bodyやcontentなど)が正しく紐付けられているか

3. その他のボックスやCMSリストを追加する

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

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

4. 記事ページの外観やレイアウトを調整する

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

  1. スクリーン上のボックスを選択し、右パネルの各タブ(ボックス、テキスト、画像など)でデザインを調整します。​

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

  2. デザイン設定の詳細は、ボックスのデザイン設定各種ボックスカテゴリーのヘルプ記事を参照してください。

5. 設定と表示を確認し、サイトを公開する

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

  1. ページパネル下部のセレクターで記事ページ内の表示アイテムを切り替えて、プロパティを紐付けたボックスの表示が適切に切り替わることを確認します。

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

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

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

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

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


CMS記事ページへのリンクを設定する

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

  1. ホームページなどにCMSリストを配置し、記事モデルを紐付けた記事アイテム一覧を作成します。​

  2. 記事タイトルやサムネイル画像、ボタンなど、クリックさせたいボックスにリンクを設定します。

    リスト内の1アイテムにリンクを設定すると他のアイテムにも自動でリンク設定が反映されます。

Tips: 動的ページが存在しない場合、リンク先のページは表示されません。リンク先が表示されない場合は、動的ページが作成されているか確認してください。

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