CMS Hub 開発——
モジュール設計

[ { "id": "heading", "name": "heading", "label": "見出し", "type": "text", "default": "あなたのビジネスを加速させる", "required": true }, { "id": "subheading", "name": "subheading", "label": "サブ見出し", "type": "text", "default": "HubSpot で顧客管理を一元化しましょう" }, { "id": "background_image", "name": "background_image", "label": "背景画像", "type": "image", "default": { "src": "", "alt": "" } }, { "id": "cta_button", "name": "cta_button", "label": "CTAボタン", "type": "group", "children": [ { "id": "text", "name": "text", "label": "ボタンテキスト", "type": "text", "default": "無料で始める" }, { "id": "url", "name": "url", "label": "リンク先", "type": "url", "default": { "url": "", "open_in_new_tab": false } }, { "id": "style", "name": "style", "label": "スタイル", "type": "choice", "choices": [["primary","プライマリ"],["secondary","セカンダリ"],["outline","アウトライン"]], "default": "primary" } ] }, { "id": "layout", "name": "layout", "label": "レイアウト", "type": "choice", "choices": [["center","中央揃え"],["left","左揃え"],["right","右揃え"]], "default": "center" }, { "id": "overlay_opacity", "name": "overlay_opacity", "label": "オーバーレイの不透明度 (%)", "type": "number", "default": 50, "min": 0, "max": 100 } ]

{# module_attribute でフィールド値を取得 #} <section class="hero-banner hero-layout-{{ module.layout }}" style=" {% if module.background_image.src %} background-image: url({{ module.background_image.src | resize_image_url(1440, 800) }}); {% endif %} " > {# 背景オーバーレイ #} <div class="hero-overlay" style="opacity: {{ module.overlay_opacity / 100 }}" ></div> <div class="hero-content"> {% if module.heading %} <h1 class="hero-heading">{{ module.heading }}</h1> {% endif %} {% if module.subheading %} <p class="hero-subheading">{{ module.subheading }}</p> {% endif %} {% if module.cta_button.url.url %} <a href="{{ module.cta_button.url.url }}" class="btn btn-{{ module.cta_button.style }}" {% if module.cta_button.url.open_in_new_tab %}target="_blank" rel="noopener"{% endif %} > {{ module.cta_button.text }} </a> {% endif %} </div> </section>

{# fields.json で type: group, occurrence: {min:1, max:6} を設定したリピートグループ #} <div class="card-grid card-cols-{{ module.columns }}"> {% for card in module.cards %} <div class="card"> {% if card.icon %} <div class="card-icon">{{ card.icon }}</div> {% endif %} <h3 class="card-title">{{ card.title }}</h3> <p class="card-body">{{ card.body }}</p> {% if card.link.url %} <a href="{{ card.link.url }}" class="card-link">{{ card.link_text | default('詳しく見る') }} →</a> {% endif %} </div> {% endfor %} </div>

{ "label": "ヒーローバナー", "css_assets": [{ "path": "module.css" }], "js_assets": [], "other_assets": [], "smart_type": "NOT_SMART", "icon": "heroicons/solid/photograph", "is_available_for_new_content": true, // このモジュールが使えるコンテキストを制限 "content_types": ["SITE_PAGE", "LANDING_PAGE"], // DnD テンプレートでのみ使用可能にする "host_template_types": ["PAGE", "BLOG_POST"] }

/* モジュール固有のスタイルは .hero-banner クラスでスコープ */ .hero-banner { position: relative; min-height: 560px; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; overflow: hidden; } .hero-overlay { position: absolute; inset: 0; background: #000; } .hero-content { position: relative; z-index: 1; text-align: center; max-width: 720px; padding: 40px 24px; color: #fff; } .hero-layout-left .hero-content { text-align: left; } .hero-layout-right .hero-content { text-align: right; } @media (max-width: 768px) { .hero-banner { min-height: 320px; } }

// DOMContentLoaded を待たずに即時実行（HubSpot の非同期ロードに対応） (function() { function initHeroBanner() { const banners = document.querySelectorAll('.hero-banner'); banners.forEach(function(banner) { // すでに初期化済みならスキップ if (banner.dataset.initialized) return; banner.dataset.initialized = 'true'; // 初期化処理... }); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initHeroBanner); } else { initHeroBanner(); } })();