Wix プロギャラリー:設定で使用される用語集
読了時間:9分
プロギャラリーの設定はいつでもカスタマイズできます。レイアウト、デザイン、その他の詳細設定を調整できます。
この記事では、プロギャラリー内のすべてのオプションの概要を説明します。設定可能なオプションは選択しているプロギャラリーのレイアウトによって異なります。
プロギャラリーの設定にアクセスする方法
ギャラリーのカスタマイズ方法は下記をご確認ください:
レイアウトタブ
注意:
既製のプリセットレイアウトのいずれかを使用する場合、レイアウト自体はカスタマイズできません。ただし、ギャラリーのデザインは、「設定」パネルの「デザイン」タブからカスタマイズできます。詳細はこちらをご覧ください。
設定 | 動作 | オプション |
---|---|---|
自動でスライド | アイテムは、訪問者が矢印ボタンをクリックせずに連続的にスライドします。 |
・インターバル:指定した時間が経過すると、ギャラリーは次のアイテムにスライドします。「スライド間の時間」スライダーをドラッグして、アイテム間の秒数を変更します。 ・連続:ギャラリーは自動的にスライドします。「スライドショーの速度」スライダーをドラッグして、ギャラリーがスライドする速度を調整します。
|
情報バーのサイズ | ギャラリーアイテム下の情報バーのサイズ。 | スライダーをドラッグして、ギャラリー下の「ハート」アイコンと「シェア」アイコンが表示されるスペースのサイズを調整します。「デザイン」でテキストチェックボックスを選択すると、情報バーにもタイトルと詳細が表示されます。 |
画像をループ表示 | 訪問者がギャラリーアイテムを連続的にスクロールできるかどうかを制御します。 | ・有効化:訪問者は画像を連続的にスクロールできます。 ・無効化:ギャラリーアイテムの終わりに達するとき、訪問者は左ナビゲーション矢印をクリックしてギャラリーの先頭に戻らなければなりません。 |
再生ボタン | 訪問者がスライドショーを一時停止または再生するための再生ボタンを表示または非表示にする。 | ・有効化:再生ボタンが表示されます。サイト訪問者は、スライドショーを一時停止または再生できます。 ・無効化:再生ボタンは表示されません。 注意:これらのオプションは、アイテムを自動でスライドするように設定した場合のみ表示されます。 |
スクロールの方向 | 訪問者がギャラリーをスクロールする方向。 | ・縦:訪問者はページを縦方向にスクロールし、さらに多くのアイテムを表示します。 ・横:ギャラリーの左右にある矢印ボタンをクリックすると、さらに多くのアイテムが表示されます。 |
画像の向き | ギャラリーアイテムの方向。 | ・横:アイテムは横方向に表示されます。これは、広角ショットや風景ショットに適しています。 ・縦:アイテムは縦方向に表示されます。これはポートレートやアップに適しています。 |
サムネイルのサイズ変更 | ギャラリーアイテムのサイズ。 | ・クロップ:ギャラリーアイテムは、ギャラリーのアイテムサイズに合わせて切り抜かれます。アイテムの画像比率を選択します。 ・フィット:ギャラリーアイテムのサイズが変更され、コンテンツ全体が表示されます。 |
画像の縦横比 | アイテムの幅と高さの比例関係。 | ギャラリーアイテムの比率を選択します。 |
サムネイルの位置 | ギャラリーのサムネイルの場所。 | ギャラリーのサムネイルの場所を選択します。 |
サムネイルのサイズ | ギャラリーのサムネイルのサイズ。 | スライダーをドラッグして、ギャラリーのサムネイル間のサイズを調整します。 |
サムネイルの間隔 | ギャラリーのサムネイル間の間隔。 | スライダーをドラッグして、ギャラリーのサムネイル間の間隔を調整します。 |
間隔 | ギャラリーアイテム間の間隔。 | スライダーをドラッグして、ギャラリーアイテム間の間隔を調整します。 |
表示密度 | ギャラリー内のアイテムの密度(数とサイズ)。密度が高いほど、小さなサイズのアイテムが多く表示されます。密度が低いほど、大きなサイズのアイテムが少なく表示されます。 | スライダーをドラッグして、密度を調整します。 |
自動で調整 / 表示枚数を設定 | ギャラリー各行のアイテム数。 | ・自動で調節: アイテムは、訪問者の画面に合わせて自動的に最適化されます。 ・表示枚数を設定:訪問者の画面サイズに関係なく、各行のギャラリーアイテムの数を選択します。「行ごとの画像数」スライダーをドラッグして、画像数を設定します。 |
「もっと見る」ボタン | 訪問者がクリックすると、ギャラリーでより多くのアイテムを読み込むための「もっと見る」ボタンを表示または非表示にする。 注意:このオプションは、「スクロールの方向」が縦の場合にのみ使用できます。 | ・有効化:ギャラリー下に「もっと見る」ボタンが表示されます。「もっと見る」ボタンをクリックしたときに、すべての画像を表示するか、もう 1 つのセクションのみを表示するかを選択します。 ・無効化: ギャラリーは、ページ読み込み時にすべて表示され、訪問者は詳細を見るためにボタンをクリックする必要はありません。 |
設定タブ
設定 | 説明 | オプション |
---|---|---|
クリック時のアクション | サイト訪問者がギャラリーアイテムをクリックしたときの動作を設定します。 | ・拡大表示で開く:ギャラリーアイテムが拡大モードで開きます。「デザイン」タブ拡大表示をカスタマイズします。 ・リンクを開く:サイト訪問者はリンク(ウェブアドレス、ページ、ライトボックスなど)に誘導されます。メディアマネージャーをクリックしてリンクを設定してください。 ・なし:サイト訪問者がギャラリーアイテムをクリックしても何も起こりません。 ・全画面表示で開く:ギャラリーアイテムは全画面で開きます。 |
ダウンロード | 訪問者が画像や動画をダウンロードするためのダウンロードアイコンを表示または非表示にします。 | ・有効化:ダウンロードアイコンが表示されます。サイト訪問者は、画像や動画をダウンロードすることができます(Wix フリー素材はダウンロード不可) ・無効化:ダウンロードアイコンは表示されません。 |
SNS シェアボタン | 訪問者がギャラリーアイテムを簡単にシェアできるように、SNS アイコンを表示または非表示にします。 | ・有効化:SNS シェアアイコン(Facebook、Twitter、Pintrest、Tumblr、Email)は表示されます。 注意:SNS シェアアイコンを表示するには、ギャラリーにホバーオーバーレイを適用してください。オーバーレイを表示したくない場合は、透明度を 0 に設定します。部分的なオーバーレイを選択する場合は、サイズを 40% 以上に設定してください。 ・無効化:SNS シェアアイコンは表示されません。 |
ハートアイコン | 訪問者がギャラリーアイテムをいいね!した際のハートアイコンを表示または非表示にします。 | ・有効化:ハートアイコンは表示されます。ギャラリーアイテムを「いいね!」した人数を公開したい場合に選択します。 注意: ハートアイコンを表示するには、ギャラリーにホバーオーバーレイを適用してください。オーバーレイを表示したくない場合は、透明度を 0 に設定します。部分的なオーバーレイを選択する場合は、サイズを 40% 以上に設定してください。 ・無効化:ハートアイコンは表示されません。 |
デザインタブ
設定 | 説明 | オプション |
---|---|---|
オーバーレイ・アイコン | オーバーレイの色を表示し、訪問者がギャラリーアイテムにマウスオーバーした際に表示されるギャラリーアイコンをカスタマイズします。 | ・オーバーレイのカバー:ギャラリーアイテムをオーバーレイで完全にカバーするか、部分的にカバーするかを選択します。 ・グラデーション:訪問者がギャラリーにマウスオーバーした際にブレンドカラーオーバーレイを表示するかどうかを選択します。カラーボックスをクリックしてグラデーションの色を選択し、スライダーをドラッグしてグラデーションの方向を変更します。アイコンのカラーボックスを選択して、ハートとダウンロードアイコンの色を選択します。 サイズを設定:部分オーバーレイのサイズをパーセントまたはピクセルで管理します。 ・サイズ:スライダーをドラッグするか、値を入力して部分オーバーレイのサイズを選択します。 オーバーレイの開始:部分オーバーレイを配置する位置を選択します。 ・余白:ギャラリーの枠線と部分オーバーレイの間の余白を調整します。 ・オーバーレイの色:訪問者がギャラリーにマウスオーバーした際にオーバーレイの色を表示するかどうかを選択します。カラーボックスをクリックして色を設定し、スライダーをドラッグして不透明度を変更します。 ・アイコンの色:カラーボックスをクリックして、ハートとダウンロードアイコンの色を選択します。 ・オーバーレイ効果:訪問者が画像にマウスオーバーした際に表示される効果を選択します。 |
テキスト | ギャラリーのテキストをカスタマイズします。 | ・表示情報:該当するチェックボックスを選択して、ギャラリーアイテムでタイトルと詳細を表示します。 ・表示位置:ギャラリーアイテムの上、下、または直接上にテキストを表示するかどうかを選択します。 ・情報にマウスオーバーした際の動作:訪問者が画像にマウスオーバーした際のテキストを表示、消す、変更なしから選択します。 注意:これらのオプションは、画像に情報を表示する設定にした場合のみ表示されます。(表示情報) ・タイトルのスタイル・色:タイトルテキストのフォントと色を選択します。 ・詳細のフォントのスタイル・色:タイトルのフォントと色を選択します。 ・横方向の配列:テキストの横方向の配列を選択します。 ・縦方向の配列:テキストの縦の配列を選択します。 |
ボタン | カスタマイズ可能なボタンをギャラリーに追加します。 | ・カスタムボタン:クリックすると、カスタムボタンが有効になります。 ・ボタンのテキスト:ボタンのテキストを入力します。 ・横方向の配列:ボタンの横方向の配列を選択します。 ・縦方向の配列:ボタンの縦の配列を選択します。 ・フォントのスタイル・色:ボタンテキストのフォントと色を選択します。 ・ボタンの色・不透明度:ボタンの色と不透明度を選択します。 ・枠線の太さ・色:ボタンの枠線の太さと色を選択します。 ・角の丸み: スライダーをドラッグして、ボタンの角の丸みを調整します。 |
矢印ボタン | 矢印ボタンを追加して、訪問者が自分のペースでギャラリーアイテムを閲覧できるようにします。位置、サイズ、色をカスタマイズできます。 | ・矢印ボタンを表示:トグルをクリックして、ギャラリーの矢印ボタンを表示または非表示にします。 ・矢印ボタンのサイズ:スライダーをドラッグして、矢印ボタンのサイズを調整します。 ・矢印ボタンの色:カラーボックスをクリックして、矢印ボタンの色を選択します。サイトカラーから選択するか、独自の色を選択します。 ・矢印ボタンの位置:該当するチェックボックスを選択して、ギャラリー内外に矢印を表示します。注意:ギャラリーに矢印を表示すると、ギャラリーアイテムの一部が隠れることがあります。 ・矢印の位置の基準::矢印をギャラリー本体、ギャラリー画像、またはテキストの中央に配置します。 ・横方向の余白:スライダーをドラッグして、矢印とギャラリーの枠線の間隔を調整します。 |
アイテムスタイル | ギャラリーアイテムのスタイルをカスタマイズします。 | ・枠線の太さ・色:ギャラリーアイテムの枠線の色と太さを選択します。 ・角の丸み: スライダーをドラッグして、ギャラリーアイテムの角の丸みを調整します。 ・影:アイテムの背後に影を表示または非表示にします。 ・マウスオーバー効果:訪問者がギャラリーアイテムにマウスオーバーしたときのテキストの動作。 ・画像の読み込み中:画像の読み込み中にぼやけた画像が表示されるか、色を表示するかを選択します。 |
スクロール効果 | ギャラリーにアニメーションを追加し、設定をさらにカスタマイズします。 | アニメーションをクリックしてギャラリーに追加します。 「アニメーションを編集」をクリックし、以下を調整します: ・トランジションスタイル:微妙な視覚効果を追加して、ギャラリーアイテムから次のギャラリーアイテムへのスムーズな流れを確保します。 ・所要時間:スライダーをドラッグして、スクロールアニメーションの再生時間を調整します。 |
詳細設定タブ
設定 | 説明 | オプション |
---|---|---|
動画再生 | 動画の再生方法を設定します。 | ・マウスオーバー:訪問者がギャラリーで動画の上にマウスを置くと、動画が再生されます。 ・自動再生:動画はギャラリーで自動的に再生されます。 ・クリックで再生:訪問者がギャラリーでクリックしたときに動画が再生されます。 |
音声付きで再生 | ギャラリー内の動画はデフォルトでミュートにされています。音声付きで再生する設定にできます。 | ・有効化:動画はギャラリービューで音声付きで再生されます。 ・無効化:動画はギャラリービューでミュートの状態で再生されます。拡大表示では、動画は常に音声付きで再生されます。 |
再生スピード | 動画の再生スピードを設定します。 | オプションから再生スピードを選択します。 |
動画をループ再生 | 動画のループ再生を設定します。 | ・有効化:動画はループ(継続)再生されます。 ・無効化:サイト訪問者が動画を再生するには、再生アイコンをクリックする必要があります。 |
再生ボタンを表示 | プロギャラリーで動画の再生アイコンを有効または無効にします。 | ・有効化:動画に再生アイコンが表示されます。 ・無効化:動画に再生アイコンは表示されません。 |
ギャラリーの方向 | ギャラリーアイテムを左から右または右から左に表示するかを選択します。 | ギャラリーアイテムを左から右または右から左に表示するには、該当するチェックボックスをクリックします。 |
解像度 | ギャラリーアイテムの解像度を選択します。 | スライダーをドラッグして、ギャラリー内の画像の解像度を調整します。 注意:高解像度を使用すると、画像の読み込みが遅くなる可能性があります。 |
シャープ補正 | ギャラリー画像をシャープにします。 | ・有効化:画像はシャープになります。補正量、範囲、しきい値をカスタマイズします。 ・無効化:画像はシャープではありません。 |
画像を WebP 形式に変換(おすすめ) | WebP はウェブ上の画像を 25〜35% 小さくする画像フォーマットです。サイトの読み込み時間を改善します。 | ・有効化:(推奨)画像は WebP 形式に変換されます。 ・無効化:画像は元のファイル形式で表示されます。これはサイトの読み込み時間に影響を与える場合があります。 |
画像のサイズを自動的に変更 | Wix は画像の読み込み時間を最適化し、サイト訪問者の閲覧体験を維持するために、ギャラリー画像のサイズを自動的に変更します。 | ドロップダウンをクリックして、画像のサイズを変更するタイミングを選択します。 ・常に有効(おすすめ):ギャラリー画像は、サイトの読み込み時間を短縮するために自動的にサイズ変更されます。 ・ギャラリーのみ:プロギャラリーのメインビューの画像のみがサイズ変更されます。拡大表示の画像は、元の解像度で表示されます。 ・なし:画像は元の解像度で読み込まれます。これはサイトの読み込み時間に影響を与える場合があります。 |
サイトでの変更を確認する:
エディタの上部バーで「プレビュー」をクリックすると、ギャラリーに加えた変更を確認できます。
お役に立ちましたか?
|