画像・動画が表示されない時のチェック – ZenBlocks buttonBasic
結論
画像・動画が表示されない原因は、**メディアの未設定・ファイルパスの不整合・オーバーレイの不透明度が高すぎる・サイズ設定の問題**のいずれかです。メディアの種類（背景画像 / 背景動画 / サムネイル）ごとに確認ポイントが異なります。
—
原因
- **メディアが設定されていない**: メディアライブラリから選択されていないか、URLが空の状態
- **ファイルが削除・移動された**: メディアライブラリからファイルを削除したが、ブロックの参照が残っている
- **オーバーレイが不透明**: 背景設定のオーバーレイの Alpha が 1.0（完全不透明）になっていてメディアが隠れている
- **サイズ・位置の設定**: Background Size が `0` や、Position がボタン領域外を指している
- **表示設定で非表示**: 表示設定パネルでサムネイルや背景の表示が無効化されている
解決手順
- 背景設定パネルを開く
- 画像 URL / 動画 URL が正しく設定されているか確認
- メディアライブラリで該当ファイルが存在するか確認
- 別の画像に差し替えて表示されるかテスト
- サムネイル設定パネルを開く
- 画像が選択されているか確認
- サムネイルの表示/非表示トグルが有効か確認
- 背景設定パネルのオーバーレイセクションを開く
- オーバーレイカラーの **Alpha（透明度）** を確認
- Alpha が 1.0（完全不透明）の場合、背景画像・動画は完全に隠れます
- 0.3〜0.6 程度に調整して画像を透かす
- Background Size の設定を確認（`cover` / `contain` / カスタム）
- Background Position の設定を確認（`center center` が安全）
- カスタムサイズで `0px` や `0%` になっていないか確認
- ブラウザの開発者ツール（F12）でネットワークタブを開く
- 画像ファイルのリクエストが 404 エラーを返していないか確認
- CSSキャッシュをクリアして再確認
注意点
サムネイルと背景画像は独立した設定です。サムネイルはボタン内に画像枠として表示され、背景画像はボタン全体の背景に使われます。両方を同時に使う場合は重なり順に注意してください。
動画背景は自動再生の制約があります（特にモバイル）。動画が表示されない場合は FAQ: モバイルで動画背景が再生されない も参照してください。