[ { "id": 2439, "title": "シンプルキャプションボックス_P-11", "icon": "", "keywords": [ "キャプションボックス", "お知らせ・注意喚起", "シンプルキャプションボックス" ], "slug": "lazyblock/simple-captionbox", "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_f20a414758": { "type": "select", "name": "icon_type", "default": "none", "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": "", "choices": [ { "label": "アイコンなし", "value": "none" }, { "label": "ポイント", "value": "icon-point" }, { "label": "注意", "value": "icon-warning" }, { "label": "チェック", "value": "icon-check" } ] }, "control_f74980428a": { "type": "text", "name": "caption_title", "default": "POINT", "label": "キャプション", "help": "空白でもOK。よく使う文字を初期値に。（Default value）", "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_3d08914608": { "type": "color", "name": "caption_color", "default": "#d6454d", "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": "", "alpha": "true" }, "control_0739684768": { "type": "rich_text", "name": "content", "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": "" } }, "code": { "output_method": "html", "editor_html": "", "editor_callback": "", "frontend_html": "
\r\n {{#if caption_title}}\r\n
\r\n {{caption_title}}\r\n
\r\n {{/if}}\r\n \r\n {{#if content}}\r\n
\r\n {{{content}}}\r\n
\r\n {{/if}}\r\n
", "frontend_callback": "", "show_preview": "always", "single_output": true }, "style": { "block": "/* =========================================================\r\n Lazy Blocks: シンプルキャプションボックス（枠線カラー連動版）\r\n========================================================= */\r\n.lzb-caption-box {\r\n background-color: #ffffff;\r\n border-radius: 8px;\r\n border: 2px solid #f2f2f2; /* ★フチにパキッと色がのるよう2pxに最適化（色はHandlebars側から動的適用） */\r\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);\r\n padding: 32px 40px;\r\n margin: 2.5em 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n/* キャプション（見出し） */\r\n.lzb-caption-title {\r\n display: flex;\r\n align-items: center; \r\n gap: 8px; \r\n font-size: 1.1em;\r\n font-weight: 700;\r\n margin-bottom: 20px;\r\n}\r\n\r\n/* アイコン共通設定（CSS Mask） */\r\n.lzb-caption-title[class*=\"icon-\"]::before {\r\n content: \"\";\r\n display: block;\r\n width: 1.2em;\r\n height: 1.2em;\r\n background-color: currentColor; /* 見出し色と自動連動 */\r\n -webkit-mask-size: contain;\r\n mask-size: contain;\r\n -webkit-mask-repeat: no-repeat;\r\n mask-repeat: no-repeat;\r\n -webkit-mask-position: center;\r\n mask-position: center;\r\n}\r\n\r\n/* 💡 ポイントアイコン */\r\n.lzb-caption-title.icon-point::before {\r\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21c0 .5.4 1 1 1h4c.6 0 1-.5 1-1v-1H9v1zm3-19C8.1 2 5 5.1 5 9c0 2.4 1.2 4.5 3 5.7V17c0 .6.4 1 1 1h6c.6 0 1-.4 1-1v-2.3c1.8-1.3 3-3.4 3-5.7 0-3.9-3.1-7-7-7z'/%3E%3C/svg%3E\");\r\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21c0 .5.4 1 1 1h4c.6 0 1-.5 1-1v-1H9v1zm3-19C8.1 2 5 5.1 5 9c0 2.4 1.2 4.5 3 5.7V17c0 .6.4 1 1 1h6c.6 0 1-.4 1-1v-2.3c1.8-1.3 3-3.4 3-5.7 0-3.9-3.1-7-7-7z'/%3E%3C/svg%3E\");\r\n}\r\n\r\n/* ⚠️ 注意アイコン */\r\n.lzb-caption-title.icon-warning::before {\r\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E\");\r\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E\");\r\n}\r\n\r\n/* ✅ チェックアイコン */\r\n.lzb-caption-title.icon-check::before {\r\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm-2 15l-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9z'/%3E%3C/svg%3E\");\r\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm-2 15l-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9z'/%3E%3C/svg%3E\");\r\n}\r\n\r\n/* 本文 */\r\n.lzb-caption-content {\r\n font-size: 1em;\r\n line-height: 1.8;\r\n color: #333333;\r\n}\r\n.lzb-caption-content p,\r\n.lzb-caption-content ul,\r\n.lzb-caption-content ol {\r\n margin-bottom: 1em;\r\n}\r\n.lzb-caption-content p:last-child,\r\n.lzb-caption-content ul:last-child,\r\n.lzb-caption-content ol:last-child {\r\n margin-bottom: 0;\r\n}\r\n\r\n/* スマホ対応 */\r\n@media screen and (max-width: 768px) {\r\n .lzb-caption-box {\r\n padding: 24px 20px;\r\n margin: 2em 0;\r\n }\r\n}\n\n@media screen and (max-width: 480px) {\n .lzb-caption-box { padding: 18px 16px; margin: 1.5em 0; }\n .lzb-caption-title { font-size: 1em; margin-bottom: 14px; }\n}", "editor": "/* =========================================================\r\n Lazy Blocks: エディター専用CSS（シンプルキャプションボックス用）\r\n========================================================= */\r\n/* テーマ側の枠線リセットを完全に防ぎ、インラインカラーを100%強制適用する指定 */\r\n.editor-styles-wrapper .lzb-caption-box {\r\n border-style: solid !important;\r\n border-width: 2px !important;\r\n}" }, "script": { "view": "" }, "styles": [], "condition": [], "edit_url": null, "provide_context_to_blocks": "", "custom_context_slug": "", "allowed_blocks": "", "ancestor": "" } ]