ギャラリーブロックを使用すると、ウェブサイトのページに美しい画像ギャラリーを簡単に追加してスタイル設定でき、コンテンツの視覚的な魅力を高めることができます。
画像をアップロードし、表示する列数を選択し、リンクとサイズ設定を構成するだけで、コードを書く必要はありません。SeedProdの任意のページに、すっきりとしたグリッドベースの画像ギャラリーを追加する最も簡単な方法です。
ギャラリーブロックをページに追加する
SeedProdページにギャラリーブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、ギャラリーブロックをページの目的のセクションにドラッグアンドドロップします。
ブロックパネルからギャラリーブロックをドラッグし、ページレイアウトにドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、ギャラリーブロックをクリックして設定を開きます。コンテンツタブで、画像をアップロードし、ギャラリーの表示方法を構成します。
ギャラリー画像：
- 画像：ギャラリーに表示したい写真をアップロードします。WordPressメディアライブラリから一度に複数の画像を選択できます。
設定：
- 列：グリッドにギャラリー画像を配置するために使用する列数を1から10まで設定します。
- 間隔：ギャラリー画像の間のギャップを調整して、画像がどれだけ密接または緩やかに配置されるかを制御します。
- リンク：訪問者がギャラリー画像をクリックしたときに何が起こるかを選択します - なし（アクションなし）、メディアファイル（フルサイズの画像を開く）、または添付ファイル（画像のWordPress添付ファイルページにリンクする）。
- 画像サイズ：読み込むWordPressの画像サイズを選択します - サムネイル、中、または大。小さいサイズを選択すると、ページの読み込みパフォーマンスが向上します。
- 並べ替え：画像の並べ順を選択します - デフォルト（アップロードした順序）またはランダム（ページ読み込みごとにシャッフル）。
- ライトボックス：リンクがメディアファイルに設定されている場合、このオプションを有効にすると、クリックされた画像がページから移動する代わりに、フルスクリーンのライトボックスオーバーレイで開きます。
コンテンツタブでは、画像をアップロードし、列、間隔、リンクの動作、画像サイズ、表示順序を構成できます。
ステップ3：デザインをカスタマイズする
高度なタブでは、ギャラリーブロックの視覚的な外観をカスタマイズできます。
スタイル:
- 影：ギャラリー画像にドロップシャドウを適用します。なし、ヘアライン、小、中、大、特大、2倍特大、または下部ドロップシャドウから選択して、写真に深みと次元を追加します。
- テキストカラー：キャプションオーバーレイなど、ギャラリー内に表示されるテキストの色を設定します。
- 画像境界線：各ギャラリー画像の周りに境界線を追加します。境界線のスタイル（実線、点線、破線）、境界線の幅、境界線の色、境界線の半径（画像コーナーを丸くするため）、および画像の間隔（画像とその境界線の間のスペースを制御するため）を構成します。
間隔：
- マージン: ギャラリーブロックの外側の間隔（上、右、下、左）を制御します。これにより、ギャラリーとページ上の周囲の要素との間にどれだけのスペースが表示されるかが決まります。
- パディング: ギャラリーブロックの内側の間隔（上、右、下、左）を調整します。これにより、ギャラリーとブロックの端の間に余白が生まれます。
属性:
- CSS ID: ギャラリーブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングやJavaScriptのターゲット指定のためにSeedProdによって自動的に作成されます。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
- カスタム属性: ギャラリーラッパー要素に任意のHTML属性を追加します。各属性を新しい行に、属性名|値の形式で入力します（例: data-gallery|portfolio）。
デバイス表示:
- デスクトップで非表示: デスクトップ画面でギャラリーブロックを非表示にします。
- タブレットで非表示: タブレットデバイスでギャラリーブロックを非表示にします。
- モバイルで非表示: モバイルデバイスでギャラリーブロックを非表示にします。
アニメーション効果:
- 表示アニメーション: ギャラリーブロックが表示領域にスクロールインしたときに再生されるさまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、回転インなどがあり、訪問者がページをスクロールダウンする際に洗練された印象を加えます。
高度なタブには、シャドウプリセット、文字色、画像境界線のスタイル設定、間隔コントロール、デバイス表示オプションが用意されています。
ステップ4：変更を保存
ギャラリーブロックの設定と外観のカスタマイズが完了したら、必ず作業を保存してください。
ギャラリーブロックをページに追加しました！ギャラリーブロックを使用すると、写真、ポートフォリオ、または任意のビジュアルコンテンツをすっきりとしたグリッドレイアウトで簡単に表示できます。列数、間隔、シャドウスタイル、境界線のオプションをさまざまに試して、ページデザインを完璧に補完するギャラリーを作成してください。