[
  {
    "id": 2539,
    "title": "BMI計算機_P-16",
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\"><path d=\"M176,64v48H80V64Z\" fill=\"#9aa8c9\"/><path d=\"M80,120h96a8,8,0,0,0,8-8V64a8,8,0,0,0-8-8H80a8,8,0,0,0-8,8v48A8,8,0,0,0,80,120Zm8-48h80v32H88ZM200,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V40A16,16,0,0,0,200,24Zm0,192H56V40H200ZM100,148a12,12,0,1,1-12-12A12,12,0,0,1,100,148Zm40,0a12,12,0,1,1-12-12A12,12,0,0,1,140,148Zm40,0a12,12,0,1,1-12-12A12,12,0,0,1,180,148Zm-80,40a12,12,0,1,1-12-12A12,12,0,0,1,100,188Zm40,0a12,12,0,1,1-12-12A12,12,0,0,1,140,188Zm40,0a12,12,0,1,1-12-12A12,12,0,0,1,180,188Z\" fill=\"#1a1a2e\"/></svg>",
    "keywords": [
      "ツール・計算",
      "BMI計算機"
    ],
    "slug": "lazyblock/bmi-calculator",
    "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_c2f9914658": {
        "type": "text",
        "name": "title",
        "default": "BMIチェッカー",
        "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_3f0a9b4262": {
        "type": "text",
        "name": "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_4c08414b0d": {
        "type": "color",
        "name": "accent_color",
        "default": "#007cba",
        "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": ""
      }
    },
    "code": {
      "output_method": "php",
      "editor_html": "",
      "editor_callback": "",
      "frontend_html": "<?php\r\n// 各ブロックに一意のIDを付与（複数配置時の競合防止）\r\n$block_id = 'lzb_bmi_' . substr( md5( uniqid( '', true ) ), 0, 10 );\r\n\r\n// 値の取得とフォールバック\r\n$title        = isset( $attributes['title'] ) && $attributes['title'] !== '' ? $attributes['title'] : 'BMIチェッカー';\r\n$btn_text     = isset( $attributes['btn_text'] ) && $attributes['btn_text'] !== '' ? $attributes['btn_text'] : '計算する';\r\n$accent_color = isset( $attributes['accent_color'] ) && $attributes['accent_color'] !== '' ? $attributes['accent_color'] : '#007cba';\r\n?>\r\n\r\n<div class=\"lzb-bmi-container\" id=\"<?php echo esc_attr( $block_id ); ?>\" style=\"--bmi-accent: <?php echo esc_attr( $accent_color ); ?>;\">\r\n    <div class=\"lzb-bmi-card\">\r\n        <?php if ( $title ) : ?>\r\n            <div class=\"lzb-bmi-title\"><?php echo esc_html( $title ); ?></div>\r\n        <?php endif; ?>\r\n\r\n        <div class=\"lzb-bmi-form\">\r\n            <div class=\"lzb-bmi-input-group\">\r\n                <label for=\"<?php echo esc_attr( $block_id ); ?>_height\">身長 (cm)</label>\r\n                <input type=\"number\" id=\"<?php echo esc_attr( $block_id ); ?>_height\" placeholder=\"例: 170\" step=\"0.1\" min=\"1\" required onkeydown=\"if(event.key==='Enter'){event.preventDefault();calculateBMI_<?php echo esc_attr( $block_id ); ?>();}\">\r\n            </div>\r\n            \r\n            <div class=\"lzb-bmi-input-group\">\r\n                <label for=\"<?php echo esc_attr( $block_id ); ?>_weight\">体重 (kg)</label>\r\n                <input type=\"number\" id=\"<?php echo esc_attr( $block_id ); ?>_weight\" placeholder=\"例: 65\" step=\"0.1\" min=\"1\" required onkeydown=\"if(event.key==='Enter'){event.preventDefault();calculateBMI_<?php echo esc_attr( $block_id ); ?>();}\">\r\n            </div>\r\n\r\n            <button type=\"button\" class=\"lzb-bmi-submit\" onclick=\"calculateBMI_<?php echo esc_attr( $block_id ); ?>()\">\r\n                <?php echo esc_html( $btn_text ); ?>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"lzb-bmi-result-box\" id=\"<?php echo esc_attr( $block_id ); ?>_result\" style=\"display: none;\">\r\n            <p class=\"lzb-bmi-score-label\">あなたのBMI</p>\r\n            <div class=\"lzb-bmi-score-value\">22.0</div>\r\n            <div class=\"lzb-bmi-status\">普通体重 (標準)</div>\r\n        </div>\r\n    </div>\r\n\r\n    <script>\r\n    function calculateBMI_<?php echo esc_attr( $block_id ); ?>() {\r\n        const heightInput = document.getElementById('<?php echo esc_attr( $block_id ); ?>_height').value;\r\n        const weightInput = document.getElementById('<?php echo esc_attr( $block_id ); ?>_weight').value;\r\n        const resultBox   = document.getElementById('<?php echo esc_attr( $block_id ); ?>_result');\r\n        \r\n        const heightM = parseFloat(heightInput) / 100;\r\n        const weight = parseFloat(weightInput);\r\n\r\n        if (!(heightM > 0) || !(weight > 0)) {\r\n            alert('身長と体重を正しく入力してください。');\r\n            return;\r\n        }\r\n\r\n        const bmi = (weight / (heightM * heightM)).toFixed(1);\r\n\r\n        let status = '';\r\n        let statusColor = '';\r\n\r\n        if (bmi < 18.5) {\r\n            status = '低体重 (痩せ型)';\r\n            statusColor = '#3498db';\r\n        } else if (bmi < 25) {\r\n            status = '普通体重 (標準)';\r\n            statusColor = '#2ecc71';\r\n        } else if (bmi < 30) {\r\n            status = '肥満 (1度)';\r\n            statusColor = '#f1c40f';\r\n        } else if (bmi < 35) {\r\n            status = '肥満 (2度)';\r\n            statusColor = '#e67e22';\r\n        } else {\r\n            status = '高度肥満 (3度以上)';\r\n            statusColor = '#e74c3c';\r\n        }\r\n\r\n        resultBox.querySelector('.lzb-bmi-score-value').innerText = bmi;\r\n        const statusEl = resultBox.querySelector('.lzb-bmi-status');\r\n        statusEl.innerText = status;\r\n        statusEl.style.backgroundColor = statusColor;\r\n\r\n        resultBox.style.display = 'block';\r\n        resultBox.classList.add('lzb-fade-in');\r\n    }\r\n    </script>\r\n</div>",
      "frontend_callback": "",
      "show_preview": "always",
      "single_output": true
    },
    "style": {
      "block": ".lzb-bmi-container {\r\n    max-width: 400px;\r\n    margin: 2rem auto;\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n}\r\n\r\n.lzb-bmi-card {\r\n    background: #ffffff;\r\n    border-radius: 16px;\r\n    padding: 24px;\r\n    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);\r\n    border-top: 5px solid var(--bmi-accent);\r\n}\r\n\r\n.lzb-bmi-title {\r\n    margin-top: 0;\r\n    margin-bottom: 20px;\r\n    font-size: 1.25rem;\r\n    font-weight: bold;\r\n    color: #333333;\r\n    text-align: center;\r\n}\r\n\r\n.lzb-bmi-input-group {\r\n    margin-bottom: 16px;\r\n}\r\n\r\n.lzb-bmi-input-group label {\r\n    display: block;\r\n    margin-bottom: 6px;\r\n    font-size: 0.9rem;\r\n    color: #555555;\r\n    font-weight: 500;\r\n}\r\n\r\n.lzb-bmi-input-group input {\r\n    width: 100%;\r\n    padding: 12px 16px;\r\n    font-size: 1rem;\r\n    border: 1px solid #e2e8f0;\r\n    border-radius: 8px;\r\n    box-sizing: border-box;\r\n    transition: border-color 0.2s ease;\r\n    background-color: #f8fafc;\r\n}\r\n\r\n.lzb-bmi-input-group input:focus {\r\n    outline: none;\r\n    border-color: var(--bmi-accent);\r\n    background-color: #ffffff;\r\n}\r\n\r\n.lzb-bmi-submit {\r\n    width: 100%;\r\n    padding: 14px;\r\n    margin-top: 8px;\r\n    font-size: 1rem;\r\n    font-weight: bold;\r\n    color: #ffffff;\r\n    background-color: var(--bmi-accent);\r\n    border: none;\r\n    border-radius: 8px;\r\n    cursor: pointer;\r\n    transition: filter 0.2s ease, transform 0.1s ease;\r\n}\r\n\r\n.lzb-bmi-submit:hover {\r\n    filter: brightness(1.1);\r\n}\r\n\r\n.lzb-bmi-submit:active {\r\n    transform: scale(0.98);\r\n}\r\n\r\n.lzb-bmi-result-box {\r\n    margin-top: 24px;\r\n    padding: 20px;\r\n    background-color: #f8fafc;\r\n    border-radius: 12px;\r\n    text-align: center;\r\n    border: 1px solid #e2e8f0;\r\n}\r\n\r\n.lzb-bmi-score-label {\r\n    margin: 0 0 8px 0;\r\n    font-size: 0.9rem;\r\n    color: #64748b;\r\n}\r\n\r\n.lzb-bmi-score-value {\r\n    font-size: 2.5rem;\r\n    font-weight: 800;\r\n    color: #1e293b;\r\n    line-height: 1;\r\n    margin-bottom: 12px;\r\n}\r\n\r\n.lzb-bmi-status {\r\n    display: inline-block;\r\n    padding: 6px 16px;\r\n    color: #ffffff;\r\n    font-size: 0.9rem;\r\n    font-weight: bold;\r\n    border-radius: 20px;\r\n    background-color: #2ecc71; /* デフォルト標準色 */\r\n}\r\n\r\n.lzb-fade-in {\r\n    animation: lzbFadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n}\r\n\r\n@keyframes lzbFadeInUp {\r\n    from { opacity: 0; transform: translateY(10px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n}",
      "editor": "/* インラインスタイルの display: none; を強制上書きしてプレビューを表示 */\r\n.lzb-bmi-container .lzb-bmi-result-box {\r\n    display: block !important;\r\n    opacity: 0.6; /* プレビューであることが伝わるよう、少し薄くする */\r\n    border: 1px dashed #cbd5e1; /* エディター上は点線枠にして識別しやすく */\r\n    position: relative;\r\n}\r\n\r\n/* プレビューエリアに見出しテキストを擬似要素で上書き追加 */\r\n.lzb-bmi-container .lzb-bmi-score-label::before {\r\n    content: \"[ 編集画面プレビュー ] \";\r\n    font-weight: bold;\r\n    color: var(--bmi-accent);\r\n}\r\n\r\n/* 管理画面内でのフォーム誤作動（JavaScriptの暴発）を防ぐ */\r\n.lzb-bmi-container .lzb-bmi-submit {\r\n    pointer-events: none; /* クリックを無効化 */\r\n    opacity: 0.5;\r\n    cursor: not-allowed;\r\n}\r\n\r\n.lzb-bmi-container input {\r\n    pointer-events: none; /* 入力も不要なのでロック */\r\n}"
    },
    "script": {
      "view": ""
    },
    "styles": [],
    "condition": [],
    "edit_url": null,
    "provide_context_to_blocks": "",
    "custom_context_slug": "",
    "allowed_blocks": "",
    "ancestor": ""
  }
]