画像カルーセルブロックを使用すると、SeedProdページに画像の回転スライドショーを表示できます。各スライドは、オプションのキャプション、ヘッダーテキスト、サブヘッダー、およびコールトゥアクションボタンをサポートしており、写真ギャラリー、注目の画像ショーケース、バナースタイルのヒーローセクションに柔軟なブロックとなっています。
カルーセルは、自動再生、ナビゲーション矢印、ライトボックス表示、画像オーバーレイ、および完全にカスタマイズ可能なタイポグラフィとアニメーション効果を備えたスライドごとのバナーコンテンツをサポートしています。
ページに画像カルーセルブロックを追加する
画像カルーセルブロックをSeedProdページに追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、画像カルーセルブロックを目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、画像カルーセルブロックをクリックして設定を開きます。コンテンツタブは、カルーセル画像とカルーセル設定の2つのセクションに分かれています。
カルーセル画像:
このセクションには、カルーセル内のすべてのスライドが表示されます。スライド行をクリックして個々の設定を展開するか、スライドをドラッグして並べ替えます。ホバー時に表示されるアイコンを使用して、スライドを複製または削除することもできます。
- 画像: このスライドの画像をWordPressメディアライブラリからアップロードまたは選択するか、直接画像URLを入力します。
- キャプション: キャプションが有効な場合に画像の下に表示される、オプションのキャプションテキストを入力します。
- ヘッダーテキストを表示: スライドにオーバーレイとして表示されるヘッダーおよびサブヘッダーテキストフィールドを表示するには、オンに切り替えます。
- ヘッダー: スライドオーバーレイに表示される見出しテキストを入力します（ヘッダーテキストを表示が有効な場合に表示されます）。
- サブヘッダー: スライドオーバーレイのヘッダーの下に表示されるサブヘッダーテキストを入力します（ヘッダーテキストを表示が有効な場合に表示されます）。
- ボタンを表示: スライドオーバーレイにコールトゥアクションボタンを追加するには、オンに切り替えます。
- ボタンテキスト: ボタンのラベルを入力します（ボタンを表示が有効な場合に表示されます）。
- ボタンリンク: ボタンがリンクするURLを入力します。設定アイコンをクリックして、「新しいウィンドウで開く」と「ノーフォロー」オプションを表示します。
カルーセルに新しいスライドを追加するには、リストの下部にある+ 画像を追加をクリックします。
カルーセル設定:
- ナビゲーションカラーモード: ナビゲーション矢印とドットの色を「ダーク」または「ライト」から選択して、画像とのコントラストを確保します。
- 表示するスライド数: 一度に表示するスライドの数を1から6の間で設定します。
- 自動再生: スライドが自動的に進むかどうかを制御するには、自動再生をオンまたはオフに切り替えます。
- 自動再生速度: スライド遷移間の遅延を秒単位で設定します（自動再生が有効な場合に表示されます）。
- キャプションを表示: 各スライドの下にキャプションテキストを表示するには、オンに切り替えます。
- ナビゲーションを表示: ナビゲーション矢印とドットをオンまたはオフに切り替えます。
- 画像オーバーレイカラー: カラーピッカーを使用して、各スライド画像の上にカラーオーバーレイを追加します。
- 画像オーバーレイ不透明度: オーバーレイの不透明度を0（透明）から1（完全に不透明）に設定します。
- キャプション配置: キャプションテキストの水平方向の配置を設定します — 左、中央、または右。
カルーセルバナー設定:
- 垂直位置: スライド上のヘッダー/ボタンオーバーレイコンテンツの垂直位置を、0から100のパーセンテージで設定します。
- 水平位置: オーバーレイコンテンツの水平位置を、0から100のパーセンテージで設定します。
- バナーボタンカラー: 各スライドのコールトゥアクションボタンの背景色を設定します。
- ボタンサイズ: バナーボタンのサイズを選択します — 小、中、大、特大、超特大。
- バナーボタン半径: 0から100pxの範囲でバナーボタンの境界線半径を設定し、角の丸みを制御します。
- ヘッダーテキスト配置: オーバーレイヘッダーテキストの水平方向の配置を設定します — 左、中央、または右。デバイスごとの値に対応しています。
- サブヘッダーテキスト配置: オーバーレイサブヘッダーテキストの水平方向の配置を設定します — 左、中央、または右。デバイスごとの値に対応しています。
- カルーセルボタン配置: オーバーレイボタンの水平方向の配置を設定します — 左、中央、または右。デバイスごとの値に対応しています。
ステップ3：テンプレートを選択（オプション）
テンプレートタブには、カルーセルのためのデザイン済みのスタイルプリセットが用意されています。いずれかのテンプレートサムネイルをクリックすると、境界線、影、画像スタイルの組み合わせがカルーセルのすべてのスライドに即座に適用されます。
ステップ4：デザインのカスタマイズ
高度な設定タブでは、画像カルーセルブロックのタイポグラフィ、画像スタイル、スペーシングをカスタマイズできます。
スタイル:
- キャプションタイポグラフィ: キャプションのフォントファミリー、太さ、サイズ、行の高さ、文字間隔、テキスト変換を微調整します。デバイスごとの値に対応しています。
- キャプションカラー: キャプションのテキストカラーを設定します。
- バナーヘッダータイポグラフィ: スライドオーバーレイヘッダーテキストのフォント設定を微調整します。
- バナーヘッダーカラー: スライドオーバーレイヘッダーのテキストカラーを設定します。
- バナーサブヘッダータイポグラフィ: スライドオーバーレイサブヘッダーテキストのフォント設定を微調整します。
- バナーサブヘッダーカラー: スライドオーバーレイサブヘッダーのテキストカラーを設定します。
- バナーボタンタイポグラフィ: スライドオーバーレイボタンテキストのフォント設定を微調整します。
スライダー画像スタイル:
- 影: 各スライド画像にドロップシャドウを追加します。なし、ヘアライン、小、中、大、特大、超特大から選択します。
- 画像境界線: 各スライド画像の周りに境界線を追加します。境界線半径コントロールで角を丸めることができます。
間隔：
- マージン: 画像カルーセルブロックの外側のスペーシング（上、右、下、左）を制御します。デスクトップ、タブレット、モバイルのデバイスごとの値に対応しています。
- パディング: 画像カルーセルブロック内の内側の余白（上、右、下、左）を調整します。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。
属性:
- CSS ID: 画像カルーセルブロックの自動生成された一意の識別子を表示します。これは、カスタムスタイリングまたはJavaScriptのターゲット設定のためにSeedProdによって自動的に作成されます。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
- カスタム属性: ブロックラッパー要素に任意のHTML属性を追加します。属性名を改行し、attribute-name|valueの形式で入力します。
デバイス表示:
- デスクトップで非表示: デスクトップ画面で画像カルーセルブロックを非表示にします。
- タブレットで非表示: タブレットデバイスで画像カルーセルブロックを非表示にします。
- モバイルで非表示: モバイルデバイスで画像カルーセルブロックを非表示にします。
アニメーション効果:
- 表示アニメーション: カルーセルブロックが表示領域にスクロールインする際のアニメーション効果を選択します。
- ヘッダーアニメーション効果: 各スライドが表示される際に、スライドオーバーレイのヘッダーテキストのアニメーションを選択します。
- サブヘッダーアニメーション効果: スライドオーバーレイのサブヘッダーテキストのアニメーションを選択します。
- ボタンアニメーション効果: スライドオーバーレイのボタンのアニメーションを選択します。
ステップ5：変更を保存
画像カルーセルブロックの設定と外観のカスタマイズが完了したら、必ず作業を保存してください。
ページに画像カルーセルブロックが正常に追加されました！カルーセルは、複数の画像をコンパクトで魅力的な形式で表示するのに最適な方法です。バナー設定を使用して、各スライドにオーバーレイテキストやコールトゥアクションを追加したり、シンプルな画像ギャラリーとしてそのまま使用したりできます。自動再生速度、ナビゲーションスタイル、画像オーバーレイを試して、ページに最適なカルーセルを作成してください。