[
  {
    "id": 227,
    "title": "ダイアゴナル・ヒーロー（動画背景・カッター刃版）",
    "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=\"M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM48,208V48H98L208,187.31V208Z\" fill=\"#1a1a2e\" /></svg>",
    "keywords": [
      "hero",
      "top",
      "diagonal",
      "cyber",
      "video"
    ],
    "slug": "lazyblock/f-diagonal-hero-v3",
    "description": "トップページ用：動画背景とカッター刃型の回転テキストを実装した完全版ヒーローバナー",
    "category": "lazyblocks",
    "category_label": "lazyblocks",
    "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_hero_main": {
        "type": "textarea",
        "name": "main_copy",
        "default": "プラグインの可能性を、最大限に。",
        "label": "メインコピー",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "true",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_hero_sub": {
        "type": "textarea",
        "name": "sub_copy",
        "default": "検証・比較・おすすめ紹介。\nあなたのWordPressを次のレベルへ引き上げる技術ブログ。",
        "label": "サブコピー",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "true",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_btn1_lbl": {
        "type": "text",
        "name": "btn1_label",
        "default": "厳選プラグインを見る",
        "label": "ボタン1（主）: ラベル",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "settings",
        "width": "50",
        "hide_if_not_selected": "true",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_btn1_url": {
        "type": "url",
        "name": "btn1_url",
        "default": "#",
        "label": "ボタン1（主）: URL",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "settings",
        "width": "50",
        "hide_if_not_selected": "true",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_btn2_lbl": {
        "type": "text",
        "name": "btn2_label",
        "default": "新着検証記事",
        "label": "ボタン2（副）: ラベル",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "settings",
        "width": "50",
        "hide_if_not_selected": "true",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_btn2_url": {
        "type": "url",
        "name": "btn2_url",
        "default": "#",
        "label": "ボタン2（副）: URL",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "settings",
        "width": "50",
        "hide_if_not_selected": "true",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_hero_video": {
        "type": "url",
        "name": "hero_video",
        "default": "",
        "label": "背景動画URL (mp4)",
        "help": "メディアライブラリ等にアップロードしたmp4のURLを入力します。画像より優先してループ再生されます。",
        "child_of": "",
        "placement": "content",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "true",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_hero_img": {
        "type": "image",
        "name": "hero_image",
        "default": "",
        "label": "右側イメージ画像（フォールバック）",
        "help": "動画URLがない場合に表示されます。",
        "child_of": "",
        "placement": "content",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "true",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "insert_from_url": "false",
        "preview_size": "medium",
        "placeholder": "",
        "characters_limit": ""
      }
    },
    "code": {
      "output_method": "php",
      "editor_html": "",
      "editor_callback": "",
      "frontend_html": "<?php\n$main = isset($attributes['main_copy']) ? $attributes['main_copy'] : '';\n$sub = isset($attributes['sub_copy']) ? $attributes['sub_copy'] : '';\n$btn1_txt = isset($attributes['btn1_label']) ? $attributes['btn1_label'] : '';\n$btn1_url = isset($attributes['btn1_url']) ? $attributes['btn1_url'] : '';\n$btn2_txt = isset($attributes['btn2_label']) ? $attributes['btn2_label'] : '';\n$btn2_url = isset($attributes['btn2_url']) ? $attributes['btn2_url'] : '';\n$vid = isset($attributes['hero_video']) ? $attributes['hero_video'] : '';\n$img = isset($attributes['hero_image']['url']) ? $attributes['hero_image']['url'] : '';\n$uid = substr(md5(wp_rand()), 0, 8);\n?>\n<div class=\"f-hero-wrap-<?php echo esc_attr($uid); ?>\" id=\"f-hero-<?php echo esc_attr($uid); ?>\">\n  <div class=\"f-hero-left\">\n    <div class=\"f-hero-content\">\n      <div class=\"f-hero-main\"><?php echo esc_html($main); ?></div>\n      <div class=\"f-hero-sub\"><?php echo nl2br(esc_html($sub)); ?></div>\n      <div class=\"f-hero-btns\">\n         <?php if($btn1_url): ?>\n           <a href=\"<?php echo esc_url($btn1_url); ?>\" class=\"f-btn f-btn-primary\"><?php echo esc_html($btn1_txt); ?></a>\n         <?php endif; ?>\n         <?php if($btn2_url): ?>\n           <a href=\"<?php echo esc_url($btn2_url); ?>\" class=\"f-btn f-btn-secondary\"><?php echo esc_html($btn2_txt); ?></a>\n         <?php endif; ?>\n      </div>\n    </div>\n  </div>\n  <div class=\"f-hero-right\">\n    <div class=\"f-hero-bg-wrap\">\n      <?php if($vid): ?>\n        <video src=\"<?php echo esc_url($vid); ?>\" autoplay loop muted playsinline class=\"f-hero-media f-hero-video\"></video>\n      <?php elseif($img): ?>\n        <img src=\"<?php echo esc_url($img); ?>\" alt=\"\" class=\"f-hero-media f-hero-img\" />\n      <?php else: ?>\n        <div class=\"f-hero-media f-hero-placeholder\"></div>\n      <?php endif; ?>\n      <div class=\"f-hero-rotator\">\n        <div class=\"f-rotator-item is-active\"><span class=\"f-rotator-text\">WordPress</span></div>\n        <div class=\"f-rotator-item\"><span class=\"f-rotator-text\">AI</span></div>\n        <div class=\"f-rotator-item\"><span class=\"f-rotator-text\">PC Tool</span></div>\n        <div class=\"f-rotator-item\"><span class=\"f-rotator-text\">Review</span></div>\n        <div class=\"f-rotator-item\"><span class=\"f-rotator-text\">Analysis</span></div>\n        <div class=\"f-rotator-item\"><span class=\"f-rotator-text\">Optimization</span></div>\n        <div class=\"f-rotator-item\"><span class=\"f-rotator-text\">Automation</span></div>\n      </div>\n    </div>\n  </div>\n</div>\n<style>\n  .f-hero-wrap-<?php echo esc_attr($uid); ?> {\n    position: relative;\n    width: 100%;\n    min-height: 500px;\n    display: flex;\n    background: linear-gradient(135deg, #0d111a 0%, #1a1a2e 50%, #151a2d 100%);\n    overflow: hidden;\n    border: 3px solid #ffffff;\n    box-sizing: border-box;\n    margin: 0 auto;\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?>::before {\n    content: '';\n    position: absolute;\n    top: 8px; right: 8px; bottom: 8px; left: 8px;\n    border: 1px solid rgba(255, 255, 255, 0.3);\n    pointer-events: none;\n    z-index: 10;\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-hero-left {\n    width: 55%;\n    display: flex;\n    align-items: center;\n    padding: 50px 5%;\n    z-index: 2;\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-hero-right {\n    position: absolute;\n    top: -10%;\n    right: -10%;\n    width: 55%;\n    height: 120%;\n    transform: skewX(-12deg);\n    border-left: 4px solid #ffffff;\n    z-index: 1;\n    overflow: hidden;\n    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-hero-bg-wrap {\n    position: relative;\n    width: 140%;\n    height: 100%;\n    transform: skewX(12deg);\n    margin-left: -20%;\n    background: linear-gradient(135deg, rgba(56, 224, 224, 0.15), rgba(26, 26, 46, 0.5));\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-hero-media {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    opacity: 0.7;\n    mix-blend-mode: luminosity;\n    pointer-events: none;\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-hero-main {\n    font-size: 2.6rem;\n    font-weight: 700;\n    color: #ffffff;\n    line-height: 1.3;\n    margin: 0 0 20px 0 !important;\n    letter-spacing: 0.02em;\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-hero-sub {\n    font-size: 1.1rem;\n    color: #c9c9d4;\n    line-height: 1.6;\n    margin: 0 0 30px 0 !important;\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-hero-btns {\n    display: flex;\n    gap: 15px;\n    flex-wrap: wrap;\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 12px 24px;\n    border-radius: 0;\n    text-decoration: none !important;\n    font-weight: 600;\n    transition: all 0.3s ease;\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-btn-primary {\n    background-color: transparent;\n    color: #ffffff !important;\n    border: 2px solid #ffffff;\n    box-shadow: 4px 4px 0 #38E0E0;\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-btn-primary:hover {\n    transform: translate(2px, 2px);\n    box-shadow: 2px 2px 0 #38E0E0;\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-btn-secondary {\n    background-color: transparent;\n    color: #c9c9d4 !important;\n    border: 1px solid rgba(255,255,255,0.4);\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-btn-secondary:hover {\n    background-color: rgba(255, 255, 255, 0.1);\n    color: #ffffff !important;\n    border-color: #ffffff;\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-hero-main,\n  .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-hero-sub,\n  .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-hero-btns {\n    opacity: 0;\n    transform: translateY(25px);\n    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-hero-right {\n    opacity: 0;\n    transition: opacity 1.2s ease-out;\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?>.is-loaded .f-hero-main {\n    opacity: 1;\n    transform: translateY(0);\n    transition-delay: 0.1s;\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?>.is-loaded .f-hero-sub {\n    opacity: 1;\n    transform: translateY(0);\n    transition-delay: 0.3s;\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?>.is-loaded .f-hero-btns {\n    opacity: 1;\n    transform: translateY(0);\n    transition-delay: 0.5s;\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?>.is-loaded .f-hero-right {\n    opacity: 1;\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-hero-rotator {\n    position: absolute;\n    top: 50%;\n    left: 20%;\n    transform: translateY(-50%);\n    width: 65%;\n    max-width: 450px;\n    z-index: 5;\n    pointer-events: none;\n    perspective: 1200px;\n    display: grid;\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-rotator-item {\n    grid-area: 1 / 1;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    padding: 16px 20px;\n    box-sizing: border-box;\n    background: rgba(13, 17, 26, 0.85);\n    border: 2px solid #38E0E0;\n    border-left: 10px solid #38E0E0;\n    box-shadow: 0 0 20px rgba(56, 224, 224, 0.2);\n    font-size: clamp(1.2rem, 2.5vw, 2.2rem);\n    font-weight: 800;\n    color: #ffffff;\n    text-shadow: 0 0 10px rgba(56, 224, 224, 0.5);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    white-space: nowrap;\n    transform-origin: center center;\n    transform: rotateX(-90deg) skewX(-20deg);\n    opacity: 0;\n    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-rotator-text {\n    display: block;\n    transform: skewX(20deg);\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-rotator-item.is-active {\n    opacity: 1;\n    transform: rotateX(0deg) skewX(-20deg);\n  }\n  .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-rotator-item.is-leaving {\n    opacity: 0;\n    transform: rotateX(90deg) skewX(-20deg);\n  }\n  @media screen and (max-width: 680px) {\n    .f-hero-wrap-<?php echo esc_attr($uid); ?> {\n      flex-direction: column;\n      min-height: auto;\n    }\n    .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-hero-left {\n      width: 100%;\n      padding: 40px 5% 150px;\n    }\n    .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-hero-right {\n      top: auto;\n      bottom: -10%;\n      right: -10%;\n      width: 120%;\n      height: 250px;\n      transform: skewY(-8deg);\n      border-left: none;\n      border-top: 4px solid #ffffff;\n    }\n    .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-hero-bg-wrap {\n      width: 100%;\n      height: 140%;\n      transform: skewY(8deg);\n      margin-left: 0;\n      margin-top: -20%;\n    }\n    .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-hero-main {\n      font-size: 2rem;\n    }\n    .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-hero-rotator {\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 75%;\n    }\n  }\n  @media screen and (max-width: 480px) {\n    .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-hero-btns {\n      flex-direction: column;\n      width: 100%;\n    }\n    .f-hero-wrap-<?php echo esc_attr($uid); ?> .f-btn {\n      width: 100%;\n    }\n  }\n</style>\n<script>\n  (function(){\n    var inEditor = document.body.classList.contains('block-editor-iframe__body') ||\n        document.body.classList.contains('editor-styles-wrapper') ||\n        document.body.classList.contains('wp-admin');\n    var block = document.getElementById('f-hero-<?php echo esc_js($uid); ?>');\n    if (!block) return;\n    if (inEditor) {\n      block.classList.add('is-loaded');\n      block.querySelectorAll('a[href]').forEach(function (a) {\n        a.addEventListener('click', function (e) { e.preventDefault(); });\n      });\n    } else {\n      window.requestAnimationFrame(function() {\n        setTimeout(function() {\n          block.classList.add('is-loaded');\n        }, 150);\n      });\n      var rotatorItems = block.querySelectorAll('.f-rotator-item');\n      if (rotatorItems.length > 0) {\n        var currentIndex = 0;\n        setInterval(function() {\n          var nextIndex = (currentIndex + 1) % rotatorItems.length;\n          rotatorItems[currentIndex].classList.remove('is-active');\n          rotatorItems[currentIndex].classList.add('is-leaving');\n          var prevIndex = currentIndex - 1;\n          if (prevIndex < 0) prevIndex = rotatorItems.length - 1;\n          rotatorItems[prevIndex].classList.remove('is-leaving');\n          rotatorItems[nextIndex].classList.add('is-active');\n          currentIndex = nextIndex;\n        }, 3000);\n      }\n    }\n  })();\n</script>",
      "frontend_callback": "",
      "show_preview": "always",
      "single_output": true
    },
    "style": {
      "block": "",
      "editor": ""
    },
    "script": {
      "view": ""
    },
    "styles": [],
    "condition": []
  }
]