[
  {
    "id": 2794,
    "title": "実践チェックリスト_P-19",
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\"><path d=\"M216,48V208a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V48a8,8,0,0,1,8-8H208A8,8,0,0,1,216,48Z\" fill=\"#9aa8c9\"/><path d=\"M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM224,48V208a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM208,208V48H48V208H208Z\" fill=\"#1a1a2e\"/></svg>",
    "keywords": [
      "checklist",
      "チェック",
      "リスト",
      "チェックリスト",
      "リスト・手順",
      "実践チェックリスト"
    ],
    "slug": "lazyblock/checklist-interactive",
    "description": "押せてチェックが付く実践チェックリスト（テキスト・画像・進捗バー対応）",
    "category": "Lazyblocks Pro",
    "category_label": "Lazyblocks Pro",
    "supports": {
      "customClassName": true,
      "anchor": true,
      "html": false,
      "multiple": true,
      "inserter": true,
      "reusable": true,
      "color": false,
      "layout": false,
      "shadow": false,
      "spacing": false,
      "dimensions": false,
      "typography": false,
      "lock": true,
      "align": [
        "wide"
      ],
      "ghostkit": {
        "effects": false,
        "position": false,
        "spacings": false,
        "frame": false,
        "transform": false,
        "customCSS": false,
        "display": false,
        "attributes": false
      }
    },
    "controls": {
      "control_cfdef5016a": {
        "type": "panel",
        "name": "",
        "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": "",
        "icon": "",
        "initial_open": "true",
        "endpoint": "false",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_7ebeee14a8": {
        "type": "color",
        "name": "brand_color",
        "default": "#1d9e75",
        "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": "",
        "alpha": "false",
        "palette": "true",
        "alongside_text": "",
        "output_format": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_c22cffc3a3": {
        "type": "text",
        "name": "list_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_6ddb9a4c16": {
        "type": "toggle",
        "name": "show_progress",
        "default": "true",
        "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": "",
        "checked": "true"
      },
      "control_f61f853878": {
        "type": "repeater",
        "name": "items",
        "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": "",
        "rows_min": "",
        "rows_max": "",
        "rows_label": "",
        "rows_add_button_label": "",
        "rows_collapsible": "true",
        "rows_collapsed": "true",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_a93cab20e5": {
        "type": "text",
        "name": "text",
        "default": "",
        "label": "項目のテキスト",
        "help": "",
        "child_of": "control_f61f853878",
        "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": ""
      },
      "control_3df487d69a": {
        "type": "image",
        "name": "image",
        "default": "",
        "label": "画像（任意）",
        "help": "",
        "child_of": "control_f61f853878",
        "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": "",
        "allow_insert_from_url": "true",
        "preview_size": "medium"
      }
    },
    "code": {
      "output_method": "php",
      "editor_html": "",
      "editor_callback": "",
      "frontend_html": "<?php\n// 項目が空のとき：エディタ用プレースホルダー\nif ( empty( $attributes['items'] ) ) :\n?>\n    <div class=\"lzb-cl-editor-placeholder\">\n        <div class=\"lzb-cl-ph-icon\">&#10003;</div>\n        <div class=\"lzb-cl-ph-title\">実践チェックリストが設置されました</div>\n        <div class=\"lzb-cl-ph-desc\">右サイドバーの<strong>「チェックリスト設定」&rarr;「チェック項目」&rarr;「＋追加」</strong>から項目を追加してください。各項目にテキストと画像（任意）を設定でき、メインカラーや進捗バーも変更できます。</div>\n    </div>\n<?php\n    return;\nendif;\n\n$brand_color = ! empty( $attributes['brand_color'] ) ? $attributes['brand_color'] : '#1d9e75';\n$list_title  = ! empty( $attributes['list_title'] ) ? $attributes['list_title'] : '';\n$show_prog   = ! isset( $attributes['show_progress'] ) || $attributes['show_progress'];\n$items       = $attributes['items'];\n$total       = count( $items );\n?>\n<div class=\"lzb-cl\" style=\"--lzb-cl-color:<?php echo esc_attr( $brand_color ); ?>\">\n    <?php if ( $list_title ) : ?>\n        <p class=\"lzb-cl-title\"><?php echo esc_html( $list_title ); ?></p>\n    <?php endif; ?>\n\n    <?php if ( $show_prog ) : ?>\n        <div class=\"lzb-cl-progress\">\n            <div class=\"lzb-cl-progress-bar\"><span class=\"lzb-cl-progress-fill\"></span></div>\n            <span class=\"lzb-cl-progress-text\">0 / <?php echo (int) $total; ?> 完了</span>\n        </div>\n    <?php endif; ?>\n\n    <ul class=\"lzb-cl-list\">\n        <?php foreach ( $items as $item ) :\n            $text = isset( $item['text'] ) ? $item['text'] : '';\n            $img  = '';\n            if ( ! empty( $item['image'] ) ) {\n                if ( is_array( $item['image'] ) && ! empty( $item['image']['url'] ) ) {\n                    $img = $item['image']['url'];\n                } elseif ( is_string( $item['image'] ) ) {\n                    $img = $item['image'];\n                }\n            }\n        ?>\n            <li class=\"lzb-cl-item\">\n                <label class=\"lzb-cl-label\">\n                    <input type=\"checkbox\" class=\"lzb-cl-check\">\n                    <span class=\"lzb-cl-box\"></span>\n                    <span class=\"lzb-cl-body\">\n                        <span class=\"lzb-cl-text\"><?php echo esc_html( $text ); ?></span>\n                        <?php if ( $img ) : ?>\n                            <img class=\"lzb-cl-img\" src=\"<?php echo esc_url( $img ); ?>\" alt=\"<?php echo esc_attr( $text ); ?>\" loading=\"lazy\">\n                        <?php endif; ?>\n                    </span>\n                </label>\n            </li>\n        <?php endforeach; ?>\n    </ul>\n</div>\n",
      "frontend_callback": "",
      "show_preview": "always",
      "single_output": true
    },
    "style": {
      "block": ".lzb-cl-editor-placeholder{border:2px dashed #1d9e75;border-radius:12px;padding:24px 20px;text-align:center;background:#f7faf9}\n.lzb-cl-ph-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#1d9e75;color:#fff;font-size:24px;line-height:1;margin:0 auto 10px}\n.lzb-cl-ph-title{font-size:1.1em;font-weight:700;margin-bottom:6px;color:#222}\n.lzb-cl-ph-desc{font-size:.9em;color:#666;line-height:1.7;max-width:520px;margin:0 auto}\n.lzb-cl-title{font-size:1.2em;font-weight:700;margin:0 0 .7em}\n.lzb-cl-progress{margin:0 0 1.2em}\n.lzb-cl-progress-bar{height:10px;border-radius:99px;background:#eaeaea;overflow:hidden}\n.lzb-cl-progress-fill{display:block;height:100%;width:0;background:var(--lzb-cl-color);border-radius:99px;transition:width .4s ease}\n.lzb-cl-progress-text{display:inline-block;margin-top:.45em;font-size:.9em;font-weight:600;color:var(--lzb-cl-color)}\n.lzb-cl-list{list-style:none!important;margin:0!important;padding:0!important}\n.lzb-cl-list li{list-style:none!important;margin:0 0 .6em!important;padding:0!important}\n.lzb-cl-list li:before{content:none!important}\n.lzb-cl-label{display:flex;align-items:flex-start;gap:.7em;padding:.85em 1em;border:1.5px solid #e5e5e5;border-radius:10px;cursor:pointer;transition:border-color .2s,box-shadow .2s;background:#fff}\n.lzb-cl-label:hover{border-color:var(--lzb-cl-color);box-shadow:0 2px 8px rgba(0,0,0,.05)}\n.lzb-cl-check{position:absolute;opacity:0;width:0;height:0}\n.lzb-cl-box{flex:0 0 auto;width:28px;height:28px;border:2px solid #ccc;border-radius:7px;margin-top:.05em;position:relative;transition:all .2s;background:#fff}\n.lzb-cl-box:after{content:\"\";position:absolute;left:9px;top:4px;width:6px;height:12px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg) scale(0);transition:transform .15s}\n.lzb-cl-check:checked + .lzb-cl-box{background:var(--lzb-cl-color);border-color:var(--lzb-cl-color)}\n.lzb-cl-check:checked + .lzb-cl-box:after{transform:rotate(45deg) scale(1)}\n.lzb-cl-check:checked ~ .lzb-cl-body .lzb-cl-text{color:#999;text-decoration:line-through}\n.lzb-cl-body{display:flex;flex-direction:column;gap:.5em;flex:1;min-width:0}\n.lzb-cl-text{font-weight:600;line-height:1.6;font-size:1.02em}\n.lzb-cl-img{max-width:100%;height:auto;border-radius:8px;border:1px solid #eee;margin-top:.3em}",
      "editor": ".lzb-cl-editor-placeholder{border:2px dashed #1d9e75;border-radius:12px;padding:24px 20px;text-align:center;background:#f7faf9}\n.lzb-cl-ph-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#1d9e75;color:#fff;font-size:24px;line-height:1;margin:0 auto 10px}\n.lzb-cl-ph-title{font-size:1.1em;font-weight:700;margin-bottom:6px;color:#222}\n.lzb-cl-ph-desc{font-size:.9em;color:#666;line-height:1.7;max-width:520px;margin:0 auto}\n.lzb-cl-title{font-size:1.2em;font-weight:700;margin:0 0 .7em}\n.lzb-cl-progress{margin:0 0 1.2em}\n.lzb-cl-progress-bar{height:10px;border-radius:99px;background:#eaeaea;overflow:hidden}\n.lzb-cl-progress-fill{display:block;height:100%;width:0;background:var(--lzb-cl-color);border-radius:99px;transition:width .4s ease}\n.lzb-cl-progress-text{display:inline-block;margin-top:.45em;font-size:.9em;font-weight:600;color:var(--lzb-cl-color)}\n.lzb-cl-list{list-style:none!important;margin:0!important;padding:0!important}\n.lzb-cl-list li{list-style:none!important;margin:0 0 .6em!important;padding:0!important}\n.lzb-cl-list li:before{content:none!important}\n.lzb-cl-label{display:flex;align-items:flex-start;gap:.7em;padding:.85em 1em;border:1.5px solid #e5e5e5;border-radius:10px;cursor:pointer;transition:border-color .2s,box-shadow .2s;background:#fff}\n.lzb-cl-label:hover{border-color:var(--lzb-cl-color);box-shadow:0 2px 8px rgba(0,0,0,.05)}\n.lzb-cl-check{position:absolute;opacity:0;width:0;height:0}\n.lzb-cl-box{flex:0 0 auto;width:28px;height:28px;border:2px solid #ccc;border-radius:7px;margin-top:.05em;position:relative;transition:all .2s;background:#fff}\n.lzb-cl-box:after{content:\"\";position:absolute;left:9px;top:4px;width:6px;height:12px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg) scale(0);transition:transform .15s}\n.lzb-cl-check:checked + .lzb-cl-box{background:var(--lzb-cl-color);border-color:var(--lzb-cl-color)}\n.lzb-cl-check:checked + .lzb-cl-box:after{transform:rotate(45deg) scale(1)}\n.lzb-cl-check:checked ~ .lzb-cl-body .lzb-cl-text{color:#999;text-decoration:line-through}\n.lzb-cl-body{display:flex;flex-direction:column;gap:.5em;flex:1;min-width:0}\n.lzb-cl-text{font-weight:600;line-height:1.6;font-size:1.02em}\n.lzb-cl-img{max-width:100%;height:auto;border-radius:8px;border:1px solid #eee;margin-top:.3em}"
    },
    "script": {
      "view": "document.querySelectorAll('.lzb-cl').forEach(function(root){\n  var checks = root.querySelectorAll('.lzb-cl-check');\n  var fill = root.querySelector('.lzb-cl-progress-fill');\n  var txt = root.querySelector('.lzb-cl-progress-text');\n  var total = checks.length;\n  function update(){\n    var done = 0;\n    checks.forEach(function(c){ if(c.checked) done++; });\n    if(fill) fill.style.width = total ? (done/total*100)+'%' : '0%';\n    if(txt) txt.textContent = done + ' / ' + total + ' 完了';\n  }\n  checks.forEach(function(c){ c.addEventListener('change', update); });\n  update();\n});"
    },
    "styles": [],
    "condition": [],
    "edit_url": null,
    "provide_context_to_blocks": "",
    "custom_context_slug": "",
    "allowed_blocks": "",
    "ancestor": ""
  }
]