モジュールとテーマのフィールド

モジュールとテーマにフィールドを追加することで、コンテンツ作成者はページエディター内でページのさまざまな要素を制御できます。モジュールとテーマで使用できる全てのフィールドと使用可能なプロパティーについて、以下で説明します。モジュールとテーマのフィールド（フィールドグループや繰り返しフィールドを含む）の実装に関しては、モジュールとテーマのフィールドの概要ぺージで詳しくご確認いただけます。

全てのフィールドで使用されるプロパティー

全てのフィールドは、一般的なプロパティーセットを共有しています。これらはフィールドの名前、またはモジュールやテーマのフィールドを使用するコンテンツ作成者に表示されるヘルプテキストなど、一般的なフィールドです。

{
  "name" : "is_teaser_img",
  "label" : "Enable Teaser Image",
  "required" : false,
  "locked" : false,
  "type" : "boolean",
  "inline_help_text" : "Shows Teaser image when toggled on",
  "help_text" : "Teaser images are used to help provide visual context to the post.",
  "default" : false
  "alias_mapping": {
    "property_aliases_paths": {
      "is_teaser_img": ["old_boolean_field_name"]
    }
  }
}

パラメーター	タイプ	説明	デフォルト値
`name`	文字列	フィールドの名前。モジュールまたはテーマにフィールドとその値を組み込むときに、これを参照します。スペースや特殊文字を含めることはできません。	`richtext_field, date_field, etc.`
`label`	文字列	コンテンツ作成者に表示されるフィールドの説明テキスト。スペースを含めることができます。	`Rich text field, Date field, etc.`
`required`	ブール値	エディターでフィールドを空白のままにできるかどうかを設定します。`true`の場合、フィールドに値がない状態でコンテンツを公開することはできません。	`false`
`locked`	ブール値	フィールドがコンテンツエディターで編集可能かどうかを設定します。`true`の場合、フィールドはコンテンツエディターに表示されません。	`false`
`type`	文字列	フィールドのタイプ。フィールドタイプはフィールドごとに固有で、以下の各フィールドに関する資料に記載されています。
`inline_help_text`	文字列	フィールドのラベルの下にインラインで表示されるテキスト（最大400文字）。フィールドを使用する際の必須情報を示すのに最適です。次のHTMLタグを含めることができます（他のタグはレンダリング時に無視されます）：`a`、`b`、`br`、`em`、`i`、`p`、`small`、`strong`、`span`
`help_text`	文字列	コンテンツ作成者へのヒントとして、カーソルを置いたときにエディターに表示されるテキスト（最大300文字）。フィールドを使用するのに必須ではない補足情報を示すのに最適です。次のHTMLタグを含めることができます（他のタグはレンダリング時に無視されます）：`a`、`b`、`br`、`em`、`i`、`p`、`small`、`strong`、`span`
`id`	文字列	HubSpotによって設定される、フィールドの一意のID。ローカル環境で開発するときにはこのIDを指定する必要はありません。
`visibility`	配列	フィールドの表示条件を設定します。例えば、別のチェックボックスフィールドが選択されている場合にのみ表示するようにフィールドを設定できます。詳しくは表示についてご確認ください。
`display_width`	文字列	デフォルトでは、フィールドはエディター内で全幅表示されます。`fields.json`ファイル内の連続する2つのフィールドが`half_width`に設定されている場合、それらのフィールドはエディター内で互いに隣接して表示されます。
`alias_mapping`	文字列	フィールドのエイリアス。既存のコンテンツを壊すことなく、既存のフィールド値を新しい場所にマッピングします。これは、［コンテンツ］タブから［スタイル］タブにフィールドを移動するなど、公開中のコンテンツで現在使用されているフィールドを更新する必要がある場合に役立ちます。* __ *詳しくは、エイリアスマッピングについてご参照ください。	`False`

位置合わせ

JSON
React

{
  "name": "img_position",
  "label": "Position Image",
  "help_text": "Position the image within it's container.",
  "required": false,
  "type": "alignment",
  "default": {
    "horizontal_align": "CENTER",
    "vertical_align": "TOP"
  }
}

パラメーター	タイプ	説明	デフォルト値
`default`	オブジェクト	`horizontal_align`および`vertical_align`を含むオブジェクト。
`alignment_direction`	文字列	水平方向のみ、垂直方向のみ、または両方の位置合わせコントロールを表示するかどうかを指定します。例： `HORIZONTAL` `VERTICAL` `BOTH`	`BOTH`

