Wix プロギャラリー：モバイルサイトのレイアウトを選択する（カスタム vs プリセット）

モバイルサイトのプロギャラリーレイアウトはレスポンシブです。つまり、さまざまな画面サイズやデバイスに合わせて自動的に調整されます。モバイル / タブレットに最適なプロギャラリーのレイアウトを選択することができます。

組み込み機能を備えたプリセットレイアウト、または自分でレイアウトをカスタマイズしたい場合はカスタムレイアウトを選択します。どのレイアウトオプションを選択しても、ギャラリーのデザインはいつでもカスタマイズできます。

カスタムレイアウト

これらのギャラリーレイアウトを使用すると、プロギャラリーを最初からデザインおよびカスタマイズできます。幅広いカスタム可能なレイアウトから選択して、モバイル端末でメディアを最適に表示することができます。

Wix エディタ

Wix Studio エディタ

モバイルエディタにアクセスします。
ページ上のプロギャラリーをクリックします。
「設定」をクリックします。
ギャラリーのレイアウトを選択します。
「レイアウトを編集」をクリックして、希望通りのレイアウトにします。（下記よりカスタマイズ可能なレイアウト機能をご覧ください。

「カスタム」タブがハイライトされたプロギャラリーレイアウトパネルのスクリーンショット。

注意：

拡大表示に矢印ボタンは含まれません。代わりに、訪問者は画面をスワイプして次のギャラリーアイテムを表示します。

プリセットレイアウト

プリセットテンプレートには、さまざまなレイアウト機能が含まれています。これらの既製のギャラリーレイアウトを使用すると、サイトで画像を紹介するプロセスをスピードアップすることができます。レイアウト自体はカスタマイズすることはできませんが、ギャラリーのデザインをパーソナライズすることは可能です。

Wix エディタ

Wix Studio エディタ

モバイルエディタにアクセスします。
ページ上のプロギャラリーをクリックします。
「設定」をクリックします。
「プリセット」タブをクリックします。
ギャラリーのレイアウトを選択します。

「プリセット」タブがハイライトされたプロギャラリーレイアウトパネルのスクリーンショット。

カスタマイズ可能なレイアウト機能

各カスタマイズ可能なレイアウトには、スクロールの方向、ギャラリーの方向、画像の向きなど、カスタム可能なさまざまな設定があります。

レイアウトの詳細は以下のオプションをクリックしてください：

コラージュ

コラージュレイアウトは、ギャラリー内にランダムに配置された異なる方向（縦方向と横方向）の画像を表示する場合に使用します。

まず、「スクロールの方向」を「縦」または「横」から選択します。次に、利用可能な設定を調整します。

縦スクロール：

ギャラリーの向き：写真を縦または横に表示するかどうかを選択します。
サムネイルのサイズ：ギャラリー内の画像の大きさを選択します。
間隔：画像間の間隔を設定します。
表示密度：ギャラリーに一度に表示する画像の数を選択します。
「もっと見る」ボタン：トグルを有効にして、より多くの画像を読み込むボタンを表示します。
- 読み込む画像の数：すべての画像を表示するか、さらにセクションを表示するかを選択します。注意：「最後のセクション」を選択すると、元のギャラリーと同じサイズの別のセクションが追加されます。

横スクロール：

ギャラリーの向き：写真を縦または横に表示するかどうかを選択します。
自動でスライド：トグルを有効にして、アイテムを連続するスライドショーとして表示するようにします：
- インターバル：指定した時間が経過すると、ギャラリーは次のアイテムにスライドします。「スライド間の時間」スライダーをドラッグして、アイテム間の秒数を変更します。注意：トランジションエフェクトを変更する場合は、「デザイン」設定の「スライドアニメーション」タブに移動してください。
- 連続：ギャラリーは自動的にスライドします。「スライドショーの速度」スライダーをドラッグして、ギャラリーがスライドする速度を調整します。
- ホバーで一時停止：トグルをクリックして、訪問者がギャラリーアイテムをホバーすることでスライドショーを一時停止させるかどうかを選択します。
サムネイルのサイズ：ギャラリー内の画像の大きさを選択します。
間隔：画像間の間隔を設定します。
表示密度：ギャラリーに一度に表示する画像の数を選択します。

メーソンリー

グリッド

グリッド内に画像を表示する場合は、グリッドレイアウトを使用します。

