ライトボックス - Webflow ヘルプ

Last updated on 10/23/2025@mrbirddev

ライトボックス要素を使って、画像や動画を全画面モーダルウィンドウで表示します。

ライトボックス要素は、画像（キャプション付きまたはなし）や動画を全画面スライドショーモーダルウィンドウで表示します。ライトボックスはブレークポイントに応じてレスポンシブで、デスクトップ、タブレット、モバイル画面でメディアを表示するのに便利です。

ライトボックスの作成方法

ライトボックスはリンクブロックにネストされたクリック可能なサムネイルです。サイト訪問者がライブサイトでリンクの境界内をクリックすると、ライトボックスが開き、関連付けられたメディアを表示します。追加パネル > 高度からライトボックスを追加できます。

ライトボックスには他の画像要素と同様に動作する画像要素が含まれています。サイズを変更したり、ダブルクリックしてプレースホルダーサムネイル画像を置き換えたり、代替テキストを追加したりできます。画像要素について詳しく学ぶ。

ライトボックスのサムネイルと大きなライトボックスモーダルウィンドウに同じ画像を使用できます。Webflowはすべてのインライン画像に対して自動的にレスポンシブなバリアントを作成します。レスポンシブ画像について詳しく学ぶ。

プレースホルダー画像要素を置き換え、他のコンテンツ（例：見出しや他の非リンク要素）をライトボックスリンク内にドラッグ＆ドロップします。

また、divブロックを使用して背景画像を適用し、同じサイズの画像サムネイルを作成することもできます。

ライトボックスリンクとそのコンテンツの両方をスタイル設定できます。例えば、ライトボックスリンクにテキスト要素をネストすると、ライトボックスリンク要素のタイポグラフィをスタイル設定できます。

ライトボックスリンクをクリックして開くモーダルウィンドウの背景オーバーレイはカスタマイズできませんが、画像や動画を追加し、必要に応じて画像キャプションを追加できます。

ライトボックスモーダルウィンドウに画像とキャプションを追加するには：

ライトボックスリンクには好きなだけ画像を追加できます。これらの画像はライトボックスモーダルウィンドウ内でスライドショーとして表示されます。

現在、ライトボックス要素はライトボックス内の画像に対するaltテキストをサポートしていません。

ライトボックスモーダルウィンドウに動画を追加するには：

メディアコレクションフィールド（画像フィールド、マルチ画像フィールド、または動画フィールド）からサムネイル画像やライトボックスメディアを引き出すことで、動的ライトボックスを作成できます。

動的コレクションフィールドをライトボックスサムネイルに接続するには：

その後、ライトボックスをコレクションフィールドに接続すると、動的なコレクション画像がライトボックスで利用可能になります。動的なコレクションフィールドをライトボックスメディアに接続するには：

マルチイメージフィールドにライトボックスを接続するには：

ライトボックスをコレクションリストやコレクションページに追加した場合、マルチイメージフィールドに接続することもできます。

複数のライトボックスをリンクしてスライドショーギャラリーを作成できます。サイト訪問者がリンクされたライトボックスをクリックすると、リンクされたグループに関連するすべてのメディアが開きます。

同じグループ名を使用するライトボックスはグループでリンクされます。

コレクションリスト内のライトボックスの場合、コレクションアイテム内で1つのライトボックスを作成してリンクすると、コレクションリスト内のすべてのライトボックスが自動的にリンクされます。

同じページに複数のライトボックスがある場合、それぞれのライトボックスグループに異なるグループ名を割り当てることで区別できます。

Last updated on 10/23/2025@mrbirddev