【STUDIO】CMSの詳細ページをモーダルで表示したいとき

Tue, 16 Jan 2024 00:00:00 +0000

シングルページタイプのコーポレートサイトをSTUDIOで制作し、簡単なお知らせ（ニュース）を組み込むことになりました。お知らせの詳細ページは簡易的なものにしたかったので、詳細ページを作らず、何の飾りもないモーダルで作ることにしました。

以前では、STUDIOのCMS機能で生成される動的な内容をモーダルで表示できなかったみたいですが、この記事を投稿した今日現在はアップデートされて機能が追加されていました。その方法をメモ。

動的モーダルを作成する方法

前提として、あらかじめCMSのデータが作成されていることを前提としています。ここでは**「news」**というCMSモデルを作成した例にしています。

**「ページ」タブで「+」**ボタンを押す

隠れたメニューを表示する

**「動的モーダル」**を選択する

対象のCMS（データベース）を選択

モーダルページが追加されるので、ランダムなパスを「news」など、わかりやすい階層名に変更します。

モーダルページにテキストを配置してデータを紐づける

**「お知らせ」**欄のタイトルにモーダルのリンクを設置

これでCMSに投稿した内容がモーダルに表示されます。