まず、スクロールの方向を「横」または「縦」から選択します。次に、利用可能な設定を調整します。

縦スクロール：

サムネイルサイズ：サムネイル画像の外観を選択します：
- クロップ：画像が選択した比率にクロップされます。
  注意：「枠線の太さ・色」と「角の丸み」のデザインオプションは、このオプションを選択した場合にのみ利用できます。
- フィット：画像がサムネイルのサイズに合わせて調整されます。
画面に合わせて調整：訪問者の画面サイズに合わせて、ギャラリーが画像数を自動的に最適化できるようにします。
- サムネイルのサイズ：ギャラリー内の画像の大きさを選択します。
行ごとにアイテムを設定：各行に表示する画像の総数を手動で設定します。
- 行ごとの画像数：各行に表示する画像の数を選択します。
間隔：画像間の間隔を設定します。
「もっと見る」ボタン：トグルを有効にして、より多くの画像を読み込むボタンを表示します。
- 読み込む画像の数：すべての画像を表示するか、さらにセクションを表示するかを選択します。注意：「最後のセクション」を選択すると、元のギャラリーと同じサイズの別のセクションが追加されます。

横スクロール：

ギャラリーの比率：ギャラリーの比率を手動または固定で選択します。
- 手動：ギャラリーをドラッグして、カスタムの高さと幅に設定し、ギャラリー内に収まるようにメディアが自動的にサイズ変更されます。
- 固定：ドラッグしてサイズを変更する際に、一貫性を維持するために、ギャラリーに適用する固定の比率を選択します。
サムネイルサイズ：サムネイル画像の外観を選択します：
- クロップ：画像が選択した比率にクロップされます。
  注意：「枠線の太さ・色」と「角の丸み」のデザインオプションは、このオプションを選択した場合にのみ利用できます。
- フィット：画像がサムネイルのサイズに合わせて調整されます。
自動でスライド：トグルを有効にして、アイテムを連続するスライドショーとして表示するようにします：
- インターバル：指定した時間が経過すると、ギャラリーは次のアイテムにスライドします。「スライド間の時間」スライダーをドラッグして、アイテム間の秒数を変更します。注意：トランジションエフェクトを変更する場合は、「デザイン」設定の「スクロールアニメーション」タブに移動してください。
- 連続：ギャラリーは自動的にスライドします。「スライドショーの速度」スライダーをドラッグして、ギャラリーがスライドする速度を調整します。
- ホバーで一時停止：トグルをクリックして、訪問者がギャラリーアイテムをホバーすることでスライドショーを一時停止させるかどうかを選択します。
列ごとの画像数：列ごとに表示される画像の数を変更します。
間隔：画像間の間隔を設定します。

サムネイル

選択した画像の横に複数のサムネイルを表示する場合は、サムネイルレイアウトを使用します。

ギャラリーの比率：ギャラリーの比率を手動または固定で選択します。
- 手動：ギャラリーをドラッグして、カスタムの高さと幅に設定し、ギャラリー内に収まるようにメディアが自動的にサイズ変更されます。
- 固定：ドラッグしてサイズを変更する際に、一貫性を維持するために、ギャラリーに適用する固定の比率を選択します。
サムネイルサイズ：サムネイル画像の外観を選択します：
- クロップ：画像が選択した比率にクロップされます。
  注意：「枠線の太さ・色」と「角の丸み」のデザインオプションは、このオプションを選択した場合にのみ利用できます。
- フィット：画像がサムネイルのサイズに合わせて調整されます。
サムネイルの位置：画面上でサムネイルを表示する位置を選択します。（現在の画像の下、左、上、右）
サムネイルのサイズ：スライダーをドラッグして、ギャラリー内の画像の大きさを選択します。
注意：画像の数が少なく、メイン画像の下に空きスペースがある場合は、サムネイルのサイズを大きくする必要があります。
自動でスライド：トグルを有効にして、アイテムを連続するスライドショーとして表示するようにします：
- インターバル：指定した時間が経過すると、ギャラリーは次のアイテムにスライドします。「スライド間の時間」スライダーをドラッグして、アイテム間の秒数を変更します。注意：トランジションエフェクトを変更する場合は、「デザイン」設定の「スライドアニメーション」タブに移動してください。
- 連続：ギャラリーは自動的にスライドします。「スライドショーの速度」スライダーをドラッグして、ギャラリーがスライドする速度を調整します。
- ホバーで一時停止：トグルをクリックして、訪問者がギャラリーアイテムをホバーすることでスライドショーを一時停止させるかどうかを選択します。
サムネイルの間隔：スライダーをドラッグして、画像間の間隔を選択します。

