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