メインコンテンツにスキップ
すべてのコレクションよくある質問エディタ(デザイン)
モーダル内でスクロールを設定する方法
モーダル内でスクロールを設定する方法

Studioで作成するモーダル内でのスクロール設定方法を解説しています。サイト閲覧者がページを移動せずに必要な情報を効率的に閲覧できます。

Saika avatar
対応者:Saika
2か月以上前に更新

モーダル内でのスクロール設定

モーダル内でスクロールを有効にすることで、多くの情報を1つのモーダルにまとめて表示できます。例えば、お問い合わせフォームや利用規約などの表示で利用すると閲覧者はページを移動することなく、その情報が閲覧できます。

設定手順

1. モーダルを追加

エディタ右上のページ追加ボタンから、モーダルを新規作成します。

2. コンテンツの追加

モーダル内に画像やテキストなどのコンテンツを追加します。

3. 方向・配置の調整

コンテンツが内包されるボックスを選択し、画像のように整列を「上揃え」、方向を「下」に設定します。

スクリーンショット:モーダル内要素の整列と方向を調整する様子。

4. はみ出しの設定

同じボックスを選択したまま、はみ出しを「スクロール」に設定します。

※スクロールバーは確認用としてエディタでのみ表示されます

5. リンクの設定

モーダルを開くリンクと閉じるボタンの設定を行います。詳しい手順は、モーダルへのリンク設定方法をご覧ください。

6. 動作確認

ライブプレビューで、スクロールの動作を確認します。

スクロールが上手くいかない場合

モーダルの縦幅が「auto」や「flex」になっていると、スクロールが動作しません。縦幅をご確認いただき、「px」や「%」などの単位に変更してください。

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