Wix の使用方法を学び、サイトとビジネスを構築する。

直感的な Wix 機能でサイトをデザインして管理する。

定期購入、プラン、請求を管理する。

ビジネスを運営し、サイト会員とつながる。

ドメインの購入、サイトへの接続と移管方法を学ぶ。

ビジネスとウェブプレゼンスを成長させるツールを入手する。

SEO とマーケティングツールで知名度を上げる。

より効率的な作業を支援する高度な機能を利用する。

解決策や既知の問題について確認し、問い合わせる。

コースとチュートリアルでスキルを習得する。

ウェブデザインやマーケティングなどのヒントを得る。

検索エンジンからのトラフィックを増やす方法について学ぶ。

フルスタックプラットフォームでカスタムサイトを構築する。

あなたの目標達成をサポートするエキスパートを見つけましょう。

この記事では下記を説明します：

カスタムレイアウト
プリセットレイアウト
よくある質問

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

14分

この記事内

カスタムレイアウト
プリセットレイアウト
よくある質問

Wix プロギャラリーには、メディアを魅力的に見せるための、さまざまなレイアウトが用意されています。レイアウトを自由にカスタマイズしたい場合でも、プリセットのレイアウトを使用したい場合でも、好みに合わせて選択することができます。

カスタムレイアウトを使用すると、ギャラリー内の画像の間隔、向き、スクロール方向などを、すべて自由にカスタマイズすることができます。
プリセットレイアウトを使用すると、プロがデザインした豊富な種類のレイアウトから好みのものを選択して、各種デザインをカスタマイズすることができます。

カスタムレイアウト

カスタムレイアウトを使用すると、プロギャラリーのデザインを始めから構築することができます。画像が固定して表示されるレイアウトや、画像がスライドして表示されるレイアウトなど、さまざまな種類から選択することができます。また、「シャッフル」のオプションを使用すると、レイアウトをランダムに作成することができます。各レイアウトは、サイトの雰囲気に合わせてカスタマイズすることが可能です。

カスタムレイアウトを選択する方法：

エディタに移動します。
ページ上のプロギャラリーをクリックします。
「設定」をクリックします。
「レイアウト」タブをクリックします。
ギャラリーのレイアウトを選択します。
「レイアウトを編集」をクリックしてレイアウトをカスタマイズします。レイアウトをクリックして機能の詳細をご覧ください：

コラージュ

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

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

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

横スクロール：
- ギャラリーの向き：写真を横または縦に表示するかどうかを選択します。
- ギャラリー比率：ギャラリーの比率を「手動」または「固定」から選択します。
  - 手動：ギャラリーを任意の高さと幅にドラッグすると、メディアのサイズが自動的に調整されて、ギャラリー内に収まります。
  - 固定：ギャラリーに適用する固定の比率を選択します。これにより、ドラッグしてサイズを変更しても、ギャラリーの比率が常に一定に保たれます。
- 自動でスライド：トグルを有効にして、アイテムがスライドショーとして連続で表示されるようにします：
  - インターバル：指定した時間が経過すると、ギャラリーが次のアイテムにスライドします。「スライド間の時間」スライダーをドラッグして、スライドが切り替わる時間を調整します。
    注意：トランジション効果を変更する場合は、「デザイン」タブの「スクロール効果」セクションに移動してください。
  - 連続：ギャラリー内のアイテムが自動的にスライドします。「スライドショーの速度」スライダーをドラッグして、アイテムがスライドする速度を調整します。
  - ホバーで一時停止：トグルをクリックして、訪問者がギャラリーのアイテムにマウスオーバーした際、スライドショーが一時停止するどうかを選択します。
- サムネイルのサイズ：ギャラリー内の画像の大きさを選択します。
- 間隔：画像間の間隔を設定します。
- 表示密度：ギャラリーに一度に表示する画像の数を選択します。

メーソンリー

グリッド

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

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

縦スクロール：

