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

ページタイプ:動的ページ

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

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

Point: Studio CMSとは

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

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


動的ページを追加する

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

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

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

    デフォルトでは、[ページ]・[モーダル]・[リダイレクト]のみが選択肢として表示されているため、「>」をクリックし、[動的ページ]を選択します。

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


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

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

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


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

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

詳細な紐付け手順は、デザインエディタで、ボックス要素とCMSプロパティを紐付けるを参照してください。

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


CMSモデルを変更する

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

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

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

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


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

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

静的ページと同様に、右パネル上の[ページ][サイト]タブで設定をします。

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


パスとスラッグ(:slug)

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

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

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


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

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

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

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

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


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

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