[ { "id": 2964, "title": "PRボックス_P-22", "icon": "", "keywords": [ "PRボックス", "CTA・訴求" ], "slug": "lazyblock/pr-box", "description": "", "category": "Lazyblocks Pro", "category_label": "Lazyblocks Pro", "supports": { "customClassName": true, "anchor": false, "html": false, "multiple": true, "inserter": true, "reusable": true, "color": false, "layout": false, "shadow": false, "spacing": false, "dimensions": false, "typography": false, "lock": true, "align": [ "wide", "full" ], "ghostkit": { "effects": false, "position": false, "spacings": false, "frame": false, "transform": false, "customCSS": false, "display": false, "attributes": false } }, "controls": { "control_2d0959426f": { "type": "text", "name": "pr_label", "default": "", "label": "一言説明タグ(上部)", "help": "", "child_of": "", "placement": "inspector", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_daa9cd4532": { "type": "text", "name": "pr_title", "default": "", "label": "タイトル", "help": "", "child_of": "", "placement": "inspector", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_fc6a374c95": { "type": "textarea", "name": "pr_desc", "default": "", "label": "説明文", "help": "", "child_of": "", "placement": "inspector", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_09e8574fec": { "type": "repeater", "name": "pr_features", "default": "", "label": "特徴リスト", "help": "", "child_of": "", "placement": "inspector", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_e6f9b945ce": { "type": "text", "name": "pr_btn_text", "default": "", "label": "ボタンテキスト", "help": "", "child_of": "", "placement": "inspector", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_3acbcd4fee": { "type": "textarea", "name": "pr_banner_code", "default": "", "label": "【新設】バナーHTMLコード", "help": "", "child_of": "", "placement": "inspector", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_bf1a664156": { "type": "text", "name": "pr_btn_url", "default": "", "label": "ボタンURL", "help": "", "child_of": "", "placement": "inspector", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_407a544bd3": { "type": "text", "name": "pr_note", "default": "", "label": "注釈（ボタン下）", "help": "", "child_of": "", "placement": "inspector", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_ft1a2c3d4e": { "type": "text", "name": "feature_text", "default": "", "label": "特徴バッジのテキスト", "help": "", "child_of": "control_09e8574fec", "placement": "content", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" } }, "code": { "output_method": "html", "editor_html": "", "editor_callback": "", "frontend_html": "
\r\n {{!-- プレースホルダー --}}\r\n {{#unless pr_label}}{{#unless pr_title}}{{#unless pr_banner_code}}{{#unless pr_btn_text}}\r\n
\r\n
✨
\r\n
高コンバージョンPRボックス
\r\n
右側の設定パネルから入力してください。
\r\n
\r\n {{/unless}}{{/unless}}{{/unless}}{{/unless}}\r\n\r\n {{#if pr_label}}\r\n
{{pr_label}}
\r\n {{/if}}\r\n\r\n {{#if pr_title}}\r\n

{{pr_title}}

\r\n {{/if}}\r\n\r\n {{#if pr_desc}}\r\n

{{pr_desc}}

\r\n {{/if}}\r\n\r\n {{#if pr_features}}\r\n
\r\n {{#each pr_features}}\r\n \r\n \r\n \r\n \r\n {{feature_text}}\r\n \r\n {{/each}}\r\n
\r\n {{/if}}\r\n\r\n {{#if pr_banner_code}}\r\n
\r\n {{{pr_banner_code}}}\r\n
\r\n {{/if}}\r\n\r\n {{#if pr_btn_text}}\r\n \r\n \r\n {{pr_btn_text}}\r\n \r\n \r\n {{/if}}\r\n\r\n {{#if pr_note}}\r\n
{{pr_note}}
\r\n {{/if}}\r\n
", "frontend_callback": "", "show_preview": "always", "single_output": true }, "style": { "block": "/* テーマA: 高級・信頼系 */\r\n.lzb-pr-box { background: #ffffff; border: 1px solid #cbd5e1; border-top: 4px solid #1e293b; border-radius: 8px; padding: 36px 32px; margin: 40px 0; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04); position: relative; overflow: hidden; opacity: 0; transform: translateY(20px); transition: all 0.8s ease; font-family: sans-serif; box-sizing: border-box; }\r\n.lzb-pr-box.is-visible { opacity: 1; transform: translateY(0); }\r\n.lzb-pr-label-wrapper { margin-bottom: 16px; }\r\n.lzb-pr-label-tag { background: #fbf9f1; color: #927239; border: 1px solid #e8e0c5; font-size: 12px; font-weight: bold; padding: 4px 12px; border-radius: 4px; }\r\n.lzb-pr-title { font-size: 24px; font-weight: 800; color: #0f172a; margin: 0 0 16px; line-height: 1.4; border: none; padding: 0; }\r\n.lzb-pr-desc { font-size: 15px; color: #475569; line-height: 1.7; margin-bottom: 24px; }\r\n.lzb-pr-features { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }\r\n/* 立体感のあるソリッドなバッジ */\r\n.lzb-pr-badge { display: inline-flex; align-items: center; background: #f1f5f9; color: #1e293b; padding: 6px 14px; border-radius: 4px; font-size: 13px; font-weight: 700; gap: 6px; border-left: 3px solid #d4af37; }\r\n.lzb-pr-badge svg { color: #d4af37; flex-shrink: 0; }\r\n/* 安っぽさを消したバナー枠 */\r\n.lzb-pr-banner-container { margin: 24px auto; padding: 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; text-align: center; }\r\n.lzb-pr-banner-container a, .lzb-pr-banner-container img { max-width: 100% !important; height: auto !important; margin: 0 auto; display: block; }\r\n.lzb-pr-banner-container img[width=\"1\"] { display: none !important; }\r\n/* 高級感のあるボタン */\r\n.lzb-pr-btn { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); color: #ffffff !important; text-decoration: none !important; padding: 18px; border-radius: 6px; font-size: 18px; font-weight: bold; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2); transition: all 0.3s ease; box-sizing: border-box; }\r\n.lzb-pr-btn:hover { background: #0f172a; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.3); }\r\n.lzb-btn-arrow { transition: transform 0.3s ease; }\r\n.lzb-pr-btn:hover .lzb-btn-arrow { transform: translateX(6px); }\r\n/* 光沢アニメーション */\r\n.lzb-btn-shine { position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: shine 3s infinite; }\r\n@keyframes shine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }\r\n.lzb-ripple-effect { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: scale(0); animation: lzbRippleAnim 0.6s linear; pointer-events: none; }\r\n@keyframes lzbRippleAnim { to { transform: scale(4); opacity: 0; } }\r\n.lzb-pr-note { text-align: center; font-size: 12px; color: #64748b; margin-top: 16px; }\r\n@media (max-width: 600px) { .lzb-pr-box { padding: 24px 16px; margin: 24px 0; } .lzb-pr-btn { font-size: 16px; padding: 16px; } }", "editor": ".lzb-pr-box { opacity: 1 !important; transform: translateY(0) !important; }\r\n.lzb-placeholder { background: #f8fafc; border: 2px dashed #94a3b8; border-radius: 8px; padding: 40px 24px; text-align: center; color: #475569; margin: -16px; }\r\n.lzb-placeholder-icon { font-size: 32px; margin-bottom: 12px; }\r\n.lzb-placeholder-title { font-size: 18px; font-weight: bold; color: #334155; margin-bottom: 8px; }\r\n.lzb-placeholder-text { font-size: 14px; line-height: 1.6; }\r\n.lzb-pr-btn, .lzb-pr-banner-container a { pointer-events: none; }" }, "script": { "view": "document.addEventListener('DOMContentLoaded', function() {\r\n const observerOptions = { root: null, rootMargin: '0px', threshold: 0.15 };\r\n const animateObserver = new IntersectionObserver((entries, observer) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('is-visible');\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n document.querySelectorAll('.js-lzb-animate').forEach(box => animateObserver.observe(box));\r\n\r\n document.querySelectorAll('.js-lzb-ripple').forEach(button => {\r\n button.addEventListener('click', function(e) {\r\n const rect = this.getBoundingClientRect();\r\n const x = e.clientX - rect.left;\r\n const y = e.clientY - rect.top;\r\n const ripple = document.createElement('span');\r\n ripple.classList.add('lzb-ripple-effect');\r\n const diameter = Math.max(rect.width, rect.height);\r\n ripple.style.width = ripple.style.height = `${diameter}px`;\r\n ripple.style.left = `${x - diameter / 2}px`;\r\n ripple.style.top = `${y - diameter / 2}px`;\r\n this.appendChild(ripple);\r\n setTimeout(() => ripple.remove(), 600);\r\n });\r\n });\r\n});" }, "styles": [], "condition": [], "edit_url": null, "provide_context_to_blocks": "", "custom_context_slug": "", "allowed_blocks": "", "ancestor": "" } ]