サムネイルのサイズ変更：サムネイル画像を、クロップして表示するか、縮小して全体を表示するかを選択します：
- クロップ：画像が選択した比率でクロップされます。
  注意：「枠線の太さ・色」、「角の丸み」のデザインオプションは、このオプションを選択した場合のみ使用することができます。
- フィット：画像がサムネイルのサイズに合わせて調整されます。
自動で調整：訪問者の画面サイズに応じて、ギャラリー内の画像の数が自動的に最適化されます。
- サムネイルのサイズ：スライダーをドラッグして、ギャラリー内の画像の大きさを調整します。
表示枚数を設定：行ごとに表示する画像の枚数を手動で設定します。
- 行ごとの画像数：スライダーをドラッグして、行ごとに表示する画像の枚数を調整します。
間隔：スライダーをドラッグして、画像間の間隔を調整します。
「もっと見る」ボタン：トグルを有効にして、ギャラリーに「もっと見る」ボタンを表示します。
- 画像のロード数：すべての画像を表示するか、最後のセクションを表示するかを選択します。
  注意：「最後のセクション」を選択すると、元のギャラリーと同じサイズのセクションが追加されます。

横スクロール：

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

サムネイル

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

ギャラリー比率：ギャラリーの比率を「手動」または「固定」から選択します。
- 手動：ギャラリーを任意の高さと幅にドラッグすると、メディアのサイズが自動的に調整されて、ギャラリー内に収まります。
- 固定：ギャラリーに適用する固定の比率を選択します。これにより、ドラッグしてサイズを変更しても、ギャラリーの比率が常に一定に保たれます。
サムネイルのサイズ変更：
- クロップ：画像のサイズをギャラリーのサイズに合わせます。
- フィット：画像を元の比率で表示し、ギャラリーのサイズに合わせます。画像の周りに空白が多すぎる場合は、ギャラリーの高さを増やす必要があります。
  注意：「枠線の太さ・色」、「角の丸み」のオプションは、レイアウトの設定で「クロップ」を選択した場合のみ、「デザイン」タブの「アイテムスタイル」セクションから使用することができます。
サムネイルの位置：画面上でサムネイルを表示する位置を選択します。（現在の画像の下、左、上、右）
サムネイルのサイズ：スライダーをドラッグし、ギャラリー内でのサムネイルのサイズを変更します。
注意：画像の数が少なく、メイン画像の下に空白がある場合は、サムネイルのサイズを大きくする必要があります。
画像をループ表示：最後の画像で「次へ」ボタンを無効にするかどうかを選択します。
注意：後方スクロール中に最初の画像に到達すると、「左」ボタンは無効になります。
自動的でスライド：（このオプションは、スクロールの方向で「横」を選択した場合にのみ使用できます。）スライドショーにアイテムを表示する方法を選択します：
- インターバル：指定した時間が経過すると、ギャラリーは次のアイテムにスライドします。「スライド間の時間」スライダーをドラッグして、アイテム間の秒数を変更します。
  注意：トランジション効果を変更する場合は、「デザイン」タブの「スクロール効果」セクションに移動してください。
- 連続：ギャラリーは自動的にスライドします。「スライドショーの速度」スライダーをドラッグして、ギャラリーがスライドする速度を調整します。
- ホバーで一時停止：トグルを有効にして、訪問者がギャラリーアイテムにマウスオーバーしたときにスライドショーを一時停止します。
サムネイルの間隔：スライダーをドラッグして、画像間の間隔を選択します。

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

スライダー

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

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

ギャラリー比率：ギャラリーの比率を「手動」または「固定」から選択します。
- 手動：ギャラリーを任意の高さと幅にドラッグすると、メディアのサイズが自動的に調整されて、ギャラリー内に収まります。
- 固定：ギャラリーに適用する固定の比率を選択します。これにより、ドラッグしてサイズを変更しても、ギャラリーの比率が常に一定に保たれます。
サムネイルのサイズ変更：
- クロップ：画像の比率を固定するかレスポンシブにするかを選択します。
- フィット：画像を元の比率で表示し、ギャラリーのサイズに合わせます。画像の周りに空白が多すぎる場合は、ギャラリーの高さを増やす必要があります。
  注意：「枠線の太さ・色」、「角の丸み」のオプションは、レイアウトの設定で「クロップ」を選択した場合のみ、「デザイン」タブの「アイテムスタイル」セクションから使用することができます。
