HubSpot CMS: イベント概要や会社情報に最適！レスポンシブ対応「定義リスト」モジュール

このモジュールの目的とメリット

このモジュールの目的は、**「情報のペア（項目と内容）を整理して見やすく表示すること」**です。

主なメリット:

• レスポンシブ完全対応: PCでは横並び、スマホでは縦並びに自動で切り替わります。
• デザイン調整が簡単: 文字色、背景色、線の太さなどをコードを書かずにページエディタから変更できます。
• セマンティックなHTML: <dl>, <dt>, <dd> タグを使用しているため、検索エンジンに文書構造を正しく伝えられます。

主なユースケース

このデザインは、以下のような場面で特に効果を発揮します。

• イベント・セミナー概要
  • 日時、会場、定員、参加費、主催者など
• 会社概要・プロフィール
  • 会社名、代表者、設立日、所在地、資本金など
• 製品スペック・仕様表
  • サイズ、重量、素材、カラーバリエーション、価格など
• 求人募集要項
  • 勤務地、給与、勤務時間、応募資格など

HubSpot CMSでの使い方

このコードをDesign Managerでカスタムモジュールとして実装した後の、ページエディタ（編集画面）での操作方法です。

1. コンテンツの編集

モジュールの設定パネルには以下の項目が表示されます。

• Title:セクション全体のタイトルを入力します（例：「イベント概要」）。不要な場合は空欄にすると非表示になります。
• Items (グループ):ここにリストの行を追加していきます。「Add」ボタンでいくらでも増やせます。
  • Row Title: 左側の項目名を入力します（例：「開催日時」）。
  • Content: 右側の内容を入力します。リッチテキスト形式なので、太字にしたりリンクを貼ったりすることが可能です。

2. スタイルの調整 (Styles)

「Styles」タブ（またはグループ）を開くと、以下のデザインを直感的に変更できます。

• Title Color / Size: 大見出しの色とサイズ。
• Label Color: 左側（項目名）の文字色。
• Text Color / Size: 右側（内容）の文字色と全体の文字サイズ。
• Bg Color: リスト全体の背景色。
• Border Color / Size: 区切り線の色と太さ。

モジュールのソースコード

HubSpotのDesign Managerで「新規モジュール」を作成し、以下のコードをそれぞれの箇所に貼り付けてください。

1. fields.json

フィールド定義です。繰り返しフィールド（Items）と、スタイル設定用フィールド（Styles）で構成されています。

‍

[
 {
  "allow_new_line": false,
  "display_width": null,
  "id": "6ef51c75-6d87-4d6f-bc68-1beedff13aac",
  "label": "title",
  "locked": false,
  "name": "title",
  "required": false,
  "type": "text"
 },
 {
  "children": [
   {
    "allow_new_line": false,
    "display_width": null,
    "id": "440c75fa-45a0-401b-b719-4fed4bf08a97",
    "label": "row_title",
    "locked": false,
    "name": "row_title",
    "required": false,
    "type": "text"
   },
   {
    "display_width": null,
    "id": "1e3b082c-a362-5dbc-a2b2-6f5b4dde9f52",
    "label": "content",
    "locked": false,
    "name": "content",
    "required": false,
    "type": "richtext"
   }
  ],
  "default": [],
  "display_width": null,
  "expanded": false,
  "group_occurrence_meta": null,
  "id": "0fec1fe5-d3c2-131e-595b-989d357cf578",
  "label": "items",
  "locked": false,
  "name": "items",
  "occurrence": {},
  "required": false,
  "tab": "CONTENT",
  "type": "group"
 },
 {
  "children": [
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "764c03b3-19ad-3234-2a17-9521b1d8b7a3",
    "label": "title_color",
    "locked": false,
    "name": "title_color",
    "required": false,
    "type": "color"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "360fd10e-2290-cf85-3c03-fc4797ff6b22",
    "label": "title_size",
    "locked": false,
    "name": "title_size",
    "required": false,
    "step": 1,
    "type": "number"
   },
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "affa2a09-3769-cf50-8255-910426c8a58e",
    "label": "label_color",
    "locked": false,
    "name": "label_color",
    "required": false,
    "type": "color"
   },
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "55c972d5-db0a-1b5d-5d09-f06365a575c8",
    "label": "text_color",
    "locked": false,
    "name": "text_color",
    "required": false,
    "type": "color"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "42368473-da19-6609-db94-dbf157f38a84",
    "label": "text_size",
    "locked": false,
    "name": "text_size",
    "required": false,
    "step": 1,
    "type": "number"
   },
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "35e4dc65-e6ad-4a9a-c491-bddf2339ff38",
    "label": "bg_color",
    "locked": false,
    "name": "bg_color",
    "required": false,
    "type": "color"
   },
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "f4b21074-995c-6aee-f577-04dc5055b2cc",
    "label": "border_color",
    "locked": false,
    "name": "border_color",
    "required": false,
    "type": "color"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "107200a3-53b1-539c-ead1-5e6efa863794",
    "label": "border_size",
    "locked": false,
    "name": "border_size",
    "required": false,
    "step": 1,
    "type": "number"
   }
  ],
  "default": {
   "title_color": {
    "color": null,
    "opacity": null
   },
   "label_color": {
    "color": null,
    "opacity": null
   },
   "text_color": {
    "color": null,
    "opacity": null
   },
   "bg_color": {
    "color": null,
    "opacity": null
   },
   "border_color": {
    "color": null,
    "opacity": null
   }
  },
  "display_width": null,
  "expanded": false,
  "group_occurrence_meta": null,
  "id": "04d537c8-1df0-59fe-bb36-052c050d4360",
  "label": "styles",
  "locked": false,
  "name": "styles",
  "required": false,
  "tab": "CONTENT",
  "type": "group"
 }
]