Point: Studio CMSとは
Studio CMSは、Studio上でコンテンツを構造化して管理・更新できるCMS(Content Management System)機能です。 モデルやアイテム、プロパティを組み合わせて、ブログやニュースなどの更新性が高い記事コンテンツを一元管理します。
Studio CMSの仕組みや基本的な使い方は、以下の記事も参照してください。
Studio CMSの特徴と仕組み
Studio CMSでは、以下のようにビジュアルデザインとコンテンツを分けて、作成や管理を行います。
デザインエディタ上でボックス要素とCMSプロパティを紐付けて、初めてサイト上に正しく表示されます。
| 設定箇所 | 設定内容 |
コンテンツ | ||
ビジュアルデザイン |
この記事では、CMSダッシュボードで作成した記事アイテムを表示するための、CMS記事ページを作成する方法を説明します。
CMS記事アイテムの作成方法は、CMSダッシュボードでCMS記事アイテムを作成するを参照してください。
CMS記事アイテムが作成されていないと、以下の手順を進めることができません。
1. デザインエディタで動的ページを作成する
動的ページを追加します。
動的ページは、デフォルトでタイトルプロパティが紐付いたテキストボックスがスクリーン上部に配置されています。
右パネルで展開する[ページ]タブで、追加した動的ページのページ名やパス、ページのメタ情報などを必要に応じて設定します。
2. 動的ページにリッチテキストボックスを追加して、本文を紐付ける
CMS記事アイテム本文の表示には、リッチテキストボックスを使用します。
リッチテキストボックスを追加します。
本文が表示されない場合は、以下を確認してください。
テキストボックスではなくリッチテキストボックスがが配置されているか
本文プロパティ(bodyやcontentなど)が正しく紐付けられているか
3. その他のボックスやCMSリストを追加する
タイトルや本文以外にも、公開日や著者名、記事のカテゴリー情報など、CMSプロパティとして設定済みの他の情報もボックス要素に紐付けて表示できます。
また、関連記事一覧をレイアウトしたい場合には、CMSリストを使用します。
4. 記事ページの外観やレイアウトを調整する
記事ページ全体のレイアウトやタイポグラフィを整えて、読みやすさを高めます。
スクリーン上のボックスを選択し、右パネルの各タブ(ボックス、テキスト、画像など)でデザインを調整します。
パネルが閉じている場合は、右パネルを開いてください。
デザイン設定の詳細は、ボックスのデザイン設定や各種ボックスカテゴリーのヘルプ記事を参照してください。
5. 設定と表示を確認し、サイトを公開する
CMS記事ページの表示内容やCMSアイテムの状態を確認したうえで、公開サイトに反映します。
CMS記事ページへのリンクを設定する
作成したCMS記事ページへの動線を設定して、サイト内の回遊性を高めます。
Tips: 動的ページが存在しない場合、リンク先のページは表示されません。リンク先が表示されない場合は、動的ページが作成されているか確認してください。



