Wix プロギャラリー：ギャラリーをデザインする

デザインをカスタマイズして、ギャラリーをサイト上で目立つようにしましょう。レイアウト、色、フォントなどをカスタマイズすることで、ギャラリーにプロフェッショナルな仕上がりにできます。

プロギャラリーのデザインをカスタマイズする方法：

エディタにアクセスします。
ページ上のプロギャラリーをクリックします。
「設定」をクリックします。
「デザイン」タブをクリックします。
カスタマイズする箇所を選択します：

オーバーレイ・アイコン

オーバーレイは画像の上に配置され、マウスで画像の上にカーソルを置くと、更に効果を追加します。この効果とアイコンをカスタマイズできます。

「オーバーレイ・アイコン」をクリックします。
「フルオーバーレイ」「部分オーバーレイ」のいずれかを選択して、下記のオプションでカスタマイズします。
- フルオーバーレイ：オーバーレイはギャラリーアイテム全体をカバーします。
  - グラデーション：トグルをクリックしてグラデーションオーバーレイを有効化します。
    - 不透明度・色 1 と 2：該当するカラーボックスをクリックしてグラデーションの色をカスタマイズします。スライダーを使用して、色の不透明度を調整します。
    - グラデーションの方向：スライダーをドラッグしてグラデーションオーバーレイの方向を指定します。
    - アイコンの色：カラーボックスをクリックして、ホバーで表示されるギャラリーアイコンの色を変更します。
  - オーバーレイの色：カラーボックスをクリックして色を選択します。次に、スライダーをドラッグしてオーバーレイの色の不透明度を変更します。
  - アイコンの色：カラーボックスをクリックし、ギャラリーアイコンの新しい色を選択します。
- 部分オーバーレイ：オーバーレイはギャラリーアイテムの一部のみをカバーします。
  - サイズを設定：オーバーレイのサイズをパーセントまたはピクセルで管理します。
  - サイズ：スライダーをドラッグするか、値を入力してオーバーレイのサイズを選択します。
  - オーバーレイの開始：オーバーレイを配置する位置を選択します。
  - 余白：スライダーをドラッグして、ギャラリーの枠線とオーバーレイの間のスペースを調整します。
  - グラデーション：トグルをクリックしてグラデーションオーバーレイを有効化します。
    - 不透明度・色 1 と 2：該当するカラーボックスをクリックしてグラデーションの色をカスタマイズします。スライダーを使用して、色の不透明度を調整します。
    - グラデーションの方向：スライダーをドラッグしてグラデーションオーバーレイの方向を指定します。
    - アイコンの色：カラーボックスをクリックして、ホバーで表示されるギャラリーアイコンの色を変更します。
  - オーバーレイの色：カラーボックスをクリックして色を選択します。次に、スライダーをドラッグしてオーバーレイの色の不透明度を変更します。
  - アイコンの色：カラーボックスをクリックし、ギャラリーアイコンの新しい色を選択します。
オプションからオーバーレイ効果を選択します：
- なし：オーバーレイ効果は適用されません。
- フェードイン：オーバーレイがホバーで徐々に表示されます。
- 拡大表示：オーバーレイがホバーで展開されます。
- 上にスライド：オーバーレイがホバーでスライドします。
- 右にスライド：オーバーレイは、ホバーで右にスライドします。

テキスト

ボタン

矢印ボタン

矢印ボタンは、サムネイル、スライダー、スライドショー、カラムレイアウトで有効にできます。サイト訪問者がギャラリーを簡単に移動できるように、位置、サイズ、色をカスタマイズできます。

「矢印ボタン」をクリックします。
トグルをクリックして、ギャラリーの矢印を有効にします。
以下のオプションを使用して矢印をカスタマイズします：
- 矢印のスタイル：矢印のデザインをクリックして選択するか、「追加」アイコンをクリックして独自のアイコンをアップロードします。
- 矢印の背景：ドロップダウンをクリックして、影、ボックス、または背景なしを選択します。
  - 影：矢印の周りにわずかな影を追加します。
  - ボックス：矢印の周りにボックスを追加します。カラーボックスをクリックしてボックスの色を変更し、該当するスライダーをドラッグして不透明度を調整し、角を丸くします。
  - なし：矢印に背景は追加されません。
