/* ============================================================ * placeholder.css * 2026 年版リニューアル用 — 差し替え対象画像/コンテンツを可視化 * * 使い方: * - を付けると枠線とラベルが表示される * - URL に ?placeholder=off を付けると JS が body クラスを外す * - 本番公開時はから class="placeholder-mode" を削除するだけ * * カテゴリ (data-placeholder 属性で指定): * design — 赤 : 年号入りロゴ/KV/OGP など、デザイナー作業必須 * content — 黄 : セッション情報・登壇者写真など、コンテンツ確定後に更新 * photo — 青 : 過去開催の様子・会場写真 (流用可だが要点検) * logo-vendor — 緑 : 協賛企業ロゴ (2026 確定後に追加/削除) * ============================================================ */ body.placeholder-mode .is-placeholder { position: relative; outline: 3px dashed #ff2244; outline-offset: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5); transition: outline-color 0.2s ease; } body.placeholder-mode .is-placeholder::after { content: attr(data-placeholder-label); position: absolute; top: -12px; left: -3px; z-index: 9999; background: #ff2244; color: #fff; font-family: -apple-system, "Segoe UI", sans-serif; font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 3px; white-space: nowrap; pointer-events: none; letter-spacing: 0.02em; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } /* カテゴリ別の色 */ body.placeholder-mode .is-placeholder[data-placeholder="design"] { outline-color: #ff2244; } body.placeholder-mode .is-placeholder[data-placeholder="design"]::after { background: #ff2244; content: "🎨 要デザイン: " attr(data-placeholder-label); } body.placeholder-mode .is-placeholder[data-placeholder="content"] { outline-color: #f5a623; } body.placeholder-mode .is-placeholder[data-placeholder="content"]::after { background: #f5a623; color: #1a1a1a; content: "📝 要更新: " attr(data-placeholder-label); } body.placeholder-mode .is-placeholder[data-placeholder="photo"] { outline-color: #4a90e2; } body.placeholder-mode .is-placeholder[data-placeholder="photo"]::after { background: #4a90e2; content: "📷 要点検: " attr(data-placeholder-label); } body.placeholder-mode .is-placeholder[data-placeholder="logo-vendor"] { outline-color: #7ed321; } body.placeholder-mode .is-placeholder[data-placeholder="logo-vendor"]::after { background: #7ed321; color: #1a1a1a; content: "🏢 協賛確定後: " attr(data-placeholder-label); } /* 大きい要素(セクション全体)を囲む場合、outline を内側に */ body.placeholder-mode .is-placeholder-block { position: relative; outline: 3px dashed #ff2244; outline-offset: -3px; padding-top: 24px !important; } body.placeholder-mode .is-placeholder-block::before { content: "⚠️ 差し替え対象セクション: " attr(data-placeholder-label); display: block; position: absolute; top: 0; left: 0; right: 0; background: #ff2244; color: #fff; text-align: center; font-family: -apple-system, "Segoe UI", sans-serif; font-size: 12px; font-weight: 700; padding: 4px 8px; z-index: 9999; } /* placeholder-mode 解除のヒント (画面右下にバッジ) */ body.placeholder-mode::before { content: "🛠 PLACEHOLDER MODE (?placeholder=off で非表示)"; position: fixed; bottom: 16px; right: 16px; z-index: 99999; background: rgba(255, 34, 68, 0.95); color: #fff; font-family: -apple-system, "Segoe UI", sans-serif; font-size: 11px; font-weight: 700; padding: 8px 14px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); pointer-events: none; letter-spacing: 0.03em; }