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