import { ModuleFields, AlignmentField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	オブジェクト	`horizontal_align`および`vertical_align`を含むオブジェクト。
`alignmentDirection`	文字列	水平方向のみ、垂直方向のみ、または両方の位置合わせコントロールを表示するかどうかを指定します。例： `HORIZONTAL` `VERTICAL` `BOTH`	`BOTH`

背景画像

JSON
React

{
  "name": "bg_image",
  "label": "Background image",
  "required": false,
  "type": "backgroundimage",
  "default": {
    "src": "https://example.com/img.png",
    "background_position": "MIDDLE_CENTER",
    "background_size": "cover"
  }
}

パラメーター	タイプ	説明	デフォルト値
`default`	オブジェクト	画像のsrc、背景位置、背景サイズを含むオブジェクト。	`null`

import { ModuleFields, BackgroundImageField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	オブジェクト	画像のsrc、背景位置、背景サイズを含むオブジェクト。	`null`

ブログ

JSON
React

{
  "name": "blog",
  "label": "Blog",
  "required": false,
  "locked": false,
  "type": "blog",
  "default": 1234567890
}

パラメーター	タイプ	説明	デフォルト値
`default`	”default”またはブログID	デフォルトで選択されるブログを指定します。このパラメーターには「default」、または（ブログダッシュボードのURLで取得できる）特定のブログIDを指定できます。	`null`

import { ModuleFields, BlogField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	”default”またはブログID	デフォルトで選択されるブログを指定します。このパラメーターには’default’、または（ブログダッシュボードのURLで取得できる）特定のブログIDを指定できます。	`null`

ブール値

JSON
React

{
  "name": "is_teaser_img",
  "label": "Enable Teaser Image",
  "required": false,
  "locked": false,
  "type": "boolean",
  "display": "checkbox",
  "inline_help_text": "Shows Teaser image when toggled on",
  "help_text": "Teaser images are used to help provide visual context to the post.",
  "default": false
}

パラメーター	タイプ	説明	デフォルト値
`default`	ブール値	このフィールドのデフォルトの状態が`true`または`false`のどちらであるかを設定します。	`false`
`display`	文字列	フィールドの視覚表示スタイルを選択します。`toggle`または`checkbox`として表示できます。	`checkbox`

import { ModuleFields, BooleanField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	ブール値	このフィールドのデフォルトの状態が`true`または`false`のどちらであるかを設定します。	`false`
`display`	文字列	フィールドの視覚表示スタイルを選択します。`toggle`または`checkbox`として表示できます。	`checkbox`

切り替えスイッチが適しているのは、フィールドの値によって、条件付きで表示されている他のフィールドを有効化または無効化する場合です。他にも切り替えスイッチが役立つケースとしては、フィールドに基づいてモジュールのデザインが大きく変化する場合です。チェックボックスが適しているのは、小さな個別要素の表示または非表示など、モジュールの表示に大きな影響を及ぼすことがない、軽微な変化の場合です。

境界線

JSON
React

{
  "id": "styles.border",
  "name": "border",
  "label": "border",
  "required": false,
  "locked": false,
  "allow_custom_border_sides": false,
  "type": "border",
  "default": {
    "top": {
      "width": {
        "value": 1,
        "units": "px"
      },
      "opacity": 100,
      "style": "solid",
      "color": "#ffffff"
    },
    "bottom": {
      "width": {
        "value": 1,
        "units": "px"
      },
      "opacity": 100,
      "style": "solid",
      "color": "#ffffff"
    },
    "left": null,
    "right": null
  }
}

パラメーター	タイプ	説明	デフォルト値
`default`	ブール値	境界線の半径、上部、下部、左側、右側のキーを含むオブジェクト。	`{}`

import { ModuleFields, BorderField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	ブール値	境界線の半径、上部、下部、左側、右側のキーを含むオブジェクト。	`{}`

選択

JSON
React

{
  "name": "img_position",
  "label": "Image Position",
  "required": false,
  "locked": false,
  "multiple": "true",
  "display": "select",
  "choices": [
    ["img--left", "Image Left - Text Right"],
    ["img--right", "Text Left - Image Right"]
  ],
  "type": "choice",
  "default": "img--left"
}

パラメーター	タイプ	説明	デフォルト値
`choices`	配列	一意の内部値とそれに続くラベルという形式の、選択可能なオプションを含む配列。	`[ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]`
`default`	値	選択肢の配列の中から、デフォルトで選択される値を設定します。
`multiple`	ブール値	任意指定フィールド。`true`に設定すると、複数のオプションを選択できるようになります。フィールドをチェックボックスのリストまたはドロップダウンメニューとして表示するかどうかを設定するには、`display`を`checkbox`または`select`に設定します。	`false`
`display`	文字列	次のいずれかの値を使用して、フィールドの外観を設定します。 `select`：ドロップダウンメニューをレンダリングします。`multiple`が`true`に設定されている場合、複数のオプションを選択できます。 `checkbox`：選択可能なチェックボックスのリストをレンダリングします。`multiple`が`true`に、かつ`reordering_enabled`が`false`に設定されている場合、複数のオプションを選択できます。 `radio`：ラジオボタンオプションのリストを表示します。複数のオプションを選択することはできません。 `buttons`：指定された`preset`に基づいてボタンのセットを表示します。複数のオプションを選択することはできません。	`"select"`
`reordering_enabled`	ブール値	`true`に設定すると、コンテンツ作成者がエディターでフィールドのオプションを並べ替えることができます。これを有効にするには、`multiple`も`true`に設定する必要があります。	`false`
`preset`	文字列	`display`が`buttons`に設定されている場合に使用するボタンのプリセットを設定します。プリセットごとに、特定の値のセットに一致するように`choices`ラベルを設定する必要があります。これらのプリセットオプションの詳細については、以下をご参照ください。

import { ModuleFields, ChoiceField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`choices`	配列	一意の内部値とそれに続くラベルという形式の、選択可能なオプションを含む配列。	`[ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]`
`default`	値	選択肢の配列の中から、デフォルトで選択される値を設定します。
`multiple`	ブール値	任意指定フィールド。`true`に設定すると、複数のオプションを選択できるようになります。フィールドをチェックボックスのリストまたはドロップダウンメニューとして表示するかどうかを設定するには、`display`を`checkbox`または`select`に設定します。	`false`
`display`	文字列	次のいずれかの値を使用して、フィールドの外観を設定します。 `select`：ドロップダウンメニューをレンダリングします。`multiple`が`true`に設定されている場合、複数のオプションを選択できます。 `checkbox`：選択可能なチェックボックスのリストをレンダリングします。`multiple`が`true`に、かつ`reordering_enabled`が`false`に設定されている場合、複数のオプションを選択できます。 `radio`：ラジオボタンオプションのリストを表示します。複数のオプションを選択することはできません。 `buttons`：指定された`preset`に基づいてボタンのセットを表示します。複数のオプションを選択することはできません。	`"select"`
`reorderingEnabled`	ブール値	`true`に設定すると、コンテンツ作成者がエディターでフィールドのオプションを並べ替えることができます。これを有効にするには、`multiple`も`true`に設定する必要があります。	`false`
`preset`	文字列	`display`が`buttons`に設定されている場合に使用するボタンのプリセットを設定します。プリセットごとに、特定の値のセットに一致するように`choices`ラベルを設定する必要があります。これらのプリセットオプションの詳細については、以下をご参照ください。

選択ボタンのプリセット

ドロップダウンメニュー、チェックボックス、またはラジオ選択の代わりにボタンを表示する選択フィールドを設定するには、以下のプリセットのいずれかを使用します。各プリセットでは、特定のオプションラベルのセットを使用でき、それをchoices配列に含める必要があります。これらのラベルはカスタマイズできません。

{
"name": "layout",
"type": "choice",
"label": "Layout",
"required": false,
"locked": false,
"display": "buttons",
"preset": "layout",
"choices": [
["cards_value", "cards"],
["tiles_value", "tiles"],
["minimal_value", "minimal"]
]
}

import { ModuleFields, ChoiceField } from '@hubspot/cms-components/fields';

プリセット	選択ラベル	例
`case`	`none` \| `upper` \| `lower`

色

JSON
React

{
  "name": "bg_color",
  "label": "Background color",
  "required": false,
  "locked": false,
  "type": "color",
  "default": {
    "color": "#ff0000",
    "opacity": 100
  },
  "limited_options": ["#000000", "#ffffff"]
}

パラメーター	タイプ	説明	デフォルト値
`default`	オブジェクト	デフォルトで選択される色と不透明度を設定します。	`{ "color" : "#ffffff", "opacity" : 100 }`
`show_opacity`	ブール値	不透明度入力が表示されるかどうかを設定します。 `true`：不透明度入力が表示されます。 `false`：不透明度入力が非表示になります。未定義のままにすると、不透明度入力はEメールモジュールでは表示されませんが、他のモジュールタイプでは表示されます。	`undefined`
`limited_options`	配列	デフォルトのカラーグリッドを非表示にし、お気に入りの色の一覧をオーバーライドする文字列の配列（「Favorites」ラベルは「Available colors」になります）。配列内の値は、任意の継承パスで16進コードまたは`color`16進値のいずれかである必要があります。	`undefined`

import { ModuleFields, ColorField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	オブジェクト	デフォルトで選択される色と不透明度を設定します。	`{ "color" : "#ffffff", "opacity" : 100 }`
`showOpacity`	ブール値	不透明度入力が表示されるかどうかを設定します。 `true`：不透明度入力が表示されます。 `false`：不透明度入力が非表示になります。未定義のままにすると、不透明度入力はEメールモジュールでは表示されませんが、他のモジュールタイプでは表示されます。	`undefined`
`limitedOptions`	配列	デフォルトのカラーグリッドを非表示にし、お気に入りの色の一覧をオーバーライドする文字列の配列（「Favorites」ラベルは「Available colors」になります）。配列内の値は、任意の継承パスで16進コードまたは`color`16進値のいずれかである必要があります。	`undefined`

CTA

JSON
React

{
  "name": "cta",
  "label": "CTA",
  "required": false,
  "locked": false,
  "type": "cta",
  "default": null
}

パラメーター	タイプ	説明	デフォルト値
`default`	文字列	デフォルトで選択されるCTA。想定される値は、CTAマネージャーでCTAを編集する際にURLに表示されるCTA IDです。	`null`

import { ModuleFields, CTAField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	文字列	デフォルトで選択されるCTA。想定される値は、CTAマネージャーでCTAを編集する際にURLに表示されるCTA IDです。	`null`

CRMオブジェクト

JSON
React

{
  "name": "crmobject_field",
  "label": "CRM object",
  "required": false,
  "locked": false,
  "object_type": "CONTACT",
  "properties_to_fetch": [],
  "type": "crmobject",
  "default": {
    "id": 1
  }
}

パラメーター	タイプ	説明	デフォルト値
`object_type`	文字列	ユーザーが選択できるCRMオブジェクトのタイプ。サポートされるCRMオブジェクトタイプ
`properties_to_fetch`	配列	オブジェクトタイプに関連付けられているプロパティー名の配列（文字列の形式）。例えば`"date_of_birth"`は、コンタクトに関連付けられたプロパティーです。これを使用すると、必要な情報だけを限定的にページで利用可能にすることができます。
`default`	オブジェクト	デフォルトで選択されるオブジェクトインスタンスのIDを含むオブジェクト。コンタクトID、会社IDなど。	`null`

import { ModuleFields, CRMObjectField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`objectType`	文字列	ユーザーが選択できるCRMオブジェクトのタイプ。サポートされるCRMオブジェクトタイプ
`propertiesToFetch`	配列	オブジェクトタイプに関連付けられているプロパティー名の配列（文字列の形式）。例えば`"date_of_birth"`は、コンタクトに関連付けられたプロパティーです。これを使用すると、必要な情報だけを限定的にページで利用可能にすることができます。
`default`	オブジェクト	デフォルトで選択されるオブジェクトインスタンスのIDを含むオブジェクト。コンタクトID、会社IDなど。	`null`

CRMオブジェクトプロパティー

JSON
React

{
  "name": "crmobjectproperty_field",
  "label": "CRM object property",
  "required": true,
  "locked": false,
  "object_type": "contact",
  "type": "crmobjectproperty",
  "default": {
    "property": "field_of_study"
  }
}

パラメーター	タイプ	説明
`object_type`	文字列	ユーザーが選択できるCRMオブジェクトのタイプ。詳しくはサポートされるCRMオブジェクトタイプをご確認ください。
`default`	オブジェクト	表示するデフォルトのプロパティーが含まれます。

加えて、以下のスニペットを使用すると、他のプロパティーの詳細を返すことができます。

{{ module.fieldname.property }}：プロパティーの内部名を返します。
{{ module.fieldname.property_definition.label }}：プロパティーのラベルを返します。
{{ module.fieldname.property_definition.type }}：プロパティータイプ（文字列など）を返します。

import { ModuleFields, CRMObjectPropertyField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明
`objectType`	文字列	ユーザーが選択できるCRMオブジェクトのタイプ。詳しくはサポートされるCRMオブジェクトタイプをご確認ください。
`default`	オブジェクト	表示するデフォルトのプロパティーが含まれます。

日付

JSON
React

{
  "name": "event_start_date",
  "label": "Event Date",
  "required": false,
  "locked": false,
  "type": "date",
  "default": 1577854800000
}

パラメーター	タイプ	説明	デフォルト値
`default`	タイムスタンプ	日時のデフォルトとして使用するUnixエポック時間のタイムスタンプ。日付入力の開始時に現在の日時をコンテンツ作成者に提示するには、nullのままにします。	`null`

import { ModuleFields, DateField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	タイムスタンプ	日時のデフォルトとして使用するUnixエポック時間のタイムスタンプ。日付入力の開始時に現在の日時をコンテンツ作成者に提示するには、nullのままにします。	`null`

日時

JSON
React

{
  "name": "event_start",
  "label": "Event Start",
  "required": false,
  "locked": false,
  "type": "datetime",
  "default": 1577854800000
}

パラメーター	タイプ	説明	デフォルト値
`default`	タイムスタンプ	日時のデフォルトとして使用するUnixエポック時間のタイムスタンプ。日付入力の開始時に現在の日時をコンテンツ作成者に提示するには、nullのままにします。	`null`

import { ModuleFields, DateTimeField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	タイムスタンプ	日時のデフォルトとして使用するUnixエポック時間のタイムスタンプ。日付入力の開始時に現在の日時をコンテンツ作成者に提示するには、nullのままにします。	`null`

Eメールアドレス

JSON
React

{
  "name": "emails",
  "label": "Email address",
  "required": false,
  "locked": false,
  "type": "email",
  "default": null
}

パラメーター	タイプ	説明	デフォルト値
`default`	配列	Eメールアドレス文字列の配列`["bob@example.com", "dennis@example.com"]`	`null`

import { ModuleFields, EmailField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	配列	Eメールアドレス文字列の配列`["bob@example.com", "dennis@example.com"]`	`null`

埋め込み

JSON
React

{
  "name": "embed_field",
  "label": "Embed",
  "required": false,
  "locked": false,
  "supported_source_types": ["oembed", "html"],
  "supported_oembed_types": ["photo", "video", "link", "rich"],
  "type": "embed",
  "default": {
    "source_type": "oembed"
  }
}

パラメーター	タイプ	説明	デフォルト値
`supported_source_types`	配列	サポートされるソースタイプ。oEmbed URL（`oembed`）、HTML埋め込みコード（`html`）、またはメディアブリッジ（`media_bridge`）のいずれか。	`["oembed", "html"]`
`supported_oembed_types`	配列	サポートされるoEmbedタイプ（`"photo"`、`"video"`、`"link"`、`"rich"`など）。HTMLのsupported_source_typesには適用されません。	`[ "photo", "video", "link", "rich" ]`
`supported_media_bridge_providers`	配列	どのメディアブリッジプロバイダーからコンテンツを選択できるかを決定するプロバイダーIDの配列。なお、メディアブリッジプロバイダーアプリケーションのインストール時にも、このパラメーターに入力されます。
`type`	文字列	このパラメーターは常に`"embed"`に設定されます。	`"embed"`
`default`	ディクショナリー	`"source_type"`パラメーターを含む配列。このパラメーターには、`"supported_source_types"`パラメーターで指定された文字列ベースの値のオプションのうちの1つが含まれます。	`oembed`

import { ModuleFields, EmbedField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`supportedSourceTypes`	配列	サポートされるソースタイプ。oEmbed URL（`oembed`）、HTML埋め込みコード（`html`）、またはメディアブリッジ（`media_bridge`）のいずれか。	`["oembed", "html"]`
`supportedOembedTypes`	配列	サポートされるoEmbedタイプ（`"photo"`、`"video"`、`"link"`、`"rich"`など）。HTMLのsupported_source_typesには適用されません。	`[ "photo", "video", "link", "rich" ]`
`supportedMediaBridgeProviders`	配列	どのメディアブリッジプロバイダーからコンテンツを選択できるかを決定するプロバイダーIDの配列。なお、メディアブリッジプロバイダーアプリケーションのインストール時にも、このパラメーターに入力されます。
`type`	文字列	このパラメーターは常に`"embed"`に設定されます。	`"embed"`
`default`	ディクショナリー	`"source_type"`パラメーターを含む配列。このパラメーターには、`"supported_source_types"`パラメーターで指定された文字列ベースの値のオプションのうちの1つが含まれます。	`oembed`

ファイル

JSON
React

{
  "name": "file_field",
  "label": "File",
  "required": false,
  "locked": false,
  "type": "file",
  "picker": "file",
  "default": null
}

パラメーター	タイプ	説明	デフォルト値
`default`	文字列	ファイルURL。	`null`
`picker`	文字列	利用可能な値は、「file」、「document」、「image」です。このパラメーターに応じて、ファイルマネージャーまたはドキュメントマネージャーにアップロードされたアセットがファイル選択画面に表示されます。	`file`

import { ModuleFields, FileField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	文字列	ファイルURL。	`null`
`picker`	文字列	利用可能な値は、“file”、“document”、“image”です。このパラメーターに応じて、ファイルマネージャーまたはドキュメントマネージャーにアップロードされたアセットがファイル選択画面に表示されます。	`file`

フォローアップEメール

JSON
React

{
  "name": "followup_email",
  "label": "Followup email",
  "required": false,
  "locked": false,
  "type": "followupemail",
  "default": null
}

パラメーター	タイプ	説明	デフォルト値
`default`	文字列	EメールID	`null`

import { ModuleFields, FollowUpEmailField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	文字列	EメールID	`null`

フォント

注：

フォントファミリーは、fontおよびfont_setプロパティーの組み合わせによって決まります。フォントを読み込むには、両方を含める必要があります。つまり、フィールドを継承する場合、両方の値を継承する必要があります。
CSS関連のサブフィールドをvisibilityで非表示にしても、フィールドオブジェクトで返されるスタイルでそのCSSが出力されるのを防ぐことはできません。この場合も、stylesオブジェクトに手動でCSSを含める必要があります。

JSON
React

{
  "name": "font",
  "label": "Font",
  "required": false,
  "locked": false,
  "load_external_fonts": true,
  "type": "font",
  "default": {
    "size": 12,
    "font": "Merriweather",
    "font_set": "GOOGLE",
    "size_unit": "px",
    "color": "#000",
    "styles": {}
  },
  "visibility": {
    "hidden_subfields": {
      "font": true,
      "size": true
    }
  }
}

パラメーター	タイプ	説明	デフォルト値
`default`	オブジェクト	サイズ、サイズ設定単位、色の設定と、太字、イタリック、下線のスタイル設定を含むフォントオブジェクト。	`{ "size" : 12, "size_unit" : "px", "color" : "#000", "styles" : { } }`
`load_external_fonts`	ブール値	スタイルシートまたはモジュール内のHubLによって選択または参照されたウェブフォントが、HubSpotにより自動的にページに読み込まれます。既にページにフォントが読み込まれている場合は、これをfalseに設定しておくことでフォントが二重に読み込まれるのを回避できます。	`true`
`visibility`	オブジェクト	`hidden_subfields`のネストされたオブジェクトを使用して、非表示にするフォントフィールドを制御するブール値を設定できます。サブフィールドには、`font`、`size`、`bold`、`italic`、`underline`、`color`が含まれます。
`variant`	文字列	ウェブフォントを使用する場合の、フォントのバリエーションです。例えば、フォントの太さを700にして使用するには、これを`"700"`に設定します。フォントをイタリックの太さ400にして使用するには、これを`"400i"`に設定します。
`limited_options`	配列	全てのフォントオプションのリストをオーバーライドする文字列の配列。配列内の値は、ハードコーディングされたフォント名または任意の継承パスでフォントの`name`プロパティーを使用する必要があります。例：`theme.typography.body_text.name`。	`undefined`

import { ModuleFields, FontField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	オブジェクト	サイズ、サイズ設定単位、色の設定と、太字、イタリック、下線のスタイル設定を含むフォントオブジェクト。	`{ "size" : 12, "size_unit" : "px", "color" : "#000", "styles" : { } }`
`loadExternalFonts`	ブール値	スタイルシートまたはモジュール内のHubLによって選択または参照されたウェブフォントが、HubSpotにより自動的にページに読み込まれます。既にページにフォントが読み込まれている場合は、これをfalseに設定しておくことでフォントが二重に読み込まれるのを回避できます。	`true`
`visibility`	オブジェクト	`hidden_subfields`のネストされたオブジェクトを使用して、非表示にするフォントフィールドを制御するブール値を設定できます。サブフィールドには、`font`、`size`、`bold`、`italic`、`underline`、`color`が含まれます。
`variant`	文字列	ウェブフォントを使用する場合の、フォントのバリエーションです。例えば、フォントの太さを700にして使用するには、これを`"700"`に設定します。フォントをイタリックの太さ400にして使用するには、これを`"400i"`に設定します。
`limitedOptions`	配列	全てのフォントオプションのリストをオーバーライドする文字列の配列。配列内の値は、ハードコーディングされたフォント名または任意の継承パスでフォントの`name`プロパティーを使用する必要があります。例：`theme.typography.body_text.name`。	`undefined`

フォーム

JSON
React

{
  "id": "idNumber",
  "name": "form_field_name",
  "display_width": null,
  "label": "Form",
  "required": false,
  "locked": false,
  "type": "form",
  "disable_inline_form_editing": true,
  "required_property_types": ["TICKET"],
  "support_all_webinar_types": true,
  "embed_versions": ["v2", "v4"],
  "default": {
    "response_type": "inline",
    "message": "Thanks for submitting the form."
  }
}

パラメーター	タイプ	説明
`default`	オブジェクト	フォーム送信応答の詳細を含むオブジェクト。次のパラメーターが含まれます。 `response_type`：次のいずれかが可能です。 `inline:`：インラインテキストメッセージ。 `redirect`：送信後に訪問者をリダイレクトします。 `message`：フォーム送信後に表示するテキスト。 `redirect_id`：リダイレクトされるフォームの場合、これをHubSpotコンテンツIDに設定すると、フォーム送信者がHubSpotページにリダイレクトされます。 `redirect_url`リダイレクトされるフォームの場合、これを特定のURLに設定すると、フォーム送信者がページにリダイレクトされます。
`disable_inline_form_editing`	文字列	フォームモジュール内の全てのインラインフォーム編集コントロールを非表示にするには、`disable_inline_form_editing`プロパティーを`true`に設定します。これには、フォームフィールド、送信ボタンのテキスト、データのプライバシーと同意のオプション、CAPTCHAが含まれます。
`required_property_types`	配列	フォームフィールドのプロパティータイプに基づいて選択できるフォームを指定する配列。値には、`"CONTACT"`、`"COMPANY"`、および`"TICKET"`を使用できます。
`support_all_webinar_types`	ブール値	`true`に設定すると、より包括的なウェビナーセレクターがフォームに表示され、GoToWebinarに加えてMicrosoft Teamsウェビナーも選択可能になります。また、フォームフィールドの値が若干変更され、`gotowebinar_webinar_key`ではなく`webinar_id`と`webinar_source`が保存されます。これらの包括的なプロパティー値を`gotowebinar_webinar_key`と共にFormタグに戻す必要があります。
`embed_versions`	配列	フォームのバージョンに基づいて選択できるフォームを指定する配列。値には、旧フォームの`"v2"`と新しいエディターフォームの`"v4"`を使用できます。

import { ModuleFields, FormField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明
`default`	オブジェクト	フォーム送信応答の詳細を含むオブジェクト。次のパラメーターが含まれます。 `response_type`：次のいずれかが可能です。 `inline:`：インラインテキストメッセージ。 `redirect`：送信後に訪問者をリダイレクトします。 `message`：フォーム送信後に表示するテキスト。 `redirect_id`：リダイレクトされるフォームの場合、これをHubSpotコンテンツIDに設定すると、フォーム送信者がHubSpotページにリダイレクトされます。 `redirect_url`リダイレクトされるフォームの場合、これを特定のURLに設定すると、フォーム送信者がページにリダイレクトされます。
`disableInlineFormEditing`	文字列	フォームモジュール内の全てのインラインフォーム編集コントロールを非表示にするには、`disableInlineFormEditing`プロパティーを`true`に設定します。これには、フォームフィールド、送信ボタンのテキスト、データのプライバシーと同意のオプション、CAPTCHAが含まれます。
`requiredPropertyTypes`	配列	フォームフィールドのプロパティータイプに基づいて選択できるフォームを指定する配列。値には、`"CONTACT"`、`"COMPANY"`、および`"TICKET"`を使用できます。
`supportAllWebinarTypes`	ブール値	`true`に設定すると、より包括的なウェビナーセレクターがフォームに表示され、GoToWebinarに加えてMicrosoft Teamsウェビナーも選択可能になります。また、フォームフィールドの値が若干変更され、`gotowebinar_webinar_key`ではなく`webinar_id`と`webinar_source`が保存されます。これらの包括的なプロパティー値を`gotowebinar_webinar_key`と共にFormタグに戻す必要があります。
`embedVersions`	配列	フォームのバージョンに基づいて選択できるフォームを指定する配列。値には、旧フォームの`"v2"`と新しいエディターフォームの`"v4"`を使用できます。

グラデーション

JSON
React

{
  "name": "bg_gradient",
  "label": "Background gradient",
  "help_text": "Sets a gradient behind the content",
  "required": false,
  "type": "gradient",
  "default": {
    "colors": [
      {
        "color": {
          "r": 0,
          "g": 0,
          "b": 0,
          "a": 1
        }
      },
      {
        "color": {
          "r": 255,
          "g": 255,
          "b": 255,
          "a": 1
        }
      }
    ],
    "side_or_corner": {
      "verticalSide": "BOTTOM",
      "horizontalSide": null
    }
  }
}

パラメーター	タイプ	説明
`default`	オブジェクト	グラデーションの方向性の設定（“side_or_corner”）およびグラデーションの色の分岐点がオブジェクトの配列として含まれます。

import { ModuleFields, GradientField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明
`default`	オブジェクト	グラデーションの方向性の設定（“side_or_corner”）およびグラデーションの色の分岐点がオブジェクトの配列として含まれます。

HubDB行

JSON
React

{
  "name": "hubdbrow_field",
  "label": "HubDB row",
  "required": false,
  "locked": false,
  "table_name_or_id": "3096859",
  "columns_to_fetch": ["name", "price", "desc"],
  "display_columns": ["name", "price", "desc"],
  "display_format": "%0 - %1 :::: %2",
  "type": "hubdbrow",
  "default": {
    "id": 4450468943
  }
}

パラメーター	タイプ	説明	デフォルト値
`table_name_or_id`	文字列	HubDBテーブルの名前またはID。このフィールドは必須です。
`columns_to_fetch`	配列	テーブルから取得する列名の配列。空白にした場合、テーブル内の全ての列が返されます。	`[]`
`display_columns`	配列	選択ラベルに使用する列名の配列。空白にした場合、テーブルの最初の列のみが返されます。	`[]`
`display_format`	文字列	HubDB行セレクターで列データを表示する形式。パーセント記号と数値を使用して列を指定します。例: 「%0 (%1)」は、「Column0Value (Column1Value)」と表示されます。_ _	`""`
`default`	オブジェクト	デフォルトのHubDB行を設定するためのIDを含むオブジェクト。	`{ "id" : null }`

import { ModuleFields, HubDBRowField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`tableNameOrId`	文字列	HubDBテーブルの名前またはID。このフィールドは必須です。
`columnsToFetch`	配列	テーブルから取得する列名の配列。空白にした場合、テーブル内の全ての列が返されます。	`[]`
`displayColumns`	配列	選択ラベルに使用する列名の配列。空白にした場合、テーブルの最初の列のみが返されます。	`[]`
`displayFormat`	文字列	HubDB行セレクターで列データを表示する形式。パーセント記号と数値を使用して列を指定します。例: 「%0 (%1)」は、「Column0Value (Column1Value)」と表示されます。_ _	`""`
`default`	オブジェクト	デフォルトのHubDB行を設定するためのIDを含むオブジェクト。	`{ "id" : null }`

HubDBテーブル

JSON
React

{
  "name": "recipe_table",
  "label": "Recipe Table",
  "required": false,
  "locked": false,
  "type": "hubdbtable",
  "default": 2010782
}

パラメーター	タイプ	説明	デフォルト値
`default`	文字列	HubDBテーブルID	`null`

import { ModuleFields, HubDBTableField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	文字列	HubDBテーブルID	`null`

アイコン

JSON
React

{
  "name": "icon_field",
  "label": "Icon",
  "required": false,
  "locked": false,
  "icon_set": "fontawesome-6.4.2",
  "type": "icon",
  "default": {
    "name": "accessible-icon",
    "unicode": "f368",
    "type": "REGULAR"
  }
}

パラメーター	タイプ	説明	デフォルト値
`default`	オブジェクト	アイコンオブジェクト
`icon_set`	文字列	使用するFontAwesomeアイコンセット。指定可能な値は以下の通りです。 `fontawesome-6.4.2` `fontawesome-5.14.0` `fontawesome-5.0.10`	`fontawesome-5.0.10`

import { ModuleFields, IconField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	オブジェクト	アイコンオブジェクト
`iconSet`	文字列	使用するFontAwesomeアイコンセット。指定可能な値は以下の通りです。 `fontawesome-6.4.2` `fontawesome-5.14.0` `fontawesome-5.0.10`	`fontawesome-5.0.10`

画像

画像フィールドはモジュール内でサポートされます。画像はスタイルフィールドとして使用できます。メッセージ性のない単なるイメージ画像で、背景画像でもない場合は、画像フィールドをスタイルフィールドとしてのみ使用してください。これにより、アクセシビリティーのベストプラクティスに従うことができます。

JSON
React

{
  "name": "image_field",
  "label": "Image",
  "required": false,
  "locked": false,
  "responsive": true,
  "resizable": true,
  "show_loading": false,
  "type": "image",
  "default": {
    "size_type": "exact",
    "src": "",
    "alt": "image-alt-text",
    "loading": "lazy",
    "width": 128,
    "height": 128,
    "max_width": 128,
    "max_height": 128
  }
}

パラメーター	タイプ	説明	デフォルト値
`default`	オブジェクト	画像サイズ、代替テキストなどのプロパティーを設定します。以下のプロパティーを含めることができます。 `size_type`：画像のサイズを自動または手動のどちらで設定するか。 `"auto"`：元のサイズを基準に、HubSpotによって画像サイズが自動調整されます。 `"auto_custom_max"`：`"max_height"`および`"max_width"`プロパティーで指定された最大サイズを基準に、HubSpotによって画像サイズが自動調整されます。 `"exact":`：`"height"`および`"width"`プロパティーで指定されたサイズを基準に、HubSpotによって画像サイズが設定されます。 `src`：デフォルトの画像のURL。画像の絶対パスにする必要があります。 `alt`：画像のデフォルトの代替テキスト。 `loading`：画像の遅延読み込みオプション。`"disabled"`（デフォルト）、`"eager"`、`"lazy"`のいずれかを設定できます。	`{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }`
`responsive`	ブール値	画像がレスポンシブ対応か、それとも高さと幅が固定されるかを指定します。	`true`
`show_loading`	ブール値	画像の遅延読み込みを選択するためのコントロールをページエディターに表示するかどうかを指定します。	`false`

import { ModuleFields, ImageField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	オブジェクト	画像サイズ、代替テキストなどのプロパティーを設定します。以下のプロパティーを含めることができます。 `size_type`：画像のサイズを自動または手動のどちらで設定するか。 `"auto"`：元のサイズを基準に、HubSpotによって画像サイズが自動調整されます。 `"auto_custom_max"`：`"max_height"`および`"max_width"`プロパティーで指定された最大サイズを基準に、HubSpotによって画像サイズが自動調整されます。 `"exact":`：`"height"`および`"width"`プロパティーで指定されたサイズを基準に、HubSpotによって画像サイズが設定されます。 `src`：デフォルトの画像のURL。画像の絶対パスにする必要があります。 `alt`：画像のデフォルトの代替テキスト。 `loading`：画像の遅延読み込みオプション。`"disabled"`（デフォルト）、`"eager"`、`"lazy"`のいずれかを設定できます。	`{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }`
`responsive`	ブール値	画像がレスポンシブ対応か、それとも高さと幅が固定されるかを指定します。	`true`
`showLoading`	ブール値	画像の遅延読み込みを選択するためのコントロールをページエディターに表示するかどうかを指定します。	`false`

リンク

JSON
React

{
  "name": "link_field",
  "display_width": null,
  "label": "Link",
  "required": false,
  "locked": false,
  "supported_types": [
    "EXTERNAL",
    "CONTENT",
    "FILE",
    "EMAIL_ADDRESS",
    "BLOG",
    "CALL_TO_ACTION",
    "PHONE_NUMBER",
    "WHATSAPP_NUMBER",
    "PAYMENT"
  ],
  "show_advanced_rel_options": true,
  "type": "link",
  "default": {
    "url": {
      "content_id": null,
      "type": "EXTERNAL",
      "href": ""
    },
    "open_in_new_tab": false,
    "no_follow": false
  }
}

パラメーター	タイプ	説明	デフォルト値
`default`	オブジェクト	デフォルトのURLと「リンクを開く」動作。このオブジェクトには次のものが含まれます。次のものが含まれる1つの`url`オブジェクト `content_id`：HubSpotコンテンツにリンクする場合、そのコンテンツのID。外部コンテンツにリンクする場合は`null`に設定されます。 `type`：URLのタイプ。サポートされるタイプについては下記をご参照ください。 `href`：コンテンツのURL。HubSpotコンテンツにリンクする場合はこれを`null`に設定し、代わりに`content_id`を使用します。	`{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }`
`supported_types`	配列	コンテンツ作成者が選択できるリンクのタイプ。コンテンツ作成者が利用しないタイプはこのリストから削除してください。有効なタイプは次の通りです。 `EXTERNAL` `CONTENT` `FILE` `EMAIL_ADDRESS` `BLOG` `CALL_TO_ACTION` `PHONE_NUMBER` `WHATSAPP_NUMBER` `PAYMENT`	`[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER", "WHATSAPP_NUMBER", "PAYMENT" ]`
`show_advanced_rel_options`	ブール値	デフォルトでは、制作担当者は`no_follow`オプションのみを選択できます。`true`に設定すると、コンテンツ作成者は以下を選択することもできます。 `sponsored`：有料広告リンクなどのスポンサー付きリンク。 `user_generated_content`：フォーラムなどの、ユーザーが生成したコンテンツ。詳しくはリンク属性をご参照ください。	`false`

import { ModuleFields, LinkField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	オブジェクト	デフォルトのURLと「リンクを開く」動作。このオブジェクトには次のものが含まれます。次のものが含まれる1つの`url`オブジェクト `content_id`：HubSpotコンテンツにリンクする場合、そのコンテンツのID。外部コンテンツにリンクする場合は`null`に設定されます。 `type`：URLのタイプ。サポートされるタイプについては下記をご参照ください。 `href`：コンテンツのURL。HubSpotコンテンツにリンクする場合はこれを`null`に設定し、代わりに`content_id`を使用します。	`{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }`
`supportedTypes`	配列	コンテンツ作成者が選択できるリンクのタイプ。コンテンツ作成者が利用しないタイプはこのリストから削除してください。有効なタイプは次の通りです。 `EXTERNAL` `CONTENT` `FILE` `EMAIL_ADDRESS` `BLOG` `CALL_TO_ACTION` `PHONE_NUMBER` `WHATSAPP_NUMBER` `PAYMENT`	`[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER", "WHATSAPP_NUMBER", "PAYMENT" ]`
`showAdvancedRelOptions`	ブール値	デフォルトでは、制作担当者は`no_follow`オプションのみを選択できます。`true`に設定すると、コンテンツ作成者は以下を選択することもできます。 `sponsored`：有料広告リンクなどのスポンサー付きリンク。 `user_generated_content`：フォーラムなどの、ユーザーが生成したコンテンツ。詳しくはリンク属性をご参照ください。	`false`

ロゴ

JSON
React

{
  "name": "logo",
  "label": "Logo",
  "required": false,
  "locked": false,
  "type": "logo",
  "show_loading": true,
  "default": {
    "override_inherited_src": false,
    "src": null,
    "alt": null,
    "loading": "lazy"
  }
}

パラメーター	タイプ	説明	デフォルト値
`show_loading`	文字列	画像の遅延読み込みを選択するためのコントロールをページエディターに表示するかどうかを決定します。	`false`
`default`	オブジェクト	ロゴオブジェクト。`show_loading`が`true`に設定されている場合は、`loading`プロパティーを含めることで、画像の遅延読み込みオプションを設定できます。次のオプションがあります。 `"disabled"`（デフォルト） `"eager"` `"lazy"`	`{ override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }`

import { ModuleFields, LogoField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`showLoading`	文字列	画像の遅延読み込みを選択するためのコントロールをページエディターに表示するかどうかを決定します。	`false`
`default`	オブジェクト	ロゴオブジェクト。`show_loading`が`true`に設定されている場合は、`loading`プロパティーを含めることで、画像の遅延読み込みオプションを設定できます。次のオプションがあります。 `"disabled"`（デフォルト） `"eager"` `"lazy"`	`{ override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }`

メニュー

JSON
React

{
  "name": "menu",
  "label": "Menu",
  "required": false,
  "locked": false,
  "type": "menu",
  "default": 12345678911
}

パラメーター	タイプ	説明	デフォルト値
`default`	整数	メニューのメニューID。デフォルト値の`null`の場合、ナビゲーション下のデフォルトのメニューが設定されます。	`null`

import { ModuleFields, MenuField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	整数	メニューのメニューID。デフォルト値の`null`の場合、ナビゲーション下のデフォルトのメニューが設定されます。	`null`

数値

JSON
React

{
  "name": "number_field",
  "label": "Number",
  "required": false,
  "locked": false,
  "display": "slider",
  "min": 1,
  "max": 10,
  "step": 1,
  "type": "number",
  "prefix": "",
  "suffix": "",
  "default": null,
  "placeholder": "50"
}

パラメーター	タイプ	説明	デフォルト値
`default`	数値	デフォルトとして使用する数値。	`null`
`prefix`	文字列	数値フィールドの前に追加するプレフィックス。
`suffix`	文字列	数値フィールドの後に追加するサフィックス。
`placeholder`	文字列	フィールドにプレースホルダー値を追加します。

import { ModuleFields, NumberField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	数値	デフォルトとして使用する数値。	`null`
`prefix`	文字列	数値フィールドの前に追加するプレフィックス。
`suffix`	文字列	数値フィールドの後に追加するサフィックス。
`placeholder`	文字列	フィールドにプレースホルダー値を追加します。

サフィックスパラメーターとプレフィックスパラメーターは、コンテンツエディターでの表示を目的としたもので、フィールドの数値には影響しません。

ページ

JSON
React

{
  "name": "page_field",
  "label": "Page",
  "help_text": "Pulls data from the selected page.",
  "required": false,
  "locked": false,
  "placeholder": "Page to pull from",
  "type": "page",
  "default": null
}

パラメーター	タイプ	説明	デフォルト値
`default`	整数	デフォルトで選択するページのID。	`null`

import { ModuleFields, PageField } from "@hubspot/cms-components/fields";

パラメーター	タイプ	説明	デフォルト値
`default`	整数	デフォルトで選択するページのID。	`null`

リッチテキスト

JSON
React

{
  "name": "description",
  "label": "Description",
  "required": false,
  "locked": false,
  "type": "richtext",
  "default": null
}

パラメーター	タイプ	説明	デフォルト値
`default`	文字列	表示するコンテンツの文字列はHTMLをサポートします。注：このデフォルトのプロパティー内では`get_asset_url`関数を使用できません。	`""`
`enabled_features`	配列	この項目配列を使用すると、リッチテキストエディターのツールバーでコンテンツ編集者に利用可能にするオプションを設定できます。

import { ModuleFields, RichTextField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	文字列	表示するコンテンツの文字列はHTMLをサポートします。注：このデフォルトのプロパティー内では`get_asset_url`関数を使用できません。	`""`
`enabledFeatures`	配列	この項目配列を使用すると、リッチテキストエディターのツールバーでコンテンツ編集者に利用可能にするオプションを設定できます。

シンプルメニュー

JSON
React

{
  "name": "toc_menu",
  "label": "Table of Contents",
  "required": false,
  "locked": false,
  "type": "simplemenu",
  "default": [
    {
      "isPublished": false,
      "pageLinkId": null,
      "pageLinkName": null,
      "isDeleted": null,
      "categoryId": null,
      "subCategory": null,
      "contentType": null,
      "state": null,
      "linkLabel": "Why is product marketing important?",
      "linkUrl": null,
      "linkParams": null,
      "linkTarget": null,
      "type": "NO_LINK",
      "children": [
        {
          "isPublished": false,
          "pageLinkId": null,
          "pageLinkName": null,
          "isDeleted": null,
          "categoryId": null,
          "subCategory": null,
          "contentType": null,
          "state": null,
          "linkLabel": "Product Marketing Responsibilities",
          "linkUrl": "#product-marketing-responsibilities",
          "linkParams": null,
          "linkTarget": null,
          "type": "URL_LINK",
          "children": []
        },
        {
          "isPublished": false,
          "pageLinkId": null,
          "pageLinkName": null,
          "isDeleted": null,
          "categoryId": null,
          "subCategory": null,
          "contentType": null,
          "state": null,
          "linkLabel": "1. Identify the buyer personas and target audience for your product.",
          "linkUrl": "#step1",
          "linkParams": null,
          "linkTarget": null,
          "type": "URL_LINK",
          "children": []
        },
        {
          "isPublished": false,
          "pageLinkId": null,
          "pageLinkName": null,
          "isDeleted": null,
          "categoryId": null,
          "subCategory": null,
          "contentType": null,
          "state": null,
          "linkLabel": "2. Successfully create, manage and carry out your product marketing strategy.",
          "linkUrl": "#step2",
          "linkParams": null,
          "linkTarget": null,
          "type": "URL_LINK",
          "children": []
        }
      ]
    },
    {
      "isPublished": false,
      "pageLinkId": null,
      "pageLinkName": null,
      "isDeleted": null,
      "categoryId": null,
      "subCategory": null,
      "contentType": null,
      "state": null,
      "linkLabel": "How HubSpot can help",
      "linkUrl": "https://hubspot.com",
      "linkParams": null,
      "linkTarget": null,
      "type": "URL_LINK",
      "children": []
    }
  ]
}

パラメーター	タイプ	説明	デフォルト値
`default`	オブジェクトの配列	メニューと子メニューを表すJSON構造。	`[]`

import { ModuleFields, SimpleMenuField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	オブジェクトの配列	メニューと子メニューを表すJSON構造。	`[]`

間隔

JSON
React

{
  "name": "img_spacing",
  "label": "Spacing around image",
  "required": false,
  "type": "spacing",
  "limits": {
    "padding": {
      "top": {
        "max": 50,
        "min": 25,
        "units": ["px", "pt", "em"]
      },
      "left": {
        "max": 50,
        "units": ["px", "pt", "em"]
      },
      "bottom": {
        "max": 50,
        "units": ["px", "pt", "em"]
      }
    },
    "margin": {
      "top": {
        "max": 50,
        "min": 25,
        "units": ["px", "pt", "em"]
      },
      "bottom": {
        "max": 25,
        "units": ["Q", "rem", "em"]
      }
    }
  },
  "default": {
    "padding": {
      "top": {
        "value": 57,
        "units": "px"
      },
      "bottom": {
        "value": 57,
        "units": "px"
      },
      "left": {
        "value": 57,
        "units": "px"
      },
      "right": {
        "value": 57,
        "units": "px"
      }
    },
    "margin": {
      "top": {
        "value": 20,
        "units": "px"
      },
      "bottom": {
        "value": 20,
        "units": "px"
      }
    }
  }
}

パラメーター	タイプ	説明	デフォルト値
`default`	オブジェクト	デフォルトの間隔値を設定します。`padding`および`margin`オブジェクトを含んでいます。 `padding`には`top`、`right`、`bottom`、`left`の各オブジェクトを含めることができます。 `margin`には`top`および`bottom`オブジェクトを含めることができます。 `units`は、HubSpotでコンテンツ作成者が使用できる単位を設定します。単位について詳しくは、下記をご参照ください。	`{}`
`limits`	オブジェクト	間隔の`min`量と`max`量のガイドラインを設定します。`padding`オブジェクトと`margin`オブジェクトを含んでいます。 `padding`には`top`、`right`、`bottom`、`left`の各オブジェクトを含めることができます。 `margin`には`top`および`bottom`オブジェクトを含めることができます。 `units`は、HubSpotでコンテンツ作成者が使用できる単位を設定します。単位について詳しくは、下記をご参照ください。

import { ModuleFields, SpacingField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	オブジェクト	デフォルトの間隔値を設定します。`padding`および`margin`オブジェクトを含んでいます。 `padding`には`top`、`right`、`bottom`、`left`の各オブジェクトを含めることができます。 `margin`には`top`および`bottom`オブジェクトを含めることができます。 `units`は、HubSpotでコンテンツ作成者が使用できる単位を設定します。単位について詳しくは、下記をご参照ください。	`{}`
`limits`	オブジェクト	間隔の`min`量と`max`量のガイドラインを設定します。`padding`オブジェクトと`margin`オブジェクトを含んでいます。 `padding`には`top`、`right`、`bottom`、`left`の各オブジェクトを含めることができます。 `margin`には`top`および`bottom`オブジェクトを含めることができます。 `units`は、HubSpotでコンテンツ作成者が使用できる単位を設定します。単位について詳しくは、下記をご確認ください。

間隔フィールドを使用する場合は、次の点に注意してください。

minまたはmaxを設定するときにはunitsリストを含める必要があります。
unitsプロパティーがサポートする単位タイプは%、ch、em、ex、in、lh、pc、pt、px、Q、rem、vh、vmax、vmin、vwです。
コンテンツ作成者が全てのパディングをまとめて編集する場合、HubSpotでは最も高いmin値と最も低いmax値が使用されます。また、コンテンツ作成者が使用できるのは、全てのサイドで共有されている単位のみとなります。

パラメーター	タイプ	説明	デフォルト値
`default`	文字列	タグのID。	`null`
`tag_value`	文字列	出力値。次のいずれかを使用できます。 `ALL`：タグの名前、一意のID、URLスラッグが含まれるオブジェクト。 `ID`：タグの一意のID。 `NAME`：タグの名前。 `SLUG`：タグのURLスラッグ。	`SLUG`

import { ModuleFields, TagField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	文字列	タグのID。	`null`
`tagValue`	文字列	出力値。次のいずれかを使用できます。 `ALL`：タグの名前、一意のID、URLスラッグが含まれるオブジェクト。 `ID`：タグの一意のID。 `NAME`：タグの名前。 `SLUG`：タグのURLスラッグ。	`SLUG`

テキスト

JSON
React

{
  "name": "product_name",
  "label": "Product Name",
  "required": false,
  "locked": false,
  "validation_regex": "",
  "allow_new_line": false,
  "show_emoji_picker": false,
  "type": "text",
  "default": ""
}

パラメーター	タイプ	説明	デフォルト値
`default`	文字列	テキスト文字列。	`""`

import { ModuleFields, TextField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	文字列	テキスト文字列。	`""`

テキストの位置合わせ

JSON
React

{
  "name": "heading_align",
  "label": "Heading alignment",
  "required": false,
  "type": "textalignment",
  "default": {
    "text_align": "LEFT"
  }
}

パラメーター	タイプ	説明	デフォルト値
`default`	オブジェクト	`horizontal_align`および`vertical_align`を含むオブジェクト。
`alignment_direction`	文字列	水平方向のみ、垂直方向のみ、または両方の位置合わせコントロールを表示するかどうかを指定します。例： `HORIZONTAL` `VERTICAL` `BOTH`	`BOTH`

import { ModuleFields, TextAlignmentField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	オブジェクト	`horizontal_align`および`vertical_align`を含むオブジェクト。
`alignmentDirection`	文字列	水平方向のみ、垂直方向のみ、または両方の位置合わせコントロールを表示するかどうかを指定します。例： `HORIZONTAL` `VERTICAL` `BOTH`	`BOTH`

URL

JSON
React

{
  "name": "url",
  "label": "URL",
  "required": false,
  "locked": false,
  "supported_types": ["EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "PHONE_NUMBER", "WHATSAPP_NUMBER"],
  "type": "url",
  "default": {
    "content_id": null,
    "href": "http://example.com",
    "type": "EXTERNAL"
  }
}

パラメーター	タイプ	説明	デフォルト値
`default`	オブジェクト	タイプ、href、コンテンツID（コンテンツがHubSpotのページまたは投稿である場合）を伴うURLオブジェクト。	`{ "content_id" : null, "href" : "", "type" : "EXTERNAL" }`
`supported_types`	配列	このフィールド上でコンテンツ作成者が選択できるリンクタイプのリスト。コンテンツ作成者が利用しないタイプはこのリストから削除してください。次のタイプがあります。 `EXTERNAL`：外部URLのテキスト入力フィールドをレンダリングします。 `CONTENT`：アカウントのウェブサイトとランディングページを含むドロップダウンメニューをレンダリングします。 `FILE`：ファイルセレクターをレンダリングします。 `EMAIL_ADDRESS`：Eメールアドレスのテキスト入力フィールドをレンダリングします。 `BLOG`：アカウントのブログリストページを含むドロップダウンメニューを表示します。 `PHONE_NUMBER`：電話番号のテキスト入力フィールドをレンダリングします。番号は`+`で始まり、（国コードを除いて）7～15桁の間でなければなりません。 `WHATSAPP_NUMBER`：アカウントの接続済みWhatsApp電話番号を含むドロップダウンメニューをレンダリングします。	`[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]`

import { ModuleFields, UrlField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	オブジェクト	タイプ、href、コンテンツID（コンテンツがHubSpotのページまたは投稿である場合）を伴うURLオブジェクト。	`{ "content_id" : null, "href" : "", "type" : "EXTERNAL" }`
`supportedTypes`	配列	このフィールド上でコンテンツ作成者が選択できるリンクタイプのリスト。コンテンツ作成者が利用しないタイプはこのリストから削除してください。次のタイプがあります。 `EXTERNAL`：外部URLのテキスト入力フィールドをレンダリングします。 `CONTENT`：アカウントのウェブサイトとランディングページを含むドロップダウンメニューをレンダリングします。 `FILE`：ファイルセレクターをレンダリングします。 `EMAIL_ADDRESS`：Eメールアドレスのテキスト入力フィールドをレンダリングします。 `BLOG`：アカウントのブログリストページを含むドロップダウンメニューを表示します。 `PHONE_NUMBER`：電話番号のテキスト入力フィールドをレンダリングします。番号は`+`で始まり、（国コードを除いて）7～15桁の間でなければなりません。 `WHATSAPP_NUMBER`：アカウントの接続済みのWhatsApp電話番号を含むドロップダウンメニューをレンダリングします。	`[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]`

動画

JSON
React

{
  "id": "ca4a319e-5b58-422e-47ac-49ce1b51b507",
  "name": "videoplayer_field",
  "label": "Video",
  "required": false,
  "locked": false,
  "type": "videoplayer",
  "show_advanced_options": false,
  "default": {
    "player_id": 32173842991,
    "height": 1224,
    "width": 1872,
    "conversion_asset": {
      "type": "CTA",
      "id": "c3e4fa03-2c69-461d-b9af-22b2fde86bc7",
      "position": "POST"
    },
    "loop_video": false,
    "mute_by_default": false,
    "autoplay": false,
    "hide_control": false
  }
}

パラメーター	タイプ	説明	デフォルト値
`default`	オブジェクト	動画オブジェクト。`player_id`、`height`、`width`、`size_type`、`conversion_asset`、`loop_video`、`mute_by_default`、`autoplay`、`hide_control`の設定を含んでいます。	`[]`
`show_advanced_options`	ブール値	高度なデフォルトのオプションをコンテンツ作成者に対して表示するかどうかを指定します。	`false`

import { ModuleFields, VideoField } from "@hubspot/cms-components/fields";

プロパティー	タイプ	説明	デフォルト値
`default`	オブジェクト	動画オブジェクト。`player_id`、`height`、`width`、`size_type`、`conversion_asset`、`loop_video`、`mute_by_default`、`autoplay`、`hide_control`の設定を含んでいます。	`[]`
`showAdvancedOptions`	ブール値	高度なデフォルトのオプションをコンテンツ作成者に対して表示するかどうかを指定します。	`false`

conversion_assetオブジェクトパラメーター

パラメーター	タイプ	説明	デフォルト値
`type`	文字列	`"FORM"`、`"CTA"`、または`""`を指定できます。	`""`
`id`	文字列	フォームまたはCTAタイプのID	`""`
`position`	文字列	動画の開始前または終了後にコンバージョンアセットを表示するかどうかを指定します。「PRE」または「POST」のいずれかを指定できます。	`""`

​全てのフィールドで使用されるプロパティー

​位置合わせ

​背景画像

​ブログ

​ブール値

​境界線

​選択

​選択ボタンのプリセット

​色

​CTA

​CRMオブジェクト

​CRMオブジェクトプロパティー

​日付

​日時

​Eメールアドレス

​埋め込み

​ファイル

​フォローアップEメール

​フォント

​注：

​フォーム

​グラデーション

​HubDB行

​HubDBテーブル

​アイコン

​画像

​リンク

​ロゴ

​メニュー

​数値

​ページ

​リッチテキスト

​シンプルメニュー

​間隔

​タグ

​テキスト

​テキストの位置合わせ

​URL

​動画

​conversion_assetオブジェクトパラメーター

全てのフィールドで使用されるプロパティー

位置合わせ

背景画像

ブログ

ブール値

境界線

選択

選択ボタンのプリセット

色

CTA

CRMオブジェクト

CRMオブジェクトプロパティー

日付

日時

Eメールアドレス

埋め込み

ファイル

フォローアップEメール

フォント

注：

フォーム

グラデーション

HubDB行

HubDBテーブル

アイコン

画像

リンク

ロゴ

メニュー

数値

ページ

リッチテキスト

シンプルメニュー

間隔

タグ

テキスト

テキストの位置合わせ

URL

動画

conversion_assetオブジェクトパラメーター