画像の比率：
- レスポンシブ：画像のサイズは、閲覧者のデバイスに応じて自動的に調整されます。
- 固定：利用可能な画像の比率オプションから選択します。（例：4:3、1:1）画像はすべてのデバイスでこの比率で表示されます。
画像をループ表示：最後の画像で「次へ」ボタンを無効にするかどうかを選択します。
注意：後方スクロール中に最初の画像に到達すると、「左」ボタンは無効になります。
自動でスライド：トグルを有効にして、アイテムがスライドショーとして連続で表示されるようにします：
- インターバル：指定した時間が経過すると、ギャラリー内のアイテムが次のアイテムにスライドします。「スライド間の時間」スライダーをドラッグして、次のアイテムにスライドする秒数を調整します。
  注意：トランジション効果を変更する場合は、「デザイン」設定の「スクロール効果」タブに移動してください。
- 連続：ギャラリーは自動的にスライドします。「スライドショーの速度」スライダーをドラッグして、ギャラリーがスライドする速度を調整します。
- ホバーで一時停止：トグルを有効にして、訪問者がギャラリーアイテムにマウスオーバーしたときにスライドショーを一時停止します。
表示アイテム数：スライダーをドラッグして、一度に表示される画像の数を調整します。（このオプションは、画像の比率として「レスポンシブ」を選択した場合にのみ使用できます。）
間隔：画像間の間隔を設定します。

スライドショー

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

ギャラリー比率：ギャラリーの比率を「手動」または「固定」から選択します。
- 手動：ギャラリーを任意の高さと幅にドラッグすると、メディアのサイズが自動的に調整されて、ギャラリー内に収まります。
- 固定：ギャラリーに適用する固定の比率を選択します。これにより、ドラッグしてサイズを変更しても、ギャラリーの比率が常に一定に保たれます。
サムネイルのサイズ変更：
- クロップ：画像のサイズをギャラリーのサイズに合わせます。
- フィット：画像を元の比率で表示し、ギャラリーのサイズに合わせます。画像の周りに空白が多すぎる場合は、ギャラリーの高さを増やす必要があります。
  注意：「枠線の太さ・色」、「角の丸み」のオプションは、レイアウトの設定で「クロップ」を選択した場合のみ使用することができます。
画像をループ表示：最後の画像で「次へ」ボタンを無効にするかどうかを選択します。
注意：後方スクロール中に最初の画像に到達すると、「左」ボタンは常に無効になります。
自動でスライド：トグルを有効にして、アイテムを連続するスライドショーとして表示するようにします：
- インターバル：指定した時間が経過すると、ギャラリー内のアイテムが次のアイテムにスライドします。「スライド間の時間」スライダーをドラッグして、次のアイテムにスライドする秒数を調整します。
  注意：トランジション効果を変更する場合は、「デザイン」設定の「スクロール効果」タブに移動してください。
- 連続：ギャラリーは自動的にスライドします。「スライドショーの速度」スライダーをドラッグして、ギャラリーがスライドする速度を調整します。
- 再生ボタンを表示：訪問者がスライドショーを一時停止または再生できるようにするボタンを追加します。（このオプションは、「自動でスライド」を有効にした場合にのみ使用できます。）
- ホバーで一時停止：トグルを有効にして、訪問者がギャラリーアイテムにマウスオーバーしたときにスライドショーを一時停止します。
  ヒント：スライドショーを自動でスライドするように設定すると、「デザイン」タブの「テキスト」セクションに、ギャラリーにスライドショーカウンターを表示するオプションが表示されます。
情報バーのサイズ：ギャラリーの下にアイコン、タイトル、詳細用のスペースを追加します。