ページタイプ：モーダル

モーダルは、現在のページを離れずにその上に重ねて表示されるポップアップウィンドウです。閲覧者の注意を特定の情報や行動に効果的に集中させることができます。

ユーザーアクションを促す表示、画像の拡大表示、サイドバー、ハンバーガーメニューなど、さまざまな用途で利用できます。

モーダルを追加する

Tips: モーダルと動的モーダル

Studio CMSのコンテンツをモーダルに表示したい場合には、動的モーダルを使用します。モーダルのページタイプを動的モーダルに変更することはできません。

他のページタイプと同様に、外観やレイアウト、レスポンシブ設定などのデザインが可能です。

操作方法の詳細は、次のヘルプ記事を参照してください。

Tips: モーダルの外側領域の塗りの不透明度などを調整する場合は、ライブプレビューを使い、リアルタイムに確認しながら調整するとスムーズです。

モーダル内でスクロールを有効にすると、限られたスペースでも多くの情報を表示できます。お問い合わせフォームや利用規約など、ページ移動を伴わずに閲覧したいコンテンツの表示に適しています。

設定方法の詳細は、モーダル内でスクロールを設定する方法をご覧ください。

モーダルには、表示時のトランジション（アニメーション）を設定できます。
トランジションは、レイヤー階層の最上部にあるボックス（Backdrop）を選択した状態で設定します。

作成したモーダルは、ボタンや画像などの要素からリンク先として設定すると、クリック時に表示できます。
また、モーダル上の要素には、開いているモーダルを閉じるリンクも設定できます。

モーダルに直接遷移するURLリンクを取得したい場合には、モーダルにパスを設定します。

キャンペーンやイベントの詳細情報を含むモーダルURLをメールやSNSマーケティングなどで共有し利用する際などに便利です。