動的ページとは

動的ページにはCMSモデルを紐づけて、モデル内の画像やテキストなどのデータをページに表示しデザインすることができます。

この記事では動的ページの追加、CMSデータの紐付け、スタイル変更方法などについてご紹介します。

関連記事

エディタ右上のページ追加ボタンをクリックし[動的ページ]を選びます。

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

動的ページでは、選択したモデル内の先頭アイテムをデフォルトで表示しています。

このアイテムは下記画像のように、画面左上にあるCMSアイテムリストから選択し切り替えることができます。

レイヤーパネルまたは、ボックス設定パネルから、CMSデータ（プロパティ）をエディター上のボックスに紐づけることができます。

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

画面左下のレイヤーアイコンをクリックするか、ショートカットキー（Macでは ⌘ + 2、Windowsでは Ctrl + 2）でレイヤーパネルを開くことができます。

データの紐付けは、レイヤーパネル上部にのCMSデータ右横にある「丸い点」をクリック＆ドラッグでボックスに繋げます。

レイヤーパネルを開いた状態でプロパティの各行にマウスを乗せると、そのプロパティがどこに紐付いているかコネクタ（青い線）が表示され確認できます。

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

テキスト、画像やリンクでは、画面右側のボックス設定パネルからもプロパティが設定できます。ボックスを選択し、画面右の「<」アイコンをクリックするか、ショートカットキー（Macでは ⌘ + 5、Windowsでは Ctrl + 5）で開くことができます。

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

選択したモデルはレイヤーパネル上で、いつでも変更可能です。

画面左下のレイヤーアイコンをクリックするか、ショートカットキー（Macでは ⌘ + 2、Windowsでは Ctrl + 2）でレイヤーパネルを開きます。レイヤーパネル上部の「CMS Model」からモデルを選択します。

動的ページのページタイトル、説明文、カバー画像をアイテムごとに設定できます。これらは、SEO対策として重要な項目になります。

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

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

「slug（スラッグ）」は、CMSダッシュボードで、アイテム毎に設定が可能です。「:slug」にCMSアイテムのスラッグが自動で入ります。詳細は、スラッグ をご覧ください。

動的ページ内で各要素のスタイルを設定することができます。

スタイルは、モデル内全アイテムで共通となります。ただし、ブール値プロパティ（表示条件、条件付きスタイル）を活用し、「条件に応じ、特定アイテムの要素のみ表示・非表示、またはスタイルを変化させる」ことができます。

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

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