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

動的ページ

動的ページは、Studio CMSのコンテンツを動的に表示するために使用するページタイプです。この記事では、動的ページの追加方法、CMSデータの紐付け、デザインやページ設定のポイントについて説明します。

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

Point: Studio CMSとは

Studio CMSは、Studio上で利用できるCMS(Content Management System)機能です。仕組みや概要については、以下のヘルプ記事をご覧ください。


動的ページを追加する

  1. スクリーン右上の[+]ボタンをクリックします。

    ページパネルの[+]ボタンからも追加が可能です。

  2. ページタイプの選択で、動的ページを選びクリックします。

  3. 動的ページに紐づけるCMSモデルを選択します。

スクリーンで表示するCMSアイテムを切り替える

動的ページでは、紐付けたCMSモデルの先頭のCMSアイテムをデフォルトでスクリーン上で表示されます。

スクリーンで表示するCMSアイテムは、ページパネル下部のメニューで切り替えが可能です。

動的ページ内のボックスにCMSプロパティを紐付ける

動的ページに配置したボックスには、ページに紐付けたCMSモデルで設定したCMSプロパティを紐付けて、コンテンツを動的に表示できます。

プロパティの紐付けは、右パネル上の[データ]タブまたは[設定]タブで行います。

CMSプロパティごとの挙動や仕様は、CMSプロパティをご覧ください。

データタブでプロパティとボックスを紐付ける

  1. 動的ページを開きます。

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

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

  3. データタブで登録済みのCMSプロパティが表示されます。

    各プロパティ名の先頭にある「青い丸」をクリック&ドラッグすると、コネクタ(青い線)が表示されます。

  4. コネクタをボックスに繋げると、そのプロパティとボックスが紐付きます。

    プロパティの各行にマウスを乗せると、そのプロパティがどこに紐付いているかコネクタ(青い線)で確認ができます。

    コネクタは、ボックス自体またはそのデザイン設定などにCMSデータが紐付けられている場合にのみ、表示されます。

  5. 参照プロパティはデフォルトで項目が非表示です。「▼」アイコンをクリックして中身を開くと操作できるようになります。

ボックスタブでプロパティとボックスを紐付ける

テキスト、画像やリンクでは、右パネル上の[ボックス]タブからもプロパティが設定できます。

要素ごとにプロパティを指定すると、各CMSアイテムの内容が自動で反映されます。

CMSモデルを変更する

動的ページに紐付けるCMSモデルを変更する際は、ページ設定タブで操作をします。

  1. ページパネルで対象の動的ページを選択します。

  2. [CMS Model]の入力フィールドで、新しく紐付けたいCMSモデルを選択します。

Tips:CMSモデルを変更してもスクリーン上のデザインには影響しませんが、変更前後でプロパティ構造が異なる場合は、プロパティの紐付けを再設定する必要があります。

動的ページのメタ情報を設定する

動的ページにも、ページタイトル、説明文、カバー画像などのメタ情報を設定できます。

詳しい設定方法やSEOについて詳しくは、次のヘルプ記事を参照してください。

パスとスラッグ(:slug)

動的ページのURLパスは、「パス」と「スラッグ」の2つで構成されます。

「slug(スラッグ)」は、CMSダッシュボードでアイテムごとに設定できる値で、「:slug」部分にCMSアイテムのスラッグが自動で入ります。

スラッグの詳細は、スラッグを参照してください。

動的ページでボックスのデザイン編集をする

動的ページ内で各ボックスのデザイン編集は、通常のページと同様にデザインエディタで行います。

基本のデザイン設定は、全アイテムで共通となります。

ただし、ブール値プロパティ(表示条件、条件付きスタイル)を活用すると、条件に応じて特定アイテムの要素だけ表示・非表示にしたり、デザインを切り替えることができます。

詳しくはそれぞれの記事をご覧ください。


記事 記事ごとに設定 CMS ブログ

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