Wix プロギャラリー:ギャラリーに矢印ボタンを追加する
読了時間:5分
プロギャラリーに矢印ボタンを表示することで、訪問者が自分のペースでギャラリーの詳細を閲覧できるようにします。特定のプロギャラリーのレイアウトでは、矢印ボタンをギャラリーの内外に表示し、さらにカスタマイズすることができます。
矢印の色を変更して、サイトの他の部分のデザインを引き立たせることができます。
![ライブサイトでスライドギャラリーを示した GIF。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/5c3e602a-8647-41f7-bb22-686374bf97ce/2021/03/12/4d40efa9-cc95-4607-8fed-a0aa893a62e5/3ee8aab7-d8c1-40a9-9dab-8c0f94058450.gif)
注意:
ギャラリーで拡大表示を有効にしている場合、矢印ボタンが自動的に表示されます。
矢印ボタンを追加・カスタマイズする
矢印ボタンはサムネイル、スライダー、スライドショー、カラムレイアウトで有効にできます。設定パネルの「デザイン」タブから、矢印の位置、色、サイズをカスタマイズします。
Wix エディタ
Wix Studio エディタ
- エディタにアクセスします。
- ページ上のプロギャラリーをクリックします。
- 「設定」をクリックします。
- 左側の「デザイン」タブをクリックします。
- 「矢印ボタン」をクリックします。
- 「矢印ボタンを表示」トグルを有効にします。
- オプションを使用して矢印をカスタマイズします:
- 矢印のスタイル:矢印のデザインをクリックして選択するか、「追加」アイコン
をクリックして独自のアイコンをアップロードします。
- 矢印の背景:ドロップダウンをクリックして、影、ボックス、または背景なしを選択します。
- 影:矢印の周りにわずかな影を追加します。
- ボックス:矢印の周りにボックスを追加します。カラーボックスをクリックしてボックスの色を変更し、該当するスライダーをドラッグして不透明度を調整し、角を丸くします。
- なし:矢印に背景は追加されません。
- 矢印のサイズ :スライダーをドラッグして、矢印ボタンのサイズを大きくしたり小さくしたりします。
- 矢印の色:カラーボックスをクリックして、矢印ボタンの色を選択します。サイトカラーから選択するか、独自の色を選択します。
- 矢印の位置:該当するチェックボックスを選択して、ギャラリー上または外に矢印を表示します。注意:ギャラリーに矢印を表示すると、ギャラリーアイテムの一部が隠れることがあります。
- 中央の矢印の方向:矢印をギャラリー本体、ギャラリー画像、またはテキストの中央に配置します。
注意:このオプションを表示するには、「デザイン」タブの「テキスト」でテキストの表示位置にギャラリー「下部」が選択されている必要があります。このオプションは、現在「サムネイル」と「スライダー」レイアウトではご利用いただけません。 - 横方向の余白:スライダーをドラッグして、矢印とギャラリーの枠線の間隔を調整します。
- 矢印のスタイル:矢印のデザインをクリックして選択するか、「追加」アイコン
![「矢印ボタン」のカスタマイズオプションのスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2025/01/12/3127230b-9ae9-4ec4-93f5-73159c07d4b4/acae37f5-ca7b-4f17-96a2-ce275c8c1522.png)
ヒント:![「スクロールの方向」オプションのスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2025/01/12/be111ddc-b8d1-46c5-ae66-b64c02118204/df8de1db-6c87-4252-b193-4288ebd7aab4.png)
「レイアウト」タブでスクロールの方向を「横」に設定することで、グリッドレイアウトとコラージュレイアウトで矢印を有効にすることもできます。
![「スクロールの方向」オプションのスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2025/01/12/be111ddc-b8d1-46c5-ae66-b64c02118204/df8de1db-6c87-4252-b193-4288ebd7aab4.png)
拡大表示で矢印ボタンをカスタマイズする
ギャラリーの拡大表示を有効にすると、矢印は自動的に表示されます。拡大表示内の「デザイン設定」タブからこれらの矢印の色をカスタマイズしましょう。
拡大表示で矢印ボタンをカスタマイズする方法:
Wix エディタ
Wix Studio エディタ
- エディタにアクセスします。
- ページ上のプロギャラリーをクリックします。
- 「設定」をクリックします。
- 左側の「デザイン」タブをクリックします。
- 「拡大表示」をクリックします。
- 「拡大表示をカスタマイズ」をクリックします。
- 拡大表示ポップアップの右側にある「デザイン設定」までスクロールダウンします。
- 「アイコンの色」横のカラーボックスをクリックし、サイトカラーから選択するか、独自の色を選択します。
- 「完了」をクリックします。
![拡大表示で矢印ボタンのデザインオプションが表示されたスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2025/01/12/ef600a24-2ec9-47ad-9f85-8506a5912195/4f917c47-51ce-4d85-8ff1-c3e2b2817833.png)
注意:
拡大表示での矢印ボタンはデスクトップにのみ表示され、モバイルには表示されません。サイト訪問者がモバイルでギャラリー内を移動するには、左または右にスワイプする必要があります。