ライトボックスの効果を有効にして、背景を薄暗くしてオーバーレイで画像を開きます。

ライトボックスとは、画像をクリックしたときに中央にオーバーレイして画像が開き、ページの残りの部分が暗くなるデザイン効果です。上隅の [x] をクリックすると、閉じてページに戻ります。ライトボックスは、じっくり見たい訪問者のために画像を強調表示および拡大できるようにするための最適な方法です。

動画を見る

始める前に

• モバイル端末のライトボックス画像では、ピンチしてズームする機能はサポートされていません。
• サイトがSquarespaceバージョン7.0の場合、ギャラリー ページのオプションはテンプレートによって異なります。

ライトボックスの背景色を変更する

バージョン7.1のギャラリー セクションでは、セクション テーマ エディターでライトボックスのスタイルを任意の色に設定できます。

それ以外のほとんどの場合は、ブロック設定またはサイト スタイルでライトボックスのオーバーレイを [ダーク] オーバーレイまたは [ライト] オーバーレイから選択できます 。詳細については、画像ブロック、ギャラリー ブロック、ギャラリー ページのセクションを参照してください。

ギャラリー セクション (バージョン7.1)

バージョン7.1のグリッド レイアウトのギャラリー セクションには、セクション スタイルのライトボックス オプションがあります。ライトボックスを有効にするには、次の手順に従ってください。

1. ページの [編集] をクリックし、ギャラリー セクションにカーソルを合わせて鉛筆アイコンをクリックします。
2. [ギャラリー タイプ] が [グリッド: シンプル]、[グリッド: ストリップ]、または [グリッド: 石積み] に設定されていることを確認します。スライドショー レイアウトはライトボックス機能をサポートしていません。
3. [ライトボックス] トグルをオンに切り替えます。
4. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了]、[保存] の順にクリックしてエディターを閉じます。

ライトボックスの色のスタイルを設定するには、次の手順に従ってください。

1. ページの編集中に、サイト スタイルを開いて [色] をクリックします。
2. ギャラリー セクションに合ったテーマにカーソルを合わせ、鉛筆アイコンをクリックします。
3. [ギャラリー] セクションで、[ライトボックスの背景] 微調整オプションを使用して、ライトボックスの色を選択します。
4. ライトボックスのナビゲーション コントロールの色を変更するには、ライトボックス アイコンの微調整オプションを使用します。
5. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了]、[保存] の順にクリックしてエディターを閉じます。

以下の点に留意してください。

• キャプション テキストは、ギャラリー セクションのライトボックスには表示されません。
• 画像にクリックスルーURLを追加してからライトボックスをオンにすると、画像をクリックしたときにそのURLに移動します。ライトボックスは開きません。

画像ブロック

画像ブロックは、以下の場合にライトボックスをサポートします。

• インライン レイアウトの使用 (クラシック エディターを使用する7.0サイトおよび7.1セクション)
• 創造エディター セクションの追加

ライトボックスを有効にするには、次の手順に従ってください。

1. 画像ブロックを追加するか、既存の画像ブロックをダブルクリックして画像エディターを開きます。
2. [デザイン] タブをクリックします。
3. ブロックにレイアウト オプションがある場合は、[インライン] に設定されていることを確認してください。その他のレイアウトはライトボックスをサポートしていません。
4. [ライトボックス] トグルをオンに切り替えます。
5. [ライトボックス テーマ] のドロップダウンで、ライトボックスのスタイルに合わせて [ダーク オーバーレイ] と [ライト オーバーレイ] のいずれかを選択します。

以下の点に留意してください。

• ライトボックスの画像にカーソルを合わせると、どのキャプション表示オプションを選択しても、キャプションは常に表示されます。モバイルでは、ドット アイコンをタップすると表示されます。
  
  • 創造エディター セクションに追加された画像ブロックは、画像キャプションをサポートしていません。代わりに、テキスト ブロックを使用して、画像ブロックに隣接させたり、画像ブロックをオーバーレイさせたりしてテキストを追加できます。このテキストはライトボックスには表示されません。
• クリックスルーURLを追加してライトボックスを有効にした場合、画像をクリックするとURLではなくライトボックスが開きます。
• ライトボックスを有効にしたまま画像にリンクを貼るには、画像の説明にテキスト リンクを追加します。画像ブロックの場合は、一部のレイアウトでボタンもサポートしています。

グリッド ギャラリー ブロック

画像をグリッド ギャラリー ブロックに追加した後、[デザイン] タブをクリックし、[ライトボックス] にチェックを入れます。ドロップダウンから [ダーク オーバーレイ] または [ライト オーバーレイ] を選択して、ライトボックスのスライドショーのスタイルを設定します。

以下の点に留意してください。

• キャプションは、ライトボックス画像の上にカーソルを合わせると常に表示されます。モバイルでは、ドット アイコンをタップすると表示されます。
• スライドショー、カルーセル、スタック ギャラリー ブロックはライトボックスをサポートしていません。
• クリックスルーURLを追加してライトボックスを有効にした場合、画像をクリックするとURLではなくライトボックスが開きます。
• 動画をライトボックスで開くには、アイテムの設定で [サムネイルを使用] トグルをオンに切り替えてください。

要約ブロック

ウォールまたはグリッドの要約ブロックをギャラリー ページに接続すると、画像は自動的にライトボックスのスライドショーで開きます。要約ブロックのライトボックスの色は常に灰色です。カーソルを合わせるとキャプションが表示されます。

ライトボックスのスライドショーは、クリックスルーURLに影響します。

• ページを表示しているとき、クリックスルーURLを含む画像は、クリックするとライトボックスのスライドショーを開くのではなく、クリックスルー リンクを開きます。
• ライトボックスのスライドショーが開いているときは、クリックスルーURLは無効になります。

ヒント: ライトボックスをサポートしているバージョン7.0のサイトでは、ギャラリー ページに追加された動画を、要約ブロックのライトボックスで開くことができます。これを有効にするには、ギャラリー ページの動画のアイテムの設定で [動画のサムネイル] トグルをオンに切り替えます。これを有効にしない場合、またはテンプレートがライトボックスをサポートしていない場合、動画はライトボックスで開かずに要約ブロックで再生されます。

ギャラリー ページ (バージョン7.0)

バージョン7.0の一部のテンプレートのギャラリー ページは、ライトボックス機能をサポートしています。標準のギャラリー ページの場合、サイト スタイルでライトボックスの色を [ライト] または [ダーク] に設定できます。動画の説明はライトボックスに表示されません。

これらのテンプレート ファミリーでライトボックス オプションがどのように動作するかについては、以下の表を参照してください。