Wix プロギャラリー:ギャラリーをデザインする
読了時間:9分
デザインをカスタマイズして、ギャラリーをサイト上で目立つようにしましょう。レイアウト、色、フォントなどをカスタマイズすることで、ギャラリーにプロフェッショナルな仕上がりにできます。
プロギャラリーのデザインをカスタマイズする方法:
- エディタで Wix プロギャラリーをクリックします。
- 「設定」をクリックします。
- 「デザイン」タブをクリックします。
- カスタマイズする箇所を選択します:
オーバーレイ・アイコン
オーバーレイは画像の上に配置され、マウスで画像の上にカーソルを置くと、更に効果を追加します。この効果とアイコンをカスタマイズできます。
- 「オーバーレイ・アイコン」をクリックします。
- 「フルオーバーレイ」「部分オーバーレイ」のいずれかを選択して、下記のオプションでカスタマイズします。
- フルオーバーレイ:オーバーレイはギャラリーアイテム全体をカバーします。
- グラデーション:トグルをクリックしてグラデーションオーバーレイを有効化します。
- 不透明度・色 1 と 2:該当するカラーボックスをクリックしてグラデーションの色をカスタマイズします。スライダーを使用して、色の不透明度を調整します。
- グラデーションの方向:スライダーをドラッグしてグラデーションオーバーレイの方向を指定します。
- アイコンの色:カラーボックスをクリックして、ホバーで表示されるギャラリーアイコンの色を変更します。
- オーバーレイの色:カラーボックスをクリックして色を選択します。次に、スライダーをドラッグしてオーバーレイの色の不透明度を変更します。
- アイコンの色:カラーボックスをクリックし、ギャラリーアイコンの新しい色を選択します。
- グラデーション:トグルをクリックしてグラデーションオーバーレイを有効化します。
- 部分オーバーレイ:オーバーレイはギャラリーアイテムの一部のみをカバーします。
- サイズを設定:オーバーレイのサイズをパーセントまたはピクセルで管理します。
- サイズ:スライダーをドラッグするか、値を入力してオーバーレイのサイズを選択します。
- オーバーレイの開始:オーバーレイを配置する位置を選択します。
- 余白:スライダーをドラッグして、ギャラリーの枠線とオーバーレイの間のスペースを調整します。
- グラデーション:トグルをクリックしてグラデーションオーバーレイを有効化します。
- 不透明度・色 1 と 2:該当するカラーボックスをクリックしてグラデーションの色をカスタマイズします。スライダーを使用して、色の不透明度を調整します。
- グラデーションの方向:スライダーをドラッグしてグラデーションオーバーレイの方向を指定します。
- アイコンの色:カラーボックスをクリックして、ホバーで表示されるギャラリーアイコンの色を変更します。
- オーバーレイの色:カラーボックスをクリックして色を選択します。次に、スライダーをドラッグしてオーバーレイの色の不透明度を変更します。
- アイコンの色:カラーボックスをクリックし、ギャラリーアイコンの新しい色を選択します。
- フルオーバーレイ:オーバーレイはギャラリーアイテム全体をカバーします。
- オプションからオーバーレイ効果を選択します:
- なし:オーバーレイ効果は適用されません。
- フェードイン:オーバーレイがホバーで徐々に表示されます。
- 拡大表示:オーバーレイがホバーで展開されます。
- 上にスライド:オーバーレイがホバーでスライドします。
- 右にスライド:オーバーレイは、ホバーで右にスライドします。
テキスト
「レイアウト」タブで表示するように選択した場合、タイトルと詳細テキストのデザインをカスタマイズできます。「テキスト」オプションが表示されない場合は (下記の手順 1)、「レイアウト」タブに移動し、レイアウトを編集」をクリックし、「タイトル」と「詳細」横にあるチェックボックスを選択して表示してください。
- 「テキスト」をクリックします。
- 以下のオプションを使用して、テキストをカスタマイズします:
- 表示情報:表示したい情報(タイトル、詳細、スライドショーカウンター)横のチェックボックスを選択します。
注意:スライドショーカウンターオプションは、「自動でスライド」を有効にしている場合にのみ、スライドショーレイアウトで使用できます。
- タイトルのスタイル・色:タイトルテキストのフォントと色を選択します。
- 説明のフォントのスタイル・色:詳細テキストのフォントと色を選択します。
- 横方向の配列:横方向のテキストを左、中央、または右に揃えます。
- 縦方向の配列:縦方向のテキストを左、中央、または右に揃えます。
- テキストの縦方向の余白: スライダーをドラッグして、縦方向のテキストと枠線の間隔を変更します。
- テキストの横方向の余白: スライダーをドラッグして、横方向のテキストと境界線の間隔を変更します。
- 表示情報:表示したい情報(タイトル、詳細、スライドショーカウンター)横のチェックボックスを選択します。
アイテムスタイル
ギャラリー内の各画像またはビデオはアイテムです。通常時とホバー時の両方で、アイテムの見た目を変更できます。
- 「アイテムスタイル」をクリックします。
- 「アイテムスタイル」下でアイテムの通常時をカスタマイズします。
- 枠線の太さ・色:スライダーをドラッグして枠線の太さを変更し、カラーボックスをクリックして色を選択します。
- 角の丸み:スライダーをドラッグして、角をより丸くまたは四角くします。
注意:「枠線の太さ・色」、「角の丸み」オプションは、レイアウトの設定でサムネイルのクロップを選択し、(サムネイルではなく)メイン画像にのみ適用した場合にのみ使用できます。
- 影:影を有効または無効にするには、トグルをクリックします。
- 有効化:ギャラリーアイテムの周囲に影が表示されます。不透明度、色、ぼかし、影の方向とサイズをカスタマイズします。
- 無効化:ギャラリーアイテムの周囲に影は表示されません。
- 訪問者がマウスでギャラリーアイテムにカーソルを合わせた時の動作を選択します:
- なし :ホバーに効果は適用されません。
- ズームイン:ホバー時に画像をズームインします。
- ぼかし :画像はホバーするとぼやけます。
- フェードアウト:画像はホバーすると白黒になります。
- 縮小表示:ホバーすると画像が小さくなります。
- 反転:画像の色はホバー時に反転します。
- カラーイン:画像は、ホバーすると白黒からカラフルに変わります。
- ダーク:ホバーすると画像が少し暗くなります。
- 画像の読み込み中の動作を選択します:
- ぼやけた画像:読み込み中にぼやけた画像が表示されます。
- カラープレイスホルダ:画像の読み込み中に色付きのプレイスホルダが表示されます。
スクロール効果
訪問者がギャラリーをスクロールするときに表示されるアニメーション効果を追加します。トランジションスタイルを追加し、所要時間を調整することで、さらにアニメーションをカスタマイズすることができます。
注意:
- 利用可能なアニメーションは、ギャラリーのレイアウトによって異なります。
- アニメーション設定のカスタマイズは、横スクロールのレイアウトでのみ使用できます。
スクロール効果を追加する:
- 「スクロール効果」をクリックします。
- 訪問者がギャラリーをスクロールした時の動作を選択します:
- なし:スクロールに効果は適用されません。
- フェードイン:スクロール中に画像が徐々に表示されます。
- フェードアウト:スクロールすると画像が白黒になります。
- スライド:スクロールすると画像が上にスライドします。
- 拡大表示:スクロールすると画像が大きくなります。
- 縮小表示:スクロールすると画像が小さくなります。
- ズームアウト:スクロールすると画像がズームアウトします。
- 一色:スクロール時に画像に 1 つの色が適用されます。
アニメーションをカスタマイズする:
- 「アニメーションをカスタマイズ」をクリックします。
- アニメーションの設定をカスタマイズする方法:
- トランジションスタイル:ドロップダウンをクリックして、ギャラリーアイテムにアニメーション効果を適用します。この効果は、訪問者がアイテムを移動する際に適用されます。
- 所要時間:スライダーをドラッグして、アニメーションの所要時間を調整します。
ボタン
このセクションは、「レイアウト」タブで「もっと見る」ボタンを選択した場合に表示されます。
ここでは、「もっと見る」ボタンのテキスト、フォント、色、および枠線の丸みを変更できます。
ここでは、「もっと見る」ボタンのテキスト、フォント、色、および枠線の丸みを変更できます。
- 「ボタン」をクリックします。
- 以下のオプションを使用して、ボタンをカスタマイズします:
- ボタンのテキスト:ボタンに表示されるテキストを編集します
- タイトルのスタイル・色:ボタンのフォントと色を選択します。
- ボタンの色・不透明度:スライダーをドラッグしてボタンの色と不透明度を変更し、カラーボックスをクリックして色を選択します。
- 枠線の太さ・色:スライダーをドラッグして枠線の太さを変更し、カラーボックスをクリックして色を選択します。
- 角の丸み: スライダーをドラッグして、角の丸みを変更します。
矢印ボタン
矢印ボタンは、サムネイル、スライダー、スライドショー、カラムレイアウトで有効にできます。サイト訪問者がギャラリーを簡単に移動できるように、位置、サイズ、色をカスタマイズできます。
- 「矢印ボタン」をクリックします。
- トグルをクリックして、ギャラリーの矢印を有効にします。
- 以下のオプションを使用して矢印をカスタマイズします:
- 矢印のスタイル:矢印のデザインをクリックして選択するか、「追加」アイコン をクリックして独自のアイコンをアップロードします。
- 矢印の背景:ドロップダウンをクリックして、影、ボックス、または背景なしを選択します。
- 影:矢印の周りにわずかな影を追加します。
- ボックス:矢印の周りにボックスを追加します。カラーボックスをクリックしてボックスの色を変更し、該当するスライダーをドラッグして不透明度を調整し、角を丸くします。
- なし:矢印に背景は追加されません。
- 矢印のサイズ :スライダーをドラッグして、矢印ボタンのサイズを大きくしたり小さくしたりします。
- 矢印の色:カラーボックスをクリックして、矢印ボタンの色を選択します。サイトカラーから選択するか、独自の色を選択します。
- 矢印の位置:該当するチェックボックスを選択して、ギャラリー上または外に矢印を表示します。注意:ギャラリーに矢印を表示すると、ギャラリーアイテムの一部が隠れることがあります。
- 矢印の位置の基準:矢印をギャラリー本体、ギャラリー画像、またはテキストの中央に配置します。
- 横方向の余白:スライダーをドラッグして、矢印とギャラリーの枠線の間隔を調整します。
拡大表示
このセクションは、ユーザーがギャラリーアイテムをクリックした際に、プロギャラリーの「設定」パネルで「拡大表示で開く」を選択した場合に表示されます。ここから、サイトのデザインとブランドに合うようギャラリーの拡大表示をカスタマイズすることができます。
- 「拡大表示」をクリックします。
- 「拡大表示をカスタマイズ」をクリックし、次のオプションでギャラリーの拡大表示をお好みにカスタマイズします。
- 表示する情報を選択してください:タイトル、詳細またはリンクを表示するよう選択します。
- 表示位置を選択してください。情報を表示する位置を選択します。
- サイド:情報はギャラリーアイテムの右に表示されます。
- 下部:情報はギャラリーアイテムの下に表示されます。
- 表示する時を選択してください。:情報が表示される時を選択します:
- 常に表示:情報は常に表示されます。
- アイコンをクリックした時に表示:訪問者が拡大表示の左上で情報アイコンをクリックした時にのみ、情報が表示されます。
- 全画面表示を許可:訪問者は、ギャラリーアイテムを全画面で表示することができます。
- 背景色:カラーボックスをクリックして、拡大表示の背景色を選択します。サイトカラーから選択するか、色を追加します。
- アイコンの色:カラーボックスをクリックして拡大表示のアイコンの色を選択します。イトカラーから選択するか、色を追加します。
- タイトルスタイル:
- ドロップダウンメニューをクリックし、フォントピッカーでフォント、スタイルとサイズをカスタマイズします。
- カラーボックスをクリックし、タイトルテキストの色を変更します。
- 詳細スタイル:
- ドロップダウンメニューをクリックし、フォントピッカーでフォント、スタイルとサイズをカスタマイズします。
- カラーボックスをクリックし、詳細テキストの色を変更します。
- テキスト配置:テキストを左・中央・右に配置します。
ヒント:
プロギャラリーの矢印は、横スクロール で非表示にすることができます。
お役に立ちましたか?
|