高度なギャラリーブロックを使用すると、SeedProdページに単一または複数の画像ギャラリーを簡単に組み込むことができます。このブロックを使用すると、列、間隔、オーバーレイ、インタラクティブ効果のオプションを使用して、画像の表示方法を完全に制御できます。
ポートフォリオの紹介、商品写真の表示、フォトギャラリーの作成、チームメンバーの紹介など、高度なギャラリーブロックは、訪問者を惹きつける視覚的に魅力的な画像コレクションを作成するために必要な柔軟性とスタイリングオプションを提供します。
高度なギャラリーブロックをページに追加する
次の手順に従って、SeedProdページに高度なギャラリーブロックを追加します。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、高度なギャラリーブロックをページの目的のセクションにドラッグアンドドロップします。
高度なギャラリーブロックは、デザイン > 高度な設定の下にあり、ページの任意のセクションにドラッグできます。
ステップ2：コンテンツ設定を構成する
追加したら、高度なギャラリーブロックをクリックして設定を開きます。コンテンツタブで、画像を追加し、ギャラリーの表示方法を設定できます。
ギャラリー画像：
- タイプ：単一（画像1枚）または複数（画像ギャラリー）の表示モードを選択します
- 画像 / 新規画像を選択：単一タイプの場合、メディアライブラリから画像を選択するにはクリックします
- ギャラリー画像を追加：複数タイプの場合、一度に複数の画像を選択してギャラリーを作成するにはクリックします。必要な数の画像を選択できます
単一画像を表示するには「単一」、複数画像のギャラリーを作成するには「複数」を選択します。
メディアライブラリから複数の画像を選択するには、「ギャラリー画像を追加」をクリックします。
設定：
- 列：ギャラリーグリッドの列数を設定します。列数が多いほどレイアウトはタイトになり、列数が少ないほど各画像が目立ちます
- 間隔：ギャラリー内の画像の間のギャップを制御します。この値を調整して、タイトまたはゆったりとしたレイアウトを作成します
- リンク：画像をクリックしたときのリンク先を選択します。オプションには、なし（リンクなし）、メディアファイル（フルサイズの画像を開く）、またはカスタムURL（特定のページにリンク）があります
- アスペクト比：画像の比率を選択します。オプションには、1:1（正方形）、3:2、4:3、9:16（縦長）、16:9（横長）、21:9（超広角）があります。これにより、すべての画像が均一に表示されます
- 画像サイズ：表示する画像のサイズバージョンを選択します：サムネイル、中、または大。サイズが大きいほど詳細が表示されますが、読み込みは遅くなります
オーバーレイ：
- 背景オーバーレイ：画像の上に表示されるカラーオーバーレイを有効または無効にするには切り替えます。これにより、テキストや情報が際立ちます
- タイトル：画像オーバーレイとして表示するものを選択します。オプションには、なし、タイトル、キャプション、代替テキスト、または画像メタデータの説明があります
- 説明: 説明オーバーレイとして表示するものを選択します。オプションには、なし、タイトル、キャプション、代替テキスト、または説明があります。
- テキストの色: オーバーレイテキストの色を設定して、コントラストと読みやすさを確保します。
- 背景色: テキストの後ろに表示されるオーバーレイの背景色を選択します。
- ヘッダーのタイポグラフィ: フォントファミリー、サイズ、太さ、スタイルを含む、オーバーレイタイトルのフォントプロパティをカスタマイズします。
設定セクションでは、列、間隔、リンク、アスペクト比、画像サイズ、オーバーレイオプションをカスタマイズできます。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、高度なギャラリーブロックの視覚的な外観をカスタマイズできます。
スタイル:
- 画像の影: 画像に影の効果を追加して奥行きを出します。なし、ヘアライン、小、中、大、特大、2倍特大、または下部ドロップシャドウから選択します。
- 画像の境界線: ギャラリー画像の周りに境界線を表示します。
- 境界線の半径: 画像の角の丸みを制御します。値が大きいほど角が丸くなり、ゼロはシャープな角を作成します。
- 境界線のスタイル: 境界線の外観を選択します: 実線（連続線）、点線（小さな点）、または破線（短い線）。
- 境界線の色: 画像の境界線の色を選択します。
- 境界線の幅: 各辺（上、右、下、左）の境界線の太さを設定します。これにより、独自の境界線効果を作成できます。
間隔：
- マージン: ギャラリーブロックの外側の間隔（上、右、下、左）を制御します。これにより、ギャラリーと周囲の要素の間にどれだけのスペースが表示されるかが決まります。
- パディング: ギャラリーブロックの内側の間隔（上、右、下、左）を調整します。これにより、ギャラリーコンテンツとそのエッジの間に十分なスペースが生まれます。
属性:
- CSS ID: ギャラリーブロックの一意の自動生成IDを表示します。このIDは、カスタムスタイリングまたはJavaScriptターゲティングのためにSeedProdによって自動的に作成されます。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するために、カスタムCSSクラスを追加します。
- カスタム属性: ギャラリーラッパー要素に任意のHTML属性を追加します。各属性を新しい行に、属性名|値の形式で入力します（例: data-gallery|portfolio）。
デバイス表示:
- デスクトップで非表示: デスクトップ画面でギャラリーブロックを非表示にします。
- タブレットで非表示: タブレットデバイスでギャラリーブロックを非表示にします。
- モバイルで非表示: モバイルデバイスでギャラリーブロックを非表示にします。
アニメーション効果:
- 表示アニメーション: ギャラリーが表示領域にスクロールインしたときに再生されるさまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、ローテートインなどがあります。これにより、視覚的な興味を引き、ギャラリーに注目を集めることができます。
高度な設定タブでは、画像の影、境界線、間隔、属性、デバイスの表示設定、アニメーション効果のオプションが提供されます。
ステップ4：変更を保存
高度なギャラリーブロックの設定と外観のカスタマイズが完了したら、必ず作業を保存してください。
高度なギャラリーブロックをページに追加しました！この強力なブロックを使用すると、レイアウト、スタイリング、インタラクティブエフェクトを完全に制御して、単一または複数の画像ギャラリーを表示できます。さまざまなカラムレイアウト、アスペクト比、オーバーレイ スタイルを試して、ブランドに完全に一致し、視聴者を引き付けるギャラリーを作成してください。