Wix Studio エディタ:プロギャラリーのベストプラクティス
読了時間:4分
プロギャラリーを使用すると、動画、画像、テキストをすべて 1つの美しいマルチメディアギャラリーに表示できます。この記事のガイドラインを読んで、エディタでプロギャラリーを最大限に活用しましょう。さまざまなギャラリーのカスタマイズ方法やどの画面サイズでも見栄え良くする方法を紹介しています。
必要な設定を見つける
異なるギャラリー設定を調整できる主なエリアは 2つあります:
- Wix プロギャラリーの設定パネル
- 要素設定パネル
設定パネル
設定パネルでは、ギャラリーのデザインと機能を調整できます。画像に合ったレイアウトを選択したり、アイテムをクリックしたときの動作を設定したり、様々な SNS シェア設定を有効にします。
![Wix Studio エディタの「プロギャラリー設定」パネルのスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/09/14/fb1c2324-c2fb-4343-93ef-7538ec1d8bc3/f06348a3-1c6b-4b7a-bec8-871b53b69db5.png)
要素設定パネル
要素設定パネルから、ギャラリーのサイズ、位置、ブレイクポイント間の動作を調整できます。これらの設定は、どの画面サイズでも見栄えが良いレスポンシブなギャラリーを作成するのに役立ちます。
デフォルトでは、「デザイン」タブが最初に開きます。「操作」タブ
をクリックし、魅力的なアニメーションを作成します。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/11/25/7d8bb681-6024-4951-86e9-c1201cd53273/97dcf9c3-7477-45d8-a7a5-a3bfdef51c56.png)
![エディタの要素設定パネルのスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/09/14/5f502411-6b22-42df-bb1c-2dece4a9dedb/6ba39f97-5ffb-4c80-b99c-da43ada8a763.png)
ギャラリーをレスポンシブにする
ギャラリーがすべての画面サイズに対応するようにするには、さまざまな方法があります。以下を読んで、デザインニーズに最適な方法を選択してください。
ギャラリーのレスポンシブ動作を確認する
要素設定パネルでは、ギャラリーのサイズと現在のレスポンシブ動作を確認できます。各訪問者の画面に合わせてギャラリーのサイズが自動的に変更されるように、ギャラリーが「相対幅」または「ストレッチ」に設定されていることを確認してください。
![「相対幅」が選択されたレスポンシブ動作ドロップダウン](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/09/14/a16ec94b-36cd-4471-8bc4-7672d8f97af4/6bc2bf72-555d-47b2-a39b-3ae41c31ef01.png)
ヒント:
以下の場合、要素設定でギャラリーの高さを調整することはできません:
- ギャラリーが縦スクロールに設定されている場合。
- ギャラリーは横向きで固定比率です。
これらの設定は、ギャラリーの「設定」パネルの「レイアウト 」タブから変更できます。
ブレイクポイントごとに異なるレイアウトを使用する
プロギャラリーにはさまざまなレイアウトオプションがあります。ギャラリーが常に画面に収まるように、ブレイクポイントごとにレイアウトを選択できます。「デザイン」タブで色、テキスト、アニメーションのみを変更する固定されたプリセットレイアウトを選択することで、時間を節約することもできます。
![プロギャラリー設定パネルの「レイアウト」タブのスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/09/14/4dfc6b8e-798e-45d8-be1a-09e463381cd4/4679c05e-1a02-4140-a22d-295c07d003f6.png)
間隔と余白の問題のトラブルシューティング
ギャラリー画像の上、下、または画像間の間隔が広すぎる場合は、以下の手順をお試しください。
画像間の間隔を狭くする
テキストボックスのサイズを確認する
(スライドショーレイアウト)情報バーのサイズを確認する
お役に立ちましたか?
|