サイトにマルチメディアギャラリーを追加して画像や動画を掲載し、サイトとビジネスに息を吹き込みましょう。また、各ギャラリーアイテムの横に SNS シェアアイコン、ダウンロードボタン、ハートアイコンなどのパーツを追加することで、ギャラリーや画像に対するサイト訪問者の反応を知ることができます。
ステップ 1 | サイトにプロギャラリーを追加する
まず最初のステップは、プロギャラリーをサイトに追加することです。プロギャラリーを追加したら、メディアの追加や設定のカスタマイズができます。
- ADI トップバーある「追加」をクリックします。
- 「セクション」をクリックします。
- 「パーツ」まで下にスクロールし、「メディアギャラリー」をクリックします。
- デザインを選択し、サイトの希望するセクションにドラッグします。
ステップ 2 | プロギャラリーにメディアを追加する
レイアウトを選択したら、プロギャラリーに画像や動画を追加して視覚的にアピールできます。オリジナル画像をアップロードするか、Wix 画像・動画素材からストック画像を選択します
- ADI ビルダー内のギャラリーをクリックします。
- 画面下の「メディアを管理」をクリックします。
- 「新しく追加」をクリックします。
- アップロードするメディアの種類を選択します：
- 画像：
- メディアマネージャーから画像を選択するか、「アップロード」をクリックして、コンピュータから画像をアップロードします。
- 「ページに追加」をクリックします。
- 「完了」をクリックします。
- 動画：動画オプションを選択します：
- 動画をアップロード：メディアマネージャーから画像を選択するか、「アップロード」をクリックして、コンピュータから画像をアップロードします。
- YouTube から追加：動画 URL を入力します。
- Vimeo から追加：動画 URL を入力します。
- 「動画を追加」をクリックします。
- 「完了」をクリックします。
- テキスト：
- コンテンツウィンドウにテキストを入力します。
- トップバーで利用可能なオプションを使用して、テキストの書式を設定します。
- 下記のオプションを使用し、テキストをカスタマイズします：
- レイアウト：テキストのレイアウトを選択します。
- 不透明度・色：スライダーをドラッグして、不透明度を変更し、テキストの色を選択します。
- ボックスの余白：スライダーをドラッグして、テキストとテキストボックスの枠線の間隔を変更します。
- 縦方向の配列：文字の位置合わせを選択します。
- 「ギャラリーに追加」をクリックします。
- 「完了」をクリックします。
ステップ 3 | プロギャラリー設定をカスタマイズする
ギャラリーの幅と表示するパーツ、およびサイト訪問者がクリック、またはギャラリーをスクロールしたときの動作を選択します。
- ADI ビルダー内のギャラリーをクリックします。
- 下記の設定をカスタマイズします：
- 全幅レイアウト：トグルを有効にし、ギャラリーをサイト全幅に拡大します。
- もっと見るボタン：トグルを有効にし、セクションレイアウトに収まらないアイテムがある場合に「もっと見る」ボタンを表示します。
- 画像の比率：ギャラリーアイテムの比率を選択します。ページ上の画像が自動的に更新され、画面で確認することができます。
- アイテムをクリックした時：ドロップダウンメニューをクリックし、訪問者がギャラリーアイテムをクリックしたときの動作を選択します。
- リンクを開く：訪問者はリンクに誘導されます（ウェブアドレス、ページ、ライトボックスなど）。
注意：ドロップダウン下の「メディアを管理」をクリックしてリンクを設定します。 - なし：メディアがクリックされても動作は起こりません。
- 全画面表示で開く：ギャラリーメディアは拡大モードで開き、訪問者は画像の詳細を見ることができます。
- 表示項目：ギャラリーアイテムと共にギャラリーに表示するパーツを選択します。
- 画像タイトル：ギャラリーアイテムの画像タイトルを表示します。注意：左下で「メディアを管理」をクリックしてタイトルを更新します。
- 画像の詳細：アイテムの詳細を表示します。注意：左下で「メディアを管理」をクリックしてアイテムの詳細を更新します。
- SNS シェアボタン：SNS アイコンをギャラリーアイテムに追加し、訪問者が SNS でメディアをシェアできるようにします。
- ダウンロード：ダウンロードアイコンをギャラリーアイテム横に表示することで、訪問者はメディアをダウンロードすることができます。
- ハートアイコン：ハートアイコンを追加することで訪問者はお気に入りのギャラリーアイテムにリアクションを付けることができます。
- 画像解像度：スライダーをドラッグして画像の解像度を調節します。
- シャープ補正：チェックマークを選択し、補正量、範囲、しきい値を使用して画像をシャープ補正します。