注意：現在、サムネイルの配置を調整することはできません。この機能をご希望の場合は、機能リクエストに投票することができます。

スライダー

横スクロールで複数の画像を表示する場合は、スライダーレイアウトを使用します。

注意：このレイアウトで一度に表示される画像の数は、ギャラリーのサイズによって異なります。画像が切れて表示される場合は、ギャラリーのサイズを変更する必要があります。別の解決策として、レイアウト設定で「クロップ」と「レスポンシブ」を選択することができます。

ギャラリーの比率：ギャラリーの比率を手動または固定で選択します。
- 手動：ギャラリーをドラッグして、カスタムの高さと幅に設定し、ギャラリー内に収まるようにメディアが自動的にサイズ変更されます。
- 固定：ドラッグしてサイズを変更する際に、一貫性を維持するために、ギャラリーに適用する固定の比率を選択します。
サムネイルサイズ：サムネイル画像の外観を選択します：
- クロップ：画像が選択した比率にクロップされます。
  注意：「枠線の太さ・色」と「角の丸み」のデザインオプションは、このオプションを選択した場合にのみ利用できます。
- フィット：画像がサムネイルのサイズに合わせて調整されます。
画像のアスペクト比：画面サイズに応じて画像の比率を変更するかどうかを決定します：
- レスポンシブ：画像のサイズは、閲覧者のデバイスに応じて自動的に調整されます。
- 固定：利用可能な画像の比率オプションから選択します。（例：4:3、1:1）画像はすべてのデバイスでこの比率で表示されます。
自動でスライド：トグルを有効にして、アイテムを連続するスライドショーとして表示するようにします：
- インターバル：指定した時間が経過すると、ギャラリーは次のアイテムにスライドします。「スライド間の時間」スライダーをドラッグして、アイテム間の秒数を変更します。注意：トランジションエフェクトを変更する場合は、「デザイン」設定の「スクロールアニメーション」タブに移動してください。
- 連続：ギャラリーは自動的にスライドします。「スライドショーの速度」スライダーをドラッグして、ギャラリーがスライドする速度を調整します。
- ホバーで一時停止：トグルをクリックして、訪問者がギャラリーアイテムをホバーすることでスライドショーを一時停止させるかどうかを選択します。
表示アイテム数：画像の比率として「レスポンシブ」を選択した場合、一度に表示される画像の数を調整することができます。
間隔：画像間の間隔を設定します。

スライドショー

横スクロールで一度に1つの画像を表示する場合は、スライドショーレイアウトを使用します。

ギャラリーの比率：ギャラリーの比率を手動または固定で選択します。
- 手動：ギャラリーをドラッグして、カスタムの高さと幅に設定し、ギャラリー内に収まるようにメディアが自動的にサイズ変更されます。
- 固定：ドラッグしてサイズを変更する際に、一貫性を維持するために、ギャラリーに適用する固定の比率を選択します。
サムネイルサイズ：サムネイル画像の外観を選択します：
- クロップ：画像が選択した比率にクロップされます。
  注意：「枠線の太さ・色」と「角の丸み」のデザインオプションは、このオプションを選択した場合にのみ利用できます。
- フィット：画像がサムネイルのサイズに合わせて調整されます。
自動でスライド：トグルを有効にして、アイテムを連続するスライドショーとして表示するようにします：
- インターバル：指定した時間が経過すると、ギャラリーは次のアイテムにスライドします。「スライド間の時間」スライダーをドラッグして、アイテム間の秒数を変更します。注意：トランジションエフェクトを変更する場合は、「デザイン」設定の「スライドアニメーション」タブに移動してください。
- 連続：ギャラリーは自動的にスライドします。「スライドショーの速度」スライダーをドラッグして、ギャラリーがスライドする速度を調整します。
- ホバーで一時停止：トグルをクリックして、訪問者がギャラリーアイテムをホバーすることでスライドショーを一時停止させるかどうかを選択します。
情報バーのサイズ：ギャラリーの下にアイコン、タイトル、詳細用のスペースを追加します。