ビフォア・アフター切り替えブロックは、SeedProdページ上でインタラクティブな画像比較を作成できます。このブロックは2枚の画像を並べて表示し、カスタマイズ可能なスライダーハンドルを訪問者がドラッグすることでビフォアとアフターの状態を切り替えられるため、魅力的な視覚的比較体験を提供します。
ビフォア・アフター比較は、変身、製品の改良、デザインの変更、減量効果、住宅リフォーム、写真編集の効果、あるいは変化の影響を視覚的に示したいあらゆる場面に最適です。インタラクティブなスライダーにより、訪問者は自分のペースで違いを簡単に確認できます。
ページに「前後の比較」切り替えブロックを追加する
SeedProdページに「Before After Toggle」ブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン ＞ ブロック の下にある「前後切り替え」ブロックを、ページの目的のセクションにドラッグ＆ドロップします。
「ビフォア・アフター切り替え」ブロックは、デザイン＞詳細設定の下にあり、ページの任意のセクションにドラッグできます。
ステップ2: コンテンツ設定の構成
追加後、「Before After Toggle」ブロックをクリックして設定を開きます。「コンテンツ」タブで比較画像をアップロードし、スライダーの動作を設定できます。
画像：
- 比較画像（変更前）：左側（または上部）に表示される「変更前」の画像を選択するか、「新しい画像を選択」をクリックしてアップロードしてください。
- ご自身の画像を使用するか、ストック画像を使用するか：お使いのコンピューターからご自身の画像をアップロードするか、ストック画像ライブラリから選択するかを選択してください
- 画像ソース:選択した「変更前」画像のソースURLを表示します
- Beforeラベル:変更前の画像上に表示されるカスタムテキストを入力してください（例: 「変更前」「オリジナル」「2023年」）。これにより、閲覧者が表示内容を理解しやすくなります
- アフター画像：比較画面の右側（または下部）に表示される「アフター」画像をアップロードまたは選択するには、「新しい画像を選択」をクリックしてください
- ご自身の画像を使用するか、ストック画像を使用するか：アフター画像用に、ご自身の画像をアップロードするか、ストックライブラリから選択するかを選択してください
- 画像ソース:選択したアフター画像のソースURLを表示します
- アフターラベル:アフター画像の上に表示されるカスタムテキストを入力してください（例: 「アフター」、「強化済み」、「2024」）
オリエンテーション：
- スライダーの向き：縦方向（スライダーが上下に移動）または横方向（スライダーが左右に移動）から選択します。横方向は並列比較で最も一般的です。
- 整列:コンテナ内の比較ブロック全体の配置を設定する
- マウスオーバー時の自動移動:比較項目にマウスを乗せた際にスライダーが自動で移動する機能を有効化します。有効時はクリックやドラッグなしでカーソルに追従します
- オーバーレイカラー：画像に半透明のカラーオーバーレイを追加し、ユニークな視覚効果を実現したり、ラベルを目立たせたりできます
ビフォーアフター画像をアップロードし、ラベルを追加し、スライダーの方向と動作を設定してください。
比較ハンドル:
- 初期オフセットの設定：ページ読み込み時にスライダーが開始する位置をパーセンテージで設定します（例：50は中央から開始、25は「変更前」画像をより多く表示）
- ハンドルカラー：スライダーのハンドルと画像間の区切り線の色を選択してください
- ハンドル厚さ：2つの画像を分ける境界線の幅を調整します
- 円形ハンドル幅：訪問者がスライダーを移動するためにドラッグする円形ハンドルのサイズを制御します
- 円半径：ハンドル円の丸みを調整します。値が大きいほどハンドルはより円形になります
- 三角形のサイズ：ハンドル上に表示される方向矢印のサイズを設定します。ドラッグ方向を示します。
比較ハンドル（比較対象）の外観をカスタマイズします。これには色、サイズ、開始位置が含まれます。
ステップ3：デザインのカスタマイズ
[詳細設定]タブでは、Before After Toggle ブロックの外観をカスタマイズできます：
ラベルスタイル変更前 / 変更後:
- ラベルのタイポグラフィ：前後のラベルのフォントプロパティ（フォントファミリー、サイズ、太さ、スタイルを含む）を制御します
- ラベルの色:画像に対して見やすいように、前後ラベルのテキスト色を設定します
- 背景色：ラベルの背後に背景色を追加し、特に画像の明るさが異なる場合に視認性を向上させます
スペース:
- マージン：Before After トグルブロックの周囲の余白（上、右、下、左）を制御します。これにより、比較要素と周囲の要素の間に表示されるスペースが決まります。
- パディング：Before After Toggle ブロック内の内側の間隔（上、右、下、左）を調整します。これにより、画像とブロックの端の間に余白が生まれます。
属性：
- CSS ID:Before After Toggle ブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングやJavaScriptのターゲット指定のためにSeedProdによって自動的に作成されます。
- カスタムクラス:テーマまたはカスタムCSSから特定のスタイルを適用するためのカスタムCSSクラスを追加します
- カスタム属性:ブロックラッパー要素に任意のHTML属性を追加します。各属性は改行で区切り、以下の形式で入力してください: 属性名|値 (例: data-comparison|before-after)
デバイスの可視性:
- デスクトップで非表示:デスクトップ画面で「変更前/変更後」切り替えブロックを非表示にする
- タブレットで非表示:タブレット端末では「前と後を切り替える」ブロックを非表示にします
- モバイルで非表示:モバイル端末で「Before After」切り替えブロックを非表示にする
アニメーション効果：
- 表示アニメーション：比較ブロックが表示領域にスクロールインする際に再生される様々なアニメーション効果から選択できます。バウンス、フェードイン、ズームイン、回転インなど多数のオプションが用意されています。これによりインタラクティブな比較に注目を集めます
[詳細設定]タブでは、ラベルのスタイル設定、間隔の調整、デバイスの表示設定およびアニメーションの設定を行うことができます。
ステップ4: 変更を保存する
Before After Toggle ブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
ページに「ビフォア・アフター切り替え」ブロックを追加できました！このインタラクティブブロックは、訪問者が自分のペースで2つの画像の違いを探索できる魅力的な視覚比較を実現します。さまざまなハンドル色、スライダーの向き、ホバー効果を試して、視聴者を惹きつけ、変化や改善を効果的に示す比較体験を作成しましょう。