[
  {
    "id": 2452,
    "title": "CTAボックス_P-14",
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\"><path d=\"M213.66,201,201,213.66a8,8,0,0,1-11.31,0l-51.31-51.31a8,8,0,0,0-13,2.46l-17.82,46.41a8,8,0,0,1-14.85-.71L40.41,50.44a8,8,0,0,1,10-10L210.51,92.68a8,8,0,0,1,.71,14.85l-46.41,17.82a8,8,0,0,0-2.46,13l51.31,51.31A8,8,0,0,1,213.66,201Z\" fill=\"#9aa8c9\"/><path d=\"M88,24V16a8,8,0,0,1,16,0v8a8,8,0,0,1-16,0ZM16,104h8a8,8,0,0,0,0-16H16a8,8,0,0,0,0,16ZM124.42,39.16a8,8,0,0,0,10.74-3.58l8-16a8,8,0,0,0-14.31-7.16l-8,16A8,8,0,0,0,124.42,39.16Zm-96,81.69-16,8a8,8,0,0,0,7.16,14.31l16-8a8,8,0,1,0-7.16-14.31ZM219.31,184a16,16,0,0,1,0,22.63l-12.68,12.68a16,16,0,0,1-22.63,0L132.7,168,115,214.09c0,.1-.08.21-.13.32a15.83,15.83,0,0,1-14.6,9.59l-.79,0a15.83,15.83,0,0,1-14.41-11L32.8,52.92A16,16,0,0,1,52.92,32.8L213,85.07a16,16,0,0,1,1.41,29.8l-.32.13L168,132.69ZM208,195.31,156.69,144h0a16,16,0,0,1,4.93-26l.32-.14,45.95-17.64L48,48l52.2,159.86,17.65-46c0-.11.08-.22.13-.33a16,16,0,0,1,11.69-9.34,16.72,16.72,0,0,1,3-.28,16,16,0,0,1,11.3,4.69L195.31,208Z\" fill=\"#1a1a2e\"/></svg>",
    "keywords": [
      "CTAボックス",
      "CTA・訴求"
    ],
    "slug": "lazyblock/cta-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_12487e40df": {
        "type": "text",
        "name": "heading",
        "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_5a9ab94f62": {
        "type": "text",
        "name": "subtext",
        "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_b3492a4b44": {
        "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_9c6a05422c": {
        "type": "text",
        "name": "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_a3cab74b12": {
        "type": "select",
        "name": "banner_align",
        "default": "center",
        "label": "bバナー配置",
        "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": " center",
        "characters_limit": "",
        "choices": [
          {
            "label": "中央寄せ",
            "value": "center"
          },
          {
            "label": "左寄せ",
            "value": "left"
          },
          {
            "label": "右寄せ",
            "value": "right"
          }
        ],
        "allow_null": "false",
        "multiple": "false",
        "output_format": ""
      },
      "control_d03b0d446b": {
        "type": "toggle",
        "name": "track_click",
        "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_511b0f4127": {
        "type": "url",
        "name": "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_19abf142ad": {
        "type": "textarea",
        "name": "steps",
        "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_a93903402c": {
        "type": "toggle",
        "name": "btn_target",
        "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": "php",
      "editor_html": "",
      "editor_callback": "",
      "frontend_html": "<?php\r\n$heading     = isset( $attributes['heading'] )     ? $attributes['heading']     : '';\r\n$subtext     = isset( $attributes['subtext'] )     ? $attributes['subtext']     : '';\r\n$btn_text    = isset( $attributes['btn_text'] )    ? $attributes['btn_text']    : '';\r\n$btn_url     = isset( $attributes['btn_url'] )     ? $attributes['btn_url']     : '';\r\n$steps       = isset( $attributes['steps'] )       ? $attributes['steps']       : '';\r\n$btn_target  = isset( $attributes['btn_target'] )  ? $attributes['btn_target']  : false;\r\n$banner_code = isset( $attributes['banner_code'] ) ? $attributes['banner_code'] : '';\r\n$banner_align= isset( $attributes['banner_align'] )? trim( $attributes['banner_align'] ) : '';\r\n$track_click = isset( $attributes['track_click'] ) ? $attributes['track_click'] : false;\r\n\r\nif ( ! $heading && ! $btn_url && ! $banner_code ) {\r\n    return;\r\n}\r\n\r\n$target_attr = $btn_target ? ' target=\"_blank\" rel=\"noopener noreferrer sponsored\"' : ' rel=\"sponsored\"';\r\n\r\n$steps_html = $steps\r\n    ? '<div class=\"lzb-cta__steps\">' . nl2br( esc_html( $steps ) ) . '</div>'\r\n    : '';\r\n\r\n$align = in_array( $banner_align, array( 'left', 'right', 'center' ), true ) ? $banner_align : 'center';\r\n\r\n$allowed = array(\r\n    'a'   => array( 'href' => array(), 'rel' => array(), 'target' => array(), 'title' => array() ),\r\n    'img' => array( 'src' => array(), 'alt' => array(), 'width' => array(), 'height' => array(), 'border' => array(), 'loading' => array(), 'style' => array() ),\r\n    'br'  => array(),\r\n);\r\n$banner_html = $banner_code ? wp_kses( $banner_code, $allowed ) : '';\r\n\r\n$track_attr = $track_click\r\n    ? ' data-track=\"true\" data-label=\"' . esc_attr( $btn_text ) . '\"'\r\n    : '';\r\n?>\r\n<div class=\"lzb-cta-box\">\r\n\r\n    <?php if ( $heading ) : ?>\r\n        <p class=\"lzb-cta__heading\"><?php echo esc_html( $heading ); ?></p>\r\n    <?php endif; ?>\r\n\r\n    <?php if ( $subtext ) : ?>\r\n        <p class=\"lzb-cta__sub\"><?php echo esc_html( $subtext ); ?></p>\r\n    <?php endif; ?>\r\n\r\n    <?php echo $steps_html; ?>\r\n\r\n    <?php if ( $banner_html ) : ?>\r\n        <div class=\"lzb-cta__banner lzb-cta__banner--<?php echo esc_attr( $align ); ?>\">\r\n            <?php echo $banner_html; ?>\r\n        </div>\r\n    <?php endif; ?>\r\n\r\n    <?php if ( $btn_url && $btn_text ) : ?>\r\n        <a href=\"<?php echo esc_url( $btn_url ); ?>\"<?php echo $target_attr; ?><?php echo $track_attr; ?> class=\"lzb-cta__btn\">\r\n            <?php echo esc_html( $btn_text ); ?>\r\n        </a>\r\n    <?php endif; ?>\r\n\r\n</div>",
      "frontend_callback": "",
      "show_preview": "always",
      "single_output": true
    },
    "style": {
      "block": "/* ==============================================\r\n   LazyBlocks Pro — CTA Block\r\n   Frontend CSS\r\n   ============================================== */\r\n\r\n/* ── ボックス本体 ── */\r\n.lzb-cta-box {\r\n  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d50 100%);\r\n  border-radius: 14px;\r\n  padding: 40px 32px;\r\n  text-align: center;\r\n  margin: 48px 0 32px;\r\n  color: #fff;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n/* ゴールドの光彩（装飾） */\r\n.lzb-cta-box::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  background: radial-gradient(\r\n    ellipse at 80% 20%,\r\n    rgba(201, 168, 76, 0.18) 0%,\r\n    transparent 55%\r\n  );\r\n  pointer-events: none;\r\n}\r\n\r\n/* ── 見出し ── */\r\n.lzb-cta__heading {\r\n  font-family: 'Noto Serif JP', serif !important;\r\n  font-size: 22px !important;\r\n  font-weight: 700 !important;\r\n  line-height: 1.5 !important;\r\n  color: #fff !important;\r\n  margin: 0 0 10px !important;\r\n  padding: 0 !important;\r\n  border: none !important;\r\n  position: relative;\r\n}\r\n\r\n/* ── サブテキスト ── */\r\n.lzb-cta__sub {\r\n  font-size: 14px !important;\r\n  color: rgba(255, 255, 255, 0.65) !important;\r\n  margin: 0 0 24px !important;\r\n  position: relative;\r\n  line-height: 1.8 !important;\r\n}\r\n\r\n/* ── ボタン ── */\r\n.lzb-cta__btn {\r\n  display: inline-block;\r\n  background: #e63946;\r\n  color: #fff !important;\r\n  font-size: 16px;\r\n  font-weight: 700;\r\n  line-height: 1;\r\n  padding: 16px 40px;\r\n  border-radius: 50px;\r\n  text-decoration: none !important;\r\n  letter-spacing: 0.05em;\r\n  position: relative;\r\n  box-shadow: 0 6px 20px rgba(230, 57, 70, 0.4);\r\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\r\n}\r\n\r\n.lzb-cta__btn:hover,\r\n.lzb-cta__btn:focus {\r\n  color: #fff !important;\r\n  text-decoration: none !important;\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 10px 28px rgba(230, 57, 70, 0.5);\r\n}\r\n\r\n/* ── ステップ説明 ── */\r\n.lzb-cta__steps {\r\n  margin-top: 22px;\r\n  font-size: 13px;\r\n  color: rgba(255, 255, 255, 0.5);\r\n  line-height: 2;\r\n  position: relative;\r\n}\r\n\r\n/* ── レスポンシブ ── */\r\n@media (max-width: 600px) {\r\n  .lzb-cta-box {\r\n    padding: 32px 20px;\r\n  }\r\n\r\n  .lzb-cta__heading {\r\n    font-size: 19px !important;\r\n  }\r\n\r\n  .lzb-cta__btn {\r\n    font-size: 15px;\r\n    padding: 14px 28px;\r\n    width: 100%;\r\n    box-sizing: border-box;\r\n  }\r\n}\r\n/* ── バナー画像（A8等） ── */\r\n.lzb-cta__banner {\r\n  margin: 8px 0 24px;\r\n  position: relative;\r\n}\r\n.lzb-cta__banner--center { text-align: center; }\r\n.lzb-cta__banner--left   { text-align: left; }\r\n.lzb-cta__banner--right  { text-align: right; }\r\n.lzb-cta__banner a { display: inline-block; line-height: 0; }\r\n.lzb-cta__banner img {\r\n  max-width: 100%;\r\n  height: auto;\r\n  border-radius: 8px;\r\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);\r\n}\r\n/* A8のトラッキング1pxは装飾なしに */\r\n.lzb-cta__banner img[width=\"1\"],\r\n.lzb-cta__banner img[height=\"1\"] {\r\n  box-shadow: none;\r\n  border-radius: 0;\r\n}\n\n@media (max-width: 480px) {\n  .lzb-cta-box { padding: 24px 16px; }\n  .lzb-cta__heading { font-size: 17px !important; }\n  .lzb-cta__btn { padding: 12px 20px; }\n}",
      "editor": "/* ==============================================\r\n   LazyBlocks Pro — CTA Block\r\n   Editor CSS（Gutenbergエディター内プレビュー用）\r\n   ============================================== */\r\n\r\n/* ── エディター内のボックス ── */\r\n.lazyblock-cta-box .lzb-cta-box,\r\n[data-type=\"lazyblock/cta-box\"] .lzb-cta-box {\r\n  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d50 100%);\r\n  border-radius: 14px;\r\n  padding: 40px 32px;\r\n  text-align: center;\r\n  margin: 16px 0;\r\n  color: #fff;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n/* 光彩 */\r\n.lazyblock-cta-box .lzb-cta-box::before,\r\n[data-type=\"lazyblock/cta-box\"] .lzb-cta-box::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  background: radial-gradient(\r\n    ellipse at 80% 20%,\r\n    rgba(201, 168, 76, 0.18) 0%,\r\n    transparent 55%\r\n  );\r\n  pointer-events: none;\r\n}\r\n\r\n/* 見出し */\r\n.lazyblock-cta-box .lzb-cta__heading,\r\n[data-type=\"lazyblock/cta-box\"] .lzb-cta__heading {\r\n  font-family: 'Noto Serif JP', serif;\r\n  font-size: 22px;\r\n  font-weight: 700;\r\n  color: #fff;\r\n  margin: 0 0 10px;\r\n  padding: 0;\r\n  border: none;\r\n  position: relative;\r\n}\r\n\r\n/* サブテキスト */\r\n.lazyblock-cta-box .lzb-cta__sub,\r\n[data-type=\"lazyblock/cta-box\"] .lzb-cta__sub {\r\n  font-size: 14px;\r\n  color: rgba(255, 255, 255, 0.65);\r\n  margin: 0 0 24px;\r\n  position: relative;\r\n}\r\n\r\n/* ボタン */\r\n.lazyblock-cta-box .lzb-cta__btn,\r\n[data-type=\"lazyblock/cta-box\"] .lzb-cta__btn {\r\n  display: inline-block;\r\n  background: #e63946;\r\n  color: #fff;\r\n  font-size: 16px;\r\n  font-weight: 700;\r\n  padding: 16px 40px;\r\n  border-radius: 50px;\r\n  text-decoration: none;\r\n  letter-spacing: 0.05em;\r\n  box-shadow: 0 6px 20px rgba(230, 57, 70, 0.4);\r\n  position: relative;\r\n  cursor: default; /* エディター内ではリンク無効 */\r\n}\r\n\r\n/* ステップ */\r\n.lazyblock-cta-box .lzb-cta__steps,\r\n[data-type=\"lazyblock/cta-box\"] .lzb-cta__steps {\r\n  margin-top: 22px;\r\n  font-size: 13px;\r\n  color: rgba(255, 255, 255, 0.5);\r\n  line-height: 2;\r\n  position: relative;\r\n}\r\n\r\n/* ── エディター内ラベル（ブロック識別用） ── */\r\n.lazyblock-cta-box::before,\r\n[data-type=\"lazyblock/cta-box\"]::before {\r\n  content: 'CTAブロック';\r\n  display: block;\r\n  font-size: 11px;\r\n  letter-spacing: 0.1em;\r\n  color: #aaa;\r\n  margin-bottom: 8px;\r\n  font-family: monospace;\r\n}\r\n.lazyblock-cta-box .lzb-cta__banner,\r\n[data-type=\"lazyblock/cta-box\"] .lzb-cta__banner {\r\n  margin: 8px 0 24px;\r\n  text-align: center;\r\n}\r\n.lazyblock-cta-box .lzb-cta__banner img,\r\n[data-type=\"lazyblock/cta-box\"] .lzb-cta__banner img {\r\n  max-width: 100%;\r\n  height: auto;\r\n  border-radius: 8px;\r\n}"
    },
    "script": {
      "view": "/**\r\n * LazyBlocks Pro — CTA Block\r\n * Frontend JavaScript\r\n *\r\n * 役割:\r\n *  - ボタンのクリックトラッキング（Google Analytics / GTM 対応）\r\n *  - スクロールイン時のフェードアニメーション\r\n */\r\n\r\n( function () {\r\n  'use strict';\r\n\r\n  /* =========================================================\r\n     1. スクロールイン アニメーション\r\n     IntersectionObserver でビューポートに入った時に\r\n     .is-visible クラスを付与してCSSアニメーションを起動\r\n  ========================================================= */\r\n  function initScrollAnimation() {\r\n    var boxes = document.querySelectorAll( '.lzb-cta-box' );\r\n    if ( ! boxes.length ) return;\r\n\r\n    // CSSアニメーション用スタイルを動的に注入\r\n    var style = document.createElement( 'style' );\r\n    style.textContent = [\r\n      '.lzb-cta-box {',\r\n      '  opacity: 0;',\r\n      '  transform: translateY(20px);',\r\n      '  transition: opacity 0.6s ease, transform 0.6s ease;',\r\n      '}',\r\n      '.lzb-cta-box.is-visible {',\r\n      '  opacity: 1;',\r\n      '  transform: translateY(0);',\r\n      '}'\r\n    ].join( '\\n' );\r\n    document.head.appendChild( style );\r\n\r\n    // IntersectionObserver 非対応ブラウザは即表示\r\n    if ( ! ( 'IntersectionObserver' in window ) ) {\r\n      boxes.forEach( function ( el ) {\r\n        el.classList.add( 'is-visible' );\r\n      } );\r\n      return;\r\n    }\r\n\r\n    var observer = new IntersectionObserver(\r\n      function ( entries ) {\r\n        entries.forEach( function ( 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      },\r\n      { threshold: 0.15 }\r\n    );\r\n\r\n    boxes.forEach( function ( el ) {\r\n      observer.observe( el );\r\n    } );\r\n  }\r\n\r\n  /* =========================================================\r\n     2. ボタン クリックトラッキング\r\n     data-track=\"true\" 属性がある場合のみ発火。\r\n     Google Analytics 4 と GTM の両方に対応。\r\n\r\n     使用例（PHPテンプレート側）:\r\n       <a class=\"lzb-cta__btn\" data-track=\"true\"\r\n          data-label=\"PLaMo翻訳を無料で試す\" href=\"...\">\r\n  ========================================================= */\r\n  function initTracking() {\r\n    document.addEventListener( 'click', function ( e ) {\r\n      var btn = e.target.closest( '.lzb-cta__btn[data-track=\"true\"]' );\r\n      if ( ! btn ) return;\r\n\r\n      var label = btn.dataset.label || btn.textContent.trim();\r\n      var href  = btn.getAttribute( 'href' ) || '';\r\n\r\n      // ── Google Analytics 4 (gtag) ──\r\n      if ( typeof gtag === 'function' ) {\r\n        gtag( 'event', 'cta_click', {\r\n          event_category : 'CTA',\r\n          event_label     : label,\r\n          link_url        : href\r\n        } );\r\n      }\r\n\r\n      // ── Google Tag Manager (dataLayer) ──\r\n      if ( Array.isArray( window.dataLayer ) ) {\r\n        window.dataLayer.push( {\r\n          event      : 'cta_click',\r\n          ctaLabel   : label,\r\n          ctaUrl     : href\r\n        } );\r\n      }\r\n    } );\r\n  }\r\n\r\n  /* =========================================================\r\n     3. 初期化\r\n  ========================================================= */\r\n  function init() {\r\n    initScrollAnimation();\r\n    initTracking();\r\n  }\r\n\r\n  // DOM 構築完了後に実行\r\n  if ( document.readyState === 'loading' ) {\r\n    document.addEventListener( 'DOMContentLoaded', init );\r\n  } else {\r\n    init();\r\n  }\r\n\r\n} )();"
    },
    "styles": [],
    "condition": [],
    "edit_url": null,
    "provide_context_to_blocks": "",
    "custom_context_slug": "",
    "allowed_blocks": "",
    "ancestor": ""
  }
]