実際と少し異なる場合があります。
オーバーレイ
実際と少し異なる場合があります。
- オーバーレイ
- パターン
- イメージ
- カラー
オーバーレイの反映
ポイント:
背景要素の上に重ねる色レイヤーを設定します。写真や動画上の可読性調整に有効です。
この設定で変わること:
被写体の明暗差を均して、文字を読みやすくできます。
調整のコツ:
まず単色で濃度を決め、必要な場合のみグラデーションに展開すると破綻しにくいです。
設定項目
Color / Gradient: 単色またはグラデーションを設定し、背景表現を調整します。Opacity: 不透明度を設定し、要素全体の見え方を調整します。Blend Mode: 合成モードを選択し、背景と文字の重なり方を最適化します。Reset: このセクションの設定を初期状態へ戻します。レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。
オーバーレイはボタン背景の最前面レイヤーとして描画されます。背景画像やカラーの上に重なるため、画像の色味を活かしつつ可読性を確保したい場合に有効です。ホバー状態のオーバーレイも個別に設定可能です。
パターン
実際と少し異なる場合があります。
- オーバーレイ
- パターン
- イメージ
- カラー
パターンの反映
ポイント:
背景パターンの種類と強度を設定します。情報量を増やしつつ単調さを避けられます。
この設定で変わること:
テクスチャ感が追加され、無地より表情が出ます。
調整のコツ:
主役はあくまで文言なので、パターンのコントラストは控えめにすると実運用で安定します。
設定項目
Pattern Type: パターン種類を選択し、背景の質感を決めます。Pattern Color: パターン色を設定し、背景とのコントラストを調整します。Pattern Size: パターンの大きさを設定し、密度感を調整します。Pattern Opacity: パターン透明度を設定し、装飾の主張を調整します。Blend Mode: 合成モードを選択し、背景と文字の重なり方を最適化します。レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。
パターンはSVGベースで描画されるため、高解像度ディスプレイでも劣化しません。ホバー状態のパターンも個別に設定可能です。パターン色は背景色との組み合わせで見え方が大きく変わるため、背景カラーと同時に調整することを推奨します。
イメージ
MEDIA TYPE
実際と少し異なる場合があります。
- オーバーレイ
- パターン
- イメージ
- カラー
イメージの反映
ポイント:
画像や動画の表示方法を設定します。フィット、位置、反復で見え方が大きく変わります。
この設定で変わること:
同じ素材でも設定次第で訴求力が大きく変化します。
調整のコツ:
まずFitを決めてから位置調整し、最後にOpacityやOverlayで可読性を仕上げる順序が効率的です。
設定項目
- メディア種別（画像 / 動画）: 背景に使用するメディア種類を選択します。
- 画像: 画像選択、
Repeat、Fit Method、Rotation (deg)、Opacity: 画像背景の表示方法を調整し、見切れと可読性を最適化します。 - 動画:
Video URL (MP4 / YouTube / Vimeo)、Apply: 動画ソースを指定し、背景動画を適用します。 - 動画表示:
Video Fit、Video Position X、Video Position Y: 動画の収まり方と表示位置を調整します。 - ポスター:
Poster URL、Remove Poster、Poster Fit、Poster Position X/Y: 読み込み前に表示する静止画を設定し、表示崩れを防ぎます。 レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。
画像選択UI（Image）
MEDIA TYPEをImageにすると、画像ソース選択タブが表示されます。- ソースタブは
メディアライブラリ/Search/画像選択/画像URLの4種類です。 - どのソースを使っても、最終的には同じ背景画像レイヤーに反映されます。
Image: Search
- ベンダー切り替え（Openverse / Unsplash / Pexels / Pixabay）と検索フォームで候補を絞り込みます。
- Openverse は APIキー不要で利用できます。Unsplash / Pexels / Pixabay は検索API設定（APIキー等）が必要で、未設定の場合は検索候補を取得できません。
- キーワードチップ（例: ビジネス / 人物 / 自然）からも即時検索できます。
- 利用前に各サービスの利用規約・ライセンス条件を確認してください。
Image: メディアライブラリ
- プリセットカテゴリ（例: すべて / 自然 / ライフスタイル / フード）で一覧を絞り込みます。
- 一覧から選択した画像が背景レイヤーに反映されます。
- 大きな画像を使うと表示は重くなるため、必要サイズに最適化した画像を推奨します。
Image: 画像URL
- 画像URL入力欄に
https://...形式で指定し、適用ボタンで反映します。 - 404やCORS等で取得できないURLは表示されません。
- URL直指定は移行やCDN切替で切れやすいため、公開運用では定期チェックを推奨します。
Video選択UI（Video）
MEDIA TYPEをVideoにすると、動画URL/動画検索とポスター設定が表示されます。- 動画検索を利用する場合も、利用する各ベンダーのAPI設定（APIキー等）が必要です。未設定時は検索結果が表示されません。
Video FitとVideo Position X/Yで動画のトリミング位置を調整します。Posterは動画未再生時のフォールバック画像です。モバイルでは特に重要です。
PRO機能（動画）:
背景の動画設定（Video URL / 動画表示 / ポスター）は有料版（ZenBlocks PRO）で利用できる機能です。
背景画像のレイヤー構造は下から順に「カラー → イメージ → パターン → オーバーレイ」です。各レイヤーは
z-index（カラー: 0、イメージ: 1、パターン: 2、オーバーレイ: 3）で管理され、すべてにpointer-events: noneが適用されるためクリック操作を妨げません。ホバー状態の画像設定も個別に切り替え可能です。
動画背景の制限:
モバイル端末（iOS / Android）では、動画の自動再生はミュート状態でのみ許可されるブラウザ仕様があります。本ブロックはmuted・playsinline・loop・autoplayを自動付与しますが、端末やブラウザの設定により自動再生がブロックされるケースがあります。ポスター画像の設定を強く推奨します。 対応動画ソース: YouTube（youtube-nocookie.com 経由のプライバシー強化モードで埋め込み）、Vimeo、直接ファイルURL（MP4等）。画像/動画の排他制御:
メディア種別で「動画」を選択すると、背景画像レイヤーはdisplay: noneで非表示になります。画像と動画は同時に表示されません。
カラー
実際と少し異なる場合があります。
- オーバーレイ
- パターン
- イメージ
- カラー
カラーの反映
ポイント:
ベースカラーを設定します。レイヤー構成の土台になる色です。
この設定で変わること:
オーバーレイや文字色との関係で最終印象が決まります。
調整のコツ:
単体で映える色より、文字と背景の組み合わせで読める色を優先してください。
設定項目
Color / Gradient: 単色またはグラデーションを設定し、背景表現を調整します。Alpha: 透明度を設定し、重なりの強さを調整します。- グラデーション利用切り替え: 単色とグラデーションを切り替え、背景表現を変更します。
Reset: このセクションの設定を初期状態へ戻します。レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。
グラデーションを使用すると、複数色の滑らかな遷移で視覚的な奥行きを表現できます。ホバー状態のカラーも個別に設定可能で、ホバー時のグラデーション変化も実現できます。背景レイヤーの最下層として機能するため、上層のオーバーレイ・パターン・イメージとの色味バランスを考慮してください。
ホバー時のカラートランジション:
背景カラーのホバー遷移は、内部的にクロスフェード方式（通常状態とホバー状態を別レイヤーで重ね、opacity で切り替える）で実装されています。そのため、通常＝単色 → ホバー＝グラデーション（またはその逆）の切り替えでもトランジションが滑らかに動作します。
トランジション
実際と少し異なる場合があります。
背景トランジションの反映
ポイント:
通常状態からホバー状態への変化速度を設定します。操作時の「気持ちよさ」を決める項目です。
この設定で変わること:
速すぎると変化に気づかず、遅すぎると反応が鈍く感じられます。
調整のコツ:
まずDuration 200〜350msを基準にし、演出が必要な箇所だけ遅延やカスタムイージングを追加します。
設定項目
Duration (ms): 変化にかける時間を設定し、反応の速さを調整します。Delay (ms): 変化開始までの待機時間を設定し、演出タイミングを調整します。Easing: 速度変化のカーブを設定し、動きの印象を整えます。Custom Value: カスタムイージング値（CSScubic-bezier形式）を指定し、背景変化の速度感を細かく調整します。Reset: このセクションの設定を初期状態へ戻します。
この背景トランジションは、オーバーレイ・パターン・イメージ・カラーすべての背景要素のホバー遷移に適用されます。スタイル設定のトランジションとは独立しているため、背景だけ異なる速度で変化させる演出が可能です。
サムネイル・バンドとの違い:
背景設定はボタン全体を覆う最下層レイヤーのため、サイズ・ボーダー・角丸・ポジション・トランスフォーム（Skew）・透明度（個別パネル）の設定がありません。これらはサムネイルやバンドには用意されています。一方、背景設定にはパターンがあり、サムネイルにはパターンがありません。動画背景のポスター設定は背景設定が最も詳細です。