Wix プロギャラリー:ギャラリーに矢印ボタンを追加する
読了時間:3分
プロギャラリーに矢印ボタンを表示することで、訪問者が自分のペースでギャラリーの詳細を閲覧できるようにします。特定のプロギャラリーのレイアウトでは、矢印ボタンをギャラリーの内外に表示し、さらにカスタマイズすることができます。
矢印の色を変更して、サイトの他の部分のデザインを引き立たせることができます。
![](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 プロギャラリーをクリックします。
- 「設定」をクリックします。
- 左側の「デザイン」タブをクリックします。
- 「矢印ボタン」をクリックします。
- 「矢印ボタンを表示」トグルを有効にします。
- オプションを使用して矢印をカスタマイズします:
- 矢印のスタイル:矢印のデザインをクリックして選択するか、「追加」アイコン
をクリックして独自のアイコンをアップロードします。
- 矢印の背景:ドロップダウンをクリックして、影、ボックス、または背景なしを選択します。
- 影:矢印の周りにわずかな影を追加します。
- ボックス:矢印の周りにボックスを追加します。カラーボックスをクリックしてボックスの色を変更し、該当するスライダーをドラッグして不透明度を調整し、角を丸くします。
- なし:矢印に背景は追加されません。
- 矢印のサイズ :スライダーをドラッグして、矢印ボタンのサイズを大きくしたり小さくしたりします。
- 矢印の色:カラーボックスをクリックして、矢印ボタンの色を選択します。サイトカラーから選択するか、独自の色を選択します。
- 矢印の位置:該当するチェックボックスを選択して、ギャラリー上または外に矢印を表示します。注意:ギャラリーに矢印を表示すると、ギャラリーアイテムの一部が隠れることがあります。
- 中央の矢印の方向:矢印をギャラリー本体、ギャラリー画像、またはテキストの中央に配置します。
- 横方向の余白:スライダーをドラッグして、矢印とギャラリーの枠線の間隔を調整します。
- 矢印のスタイル:矢印のデザインをクリックして選択するか、「追加」アイコン
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/03/04/f35ad447-f7fd-407f-b940-68de8785fc6b/7509e7e0-e68c-4ddd-b6c5-541fc93361cc.png)
注意:
「中央の矢印の方法」オプションを表示するには、ギャラリーアイテムの下にテキストを表示するように選択していることを確認してください。このオプションは、現在サムネイルとスライダーレイアウトでは使用できません。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/03/04/77ce2cad-9fb8-4252-9421-61eed761ee0e/59e77729-2cb2-460e-abfb-61f9619f091b.png)
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/03/04/77ce2cad-9fb8-4252-9421-61eed761ee0e/59e77729-2cb2-460e-abfb-61f9619f091b.png)
ヒント:![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/03/04/3a8617ad-c512-4329-8bef-d7f91b1c5393/8e01794b-2793-482a-afba-5de95d0b2f70.png)
「レイアウト」タブでスクロールの方向を「横」に設定することで、グリッドレイアウトとコラージュレイアウトで矢印を有効にすることもできます。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/03/04/3a8617ad-c512-4329-8bef-d7f91b1c5393/8e01794b-2793-482a-afba-5de95d0b2f70.png)
拡大表示で矢印ボタンをカスタマイズする
ギャラリーの拡大表示を有効にすると、矢印は自動的に表示されます。拡大表示内の「デザイン設定」タブからこれらの矢印の色をカスタマイズしましょう。
拡大表示で矢印ボタンをカスタマイズする方法:
- エディタで Wix プロギャラリーをクリックします。
- 「設定」をクリックします。
- 左側の「デザイン」タブをクリックします。
- 「拡大表示」をクリックします。
- 「拡大表示をカスタマイズ」をクリックします。
- 拡大表示ポップアップの右側にある「デザイン設定」までスクロールダウンします。
- 「アイコンの色」横のカラーボックスをクリックし、サイトカラーから選択するか、独自の色を選択します。
- 「完了」をクリックします。
注意:
拡大表示での矢印ボタンはデスクトップにのみ表示され、モバイルには表示されません。サイト訪問者がモバイルでギャラリー内を移動するには、左または右にスワイプする必要があります。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/03/04/9f40d74e-22f8-4fcb-93a2-1f9aba7d7b0b/8db5b0ef-2e99-42d8-8e5d-9d3f0dffcd6f.png)
ヒント:
拡大表示のカスタマイズオプションについての詳細はこちらをご覧ください。
お役に立ちましたか?
|