- 矢印のサイズ ：スライダーをドラッグして、矢印ボタンのサイズを大きくしたり小さくしたりします。
- 矢印の色：カラーボックスをクリックして、矢印ボタンの色を選択します。サイトカラーから選択するか、独自の色を選択します。
- 矢印の位置：該当するチェックボックスを選択して、ギャラリー上または外に矢印を表示します。注意：ギャラリーに矢印を表示すると、ギャラリーアイテムの一部が隠れることがあります。
- 矢印の位置の基準：矢印をギャラリー本体、ギャラリー画像、またはテキストの中央に配置します。
- 横方向の余白：スライダーをドラッグして、矢印とギャラリーの枠線の間隔を調整します。

アイテムスタイル

ギャラリー内の各画像または動画はアイテムです。通常時とホバー時の両方で、アイテムの見た目を変更できます。

「アイテムスタイル」をクリックします。
「アイテムスタイル」下でアイテムの通常時をカスタマイズします。
- 枠線の太さ・色：スライダーをドラッグして枠線の太さを変更し、カラーボックスをクリックして色を選択します。
- 角の丸み：スライダーをドラッグして、角をより丸くまたは四角くします。
  注意：「枠線の太さ・色」、「角の丸み」オプションは、レイアウトの設定でサムネイルのクロップを選択し、（サムネイルではなく）メイン画像にのみ適用した場合にのみ使用できます。
- 影：影を有効または無効にするには、トグルをクリックします。
  - 有効化：ギャラリーアイテムの周囲に影が表示されます。不透明度、色、ぼかし、影の方向とサイズをカスタマイズします。
  - 無効化：ギャラリーアイテムの周囲に影は表示されません。
訪問者がマウスでギャラリーアイテムにカーソルを合わせた時の動作を選択します：
- なし：ホバーに効果は適用されません。
- ズームイン：ホバー時に画像をズームインします。
- ぼかし ：画像はホバーするとぼやけます。
- フェードアウト：画像はホバーすると白黒になります。
- 縮小表示：ホバーすると画像が小さくなります。
- 反転：画像の色はホバー時に反転します。
- カラーイン：画像は、ホバーすると白黒からカラフルに変わります。
- ダーク：ホバーすると画像が少し暗くなります。
画像の読み込み中の動作を選択します：
- ぼやけた画像：読み込み中にぼやけた画像が表示されます。
- カラープレイスホルダ：画像の読み込み中に色付きのプレイスホルダが表示されます。

スクロール / スライドアニメーション

拡大表示

このセクションは、ユーザーがギャラリーアイテムをクリックした際に、プロギャラリーの「設定」パネルで「拡大表示で開く」を選択した場合に表示されます。ここから、サイトのデザインとブランドに合うようギャラリーの拡大表示をカスタマイズすることができます。

「拡大表示」をクリックします。
「拡大表示をカスタマイズ」をクリックし、次のオプションでギャラリーの拡大表示をお好みにカスタマイズします。
- 表示する情報を選択してください：タイトル、詳細またはリンクを表示するよう選択します。
- 表示位置を選択してください。情報を表示する位置を選択します。
  - サイド：情報はギャラリーアイテムの右に表示されます。
  - 下部：情報はギャラリーアイテムの下に表示されます。
- 表示する時を選択してください。：情報が表示される時を選択します：
  - 常に表示：情報は常に表示されます。
  - アイコンをクリックした時に表示：訪問者が拡大表示の左上で情報アイコンをクリックした時にのみ、情報が表示されます。
- 全画面表示を許可：訪問者は、ギャラリーアイテムを全画面で表示することができます。
- 背景色：カラーボックスをクリックして、拡大表示の背景色を選択します。サイトカラーから選択するか、色を追加します。
- アイコンの色：カラーボックスをクリックして拡大表示のアイコンの色を選択します。イトカラーから選択するか、色を追加します。
- タイトルスタイル：
  - ドロップダウンメニューをクリックし、フォントピッカーでフォント、スタイルとサイズをカスタマイズします。
  - カラーボックスをクリックし、タイトルテキストの色を変更します。
- 詳細スタイル：
  - ドロップダウンメニューをクリックし、フォントピッカーでフォント、スタイルとサイズをカスタマイズします。
  - カラーボックスをクリックし、詳細テキストの色を変更します。
- テキスト配置：テキストを左・中央・右に配置します。

ヒント：

プロギャラリーの矢印は、「矢印ボタンを表示」トグルを無効にすることで非表示にできます。

プロギャラリーのデザインをカスタマイズする方法：

お役に立ちましたか？

お役に立ちましたか？