[
  {
    "id": 2973,
    "title": "ビフォーアフター画像_P-24",
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\"><path d=\"M232,128l-32,32H56L24,128,56,96H200Z\" fill=\"#9aa8c9\"/><path d=\"M237.66,133.66l-32,32a8,8,0,0,1-11.32-11.32L212.69,136H43.31l18.35,18.34a8,8,0,0,1-11.32,11.32l-32-32a8,8,0,0,1,0-11.32l32-32a8,8,0,0,1,11.32,11.32L43.31,120H212.69l-18.35-18.34a8,8,0,0,1,11.32-11.32l32,32A8,8,0,0,1,237.66,133.66Z\" fill=\"#1a1a2e\"/></svg>",
    "keywords": [
      "メディア・ビジュアル",
      "ビフォーアフター画像"
    ],
    "slug": "lazyblock/before-after-slider",
    "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_eee9ef4294": {
        "type": "image",
        "name": "image_before",
        "default": "",
        "label": "Before画像",
        "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_49193046ae": {
        "type": "image",
        "name": "image_after",
        "default": "",
        "label": "After画像",
        "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": ""
      }
    },
    "code": {
      "output_method": "html",
      "editor_html": "",
      "editor_callback": "",
      "frontend_html": "{{#if image_before.url}}\r\n  {{#if image_after.url}}\r\n    <div class=\"lzb-compare-wrapper\">\r\n        <img class=\"lzb-compare-img lzb-img-after\" src=\"{{image_after.url}}\" alt=\"{{#if image_after.alt}}{{image_after.alt}}{{else}}After{{/if}}\" loading=\"lazy\" decoding=\"async\">\r\n\r\n        <img class=\"lzb-compare-img lzb-img-before\" src=\"{{image_before.url}}\" alt=\"{{#if image_before.alt}}{{image_before.alt}}{{else}}Before{{/if}}\" loading=\"lazy\" decoding=\"async\">\r\n\r\n        <input type=\"range\" min=\"0\" max=\"100\" value=\"50\" class=\"lzb-compare-slider\" aria-label=\"ビフォーアフター比較スライダー\" oninput=\"this.parentNode.style.setProperty('--slider-pos', this.value + '%')\">\r\n\r\n        <div class=\"lzb-compare-handle\">\r\n            <div class=\"lzb-compare-handle-circle\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"15 18 9 12 15 6\"></polyline></svg>\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\r\n            </div>\r\n        </div>\r\n    </div>\r\n  {{else}}\r\n    <div class=\"lzb-placeholder\">After画像をセットしてください</div>\r\n  {{/if}}\r\n{{else}}\r\n  <div class=\"lzb-placeholder\">Before画像をセットしてください</div>\r\n{{/if}}",
      "frontend_callback": "",
      "show_preview": "always",
      "single_output": true
    },
    "style": {
      "block": "/* 大枠のコンテナ */\r\n.lzb-compare-wrapper {\r\n    position: relative;\r\n    width: 100%;\r\n    max-width: 100%;\r\n    overflow: hidden;\r\n    border-radius: 12px; /* 全体を角丸に */\r\n    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* 美しい影 */\r\n    --slider-pos: 50%; /* スライダーの初期位置を50%（中央）に設定 */\r\n    line-height: 0;\r\n    user-select: none; /* スマホ操作時のテキスト選択を防止 */\r\n    margin: 2em 0;\r\n}\r\n\r\n/* 画像の共通設定 */\r\n.lzb-compare-img {\r\n    display: block;\r\n    width: 100%;\r\n    height: auto;\r\n    object-fit: cover;\r\n    pointer-events: none; /* 画像のドラッグ保存などを防ぎ、スライダー操作を優先 */\r\n}\r\n\r\n/* 下に敷くAfter画像 */\r\n.lzb-img-after {\r\n    position: relative;\r\n}\r\n\r\n/* 上に被せるBefore画像 */\r\n.lzb-img-before {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    /* 魔法の記述：スライダーの位置（--slider-pos）に合わせて右側を切り抜く */\r\n    clip-path: polygon(0 0, var(--slider-pos) 0, var(--slider-pos) 100%, 0 100%);\r\n}\r\n\r\n/* ユーザーが実際に操作する見えないinput要素 */\r\n.lzb-compare-slider {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    margin: 0;\r\n    opacity: 0; /* 完全に透明にして視覚から隠す */\r\n    cursor: ew-resize; /* 左右リサイズのカーソル */\r\n    z-index: 20; /* 一番手前に配置してクリック判定を全て拾う */\r\n    -webkit-appearance: none;\r\n    appearance: none;\r\n}\r\n\r\n/* 中央の白い線 */\r\n.lzb-compare-handle {\r\n    position: absolute;\r\n    top: 0;\r\n    bottom: 0;\r\n    left: var(--slider-pos);\r\n    width: 2px;\r\n    background-color: #ffffff;\r\n    transform: translateX(-50%);\r\n    z-index: 10;\r\n    pointer-events: none; /* クリック判定はinputに譲る */\r\n    box-shadow: 0 0 10px rgba(0,0,0,0.3);\r\n}\r\n\r\n/* つまみ（ハンドル）の丸い部分 */\r\n.lzb-compare-handle-circle {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: 44px;\r\n    height: 44px;\r\n    background-color: white;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    padding: 0 6px;\r\n    box-shadow: 0 4px 12px rgba(0,0,0,0.25);\r\n    color: #444;\r\n}\r\n\r\n.lzb-compare-handle-circle svg {\r\n    width: 18px;\r\n    height: 18px;\r\n}\r\n\r\n/* エディター用のプレースホルダー（未設定時の表示） */\r\n.lzb-placeholder {\r\n    padding: 40px;\r\n    text-align: center;\r\n    background: #f8f9fa;\r\n    border: 2px dashed #ced4da;\r\n    border-radius: 12px;\r\n    color: #6c757d;\r\n    font-weight: bold;\r\n    margin: 2em 0;\r\n}",
      "editor": ""
    },
    "script": {
      "view": ""
    },
    "styles": [],
    "condition": [],
    "edit_url": null,
    "provide_context_to_blocks": "",
    "custom_context_slug": "",
    "allowed_blocks": "",
    "ancestor": ""
  }
]