> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.jp/docs/llms.txt
> Use this file to discover all available pages before exploring further.

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

> HubSpotにはさまざまなフィールドがあります。これらのフィールドを使用して、テーマやモジュールを柔軟にカスタマイズできるようになっています。

モジュールとテーマにフィールドを追加することで、コンテンツ作成者はページエディター内でページのさまざまな要素を制御できます。モジュールとテーマで使用できる全てのフィールドと使用可能なプロパティーについて、以下で説明します。

モジュールとテーマのフィールド（フィールドグループや繰り返しフィールドを含む）の実装に関しては、[モジュールとテーマのフィールドの概要ぺージ](https://developers.hubspot.jp/docs/cms/reference/fields/overview)で詳しくご確認いただけます。

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

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

```json theme={null}
{
  "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`       | 配列   | フィールドの表示条件を設定します。例えば、別のチェックボックスフィールドが選択されている場合にのみ表示するようにフィールドを設定できます。詳しくは[表示](https://developers.hubspot.jp/docs/cms/reference/fields/overview#field-visibility)についてご確認ください。                                                           |                                     |
| `display_width`    | 文字列  | デフォルトでは、フィールドはエディター内で全幅表示されます。`fields.json`ファイル内の連続する2つのフィールドが`half_width`に設定されている場合、それらのフィールドはエディター内で互いに隣接して表示されます。                                                                                                                   |                                     |
| `alias_mapping`    | 文字列  | フィールドのエイリアス。既存のコンテンツを壊すことなく、既存のフィールド値を新しい場所にマッピングします。これは、［コンテンツ］タブから［スタイル］タブにフィールドを移動するなど、公開中のコンテンツで現在使用されているフィールドを更新する必要がある場合に役立ちます。\* \_\_ \*詳しくは、[エイリアスマッピング](/cms/start-building/building-blocks/fields/alias-mapping)についてご参照ください。 | `False`                             |

## 位置合わせ

<DndSection>
  <DndModule numCols={6}>
    <div>
      コンテンツ作成者が要素をコンテナー内に配置できるようにします。テキストの位置合わせを有効にするには、代わりに[テキスト位置合わせフィールド](/cms/reference/fields/module-theme-fields#text-alignment)を使用します。

      位置合わせフィールドは[モジュール](https://developers.hubspot.jp/docs/cms/start-building/building-blocks/modules/overview)でサポートされており、[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)としてのみ使用可能です。
    </div>
  </DndModule>

  <DndModule numCols={6}>
    <Frame>
      <img src="https://www.hubspot.jp/hubfs/Alignment-field.png" alt="位置合わせフィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "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` | 文字列    | 水平方向のみ、垂直方向のみ、または両方の位置合わせコントロールを表示するかどうかを指定します。例：<ul><li>`HORIZONTAL`</li><li>`VERTICAL`</li><li>`BOTH`</li></ul> | `BOTH` |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, AlignmentField } from "@hubspot/cms-components/fields";
    ```

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

## 背景画像

<DndSection>
  <DndModule numCols={7}>
    <div>
      このフィールドは、背景位置と背景サイズのサブフィールドを備える背景画像フィールドを提供します。背景画像フィールドには、フィールドの値に基づいてCSSを返す`.css`プロパティーがあります。詳しくは[生成されるCSSプロパティー](https://developers.hubspot.jp/docs/cms/reference/fields/overview#generated-css)についてご確認ください。

      配置フィールドは[モジュール](https://developers.hubspot.jp/docs/cms/start-building/building-blocks/modules/overview)でサポートされており、[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)としてのみ使用可能です。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://www.hubspot.jp/hubfs/bg_field.png" alt="背景画像フィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "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` |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, BackgroundImageField } from "@hubspot/cms-components/fields";
    ```

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

## ブログ

<DndSection>
  <DndModule numCols={7}>
    <div>
      コンテンツ作成者はこのフィールドを使用してブログを選択し、開発者にブログIDを提示することができます。モジュール内でティーザーとして扱うブログの情報を呼び出す場合などに便利です。ブログIDは、ブログ関連の[HubL関数](/cms/reference/hubl/functions)で使用して、[ブログ執筆者](/cms/reference/hubl/functions#blog-authors)、[最近のブログ記事](/cms/reference/hubl/functions#blog-recent-posts)、[特定のタグが付いた最近のブログ記事](/cms/reference/hubl/functions#blog-recent-tag-posts)などの情報を取得できます。

      ブログフィールドはモジュール内でサポートされます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/Blog%20field.png" alt="ブログフィールドのスクリーンショット" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "blog",
      "label": "Blog",
      "required": false,
      "locked": false,
      "type": "blog",
      "default": 1234567890
    }
    ```

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

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, BlogField } from "@hubspot/cms-components/fields";
    ```

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

## ブール値

<DndSection>
  <DndModule numCols={7}>
    <div>
      このフィールドを使うと、コンテンツ作成者は機能をオンまたはオフに切り替えることができます。ブール値として可能な値は`true`または`false`のみです。グループまたはフィールドに、ブール型フィールドに基づく条件を設定することが適切なケースは少なくありません。将来的に2つの状態では足りなくなることが想定される場合は、[選択](#choice)フィールドを使用した方が、後で状態を追加する際の変更作業が軽減されます。

      ブール型フィールドはテーマとモジュールの両方でサポートされます。ブール型フィールドは[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)として使用できます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/Boolean.png" alt="ブール型フィールドのスクリーンショット" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "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` |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, BooleanField } from "@hubspot/cms-components/fields";
    ```

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

<Tip>
  切り替えスイッチが適しているのは、フィールドの値によって、条件付きで表示されている他のフィールドを有効化または無効化する場合です。他にも切り替えスイッチが役立つケースとしては、フィールドに基づいてモジュールのデザインが大きく変化する場合です。

  チェックボックスが適しているのは、小さな個別要素の表示または非表示など、モジュールの表示に大きな影響を及ぼすことがない、軽微な変化の場合です。
</Tip>

## 境界線

<DndSection>
  <DndModule numCols={7}>
    <div>
      このフィールドは、コンテンツ作成者が要素の周囲に境界線を作成するためのユーザーインターフェイスを提供します。境界線フィールドには、フィールドの値に基づいてCSSを返す`.css`プロパティーがあります。詳しくは[生成されるCSSプロパティー](https://developers.hubspot.jp/docs/cms/reference/fields/overview#generated-css)についてご確認ください。

      境界線フィールドは[モジュール](https://developers.hubspot.jp/docs/cms/start-building/building-blocks/modules/overview)内でサポートされます。境界線フィールドは[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)としてのみ使用できます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://www.hubspot.com/hs-fs/hubfs/border-module-field.png?width=326&quality=low" alt="ページエディターの境界線モジュールフィールドのスクリーンショット" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "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` | ブール値 | 境界線の半径、上部、下部、左側、右側のキーを含むオブジェクト。 | `{}`   |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, BorderField } from "@hubspot/cms-components/fields";
    ```

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

## 選択

<DndSection>
  <DndModule numCols={7}>
    <div>
      オプションのリストから、コンテンツ作成者が1つ以上の項目を選択するためのフィールドです。`display`プロパティーを使用すると、ドロップダウンメニュー、ラジオ選択、チェックボックス、またはさまざまなボタンで表示オプションを設定できます。[選択フィールドの表示オプション](#choice-button-presets)の詳細については、以下をご参照ください。

      選択フィールドはテーマとモジュールの両方でサポートされます。選択フィールドは[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)として使用できます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/choice-field-dropdown-4.jpg" alt="選択フィールドドロップダウン" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "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`            | 文字列  | 次のいずれかの値を使用して、フィールドの外観を設定します。<ul><li>`select`：ドロップダウンメニューをレンダリングします。`multiple`が`true`に設定されている場合、複数のオプションを選択できます。</li><li>`checkbox`：選択可能なチェックボックスのリストをレンダリングします。`multiple`が`true`に、かつ`reordering_enabled`が`false`に設定されている場合、複数のオプションを選択できます。</li><li>`radio`：ラジオボタンオプションのリストを表示します。複数のオプションを選択することはできません。</li><li>`buttons`：指定された`preset`に基づいてボタンのセットを表示します。複数のオプションを選択することはできません。</li></ul> | `"select"`                                               |
    | `reordering_enabled` | ブール値 | `true`に設定すると、コンテンツ作成者がエディターでフィールドのオプションを並べ替えることができます。これを有効にするには、`multiple`も`true`に設定する必要があります。                                                                                                                                                                                                                                                                                               | `false`                                                  |
    | `preset`             | 文字列  | `display`が`buttons`に設定されている場合に使用するボタンのプリセットを設定します。プリセットごとに、特定の値のセットに一致するように`choices`ラベルを設定する必要があります。これらの[プリセットオプション](#choice-button-presets)の詳細については、以下をご参照ください。                                                                                                                                                                                                                             |                                                          |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    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`           | 文字列  | 次のいずれかの値を使用して、フィールドの外観を設定します。<ul><li>`select`：ドロップダウンメニューをレンダリングします。`multiple`が`true`に設定されている場合、複数のオプションを選択できます。</li><li>`checkbox`：選択可能なチェックボックスのリストをレンダリングします。`multiple`が`true`に、かつ`reordering_enabled`が`false`に設定されている場合、複数のオプションを選択できます。</li><li>`radio`：ラジオボタンオプションのリストを表示します。複数のオプションを選択することはできません。</li><li>`buttons`：指定された`preset`に基づいてボタンのセットを表示します。複数のオプションを選択することはできません。</li></ul> | `"select"`                                               |
    | `reorderingEnabled` | ブール値 | `true`に設定すると、コンテンツ作成者がエディターでフィールドのオプションを並べ替えることができます。これを有効にするには、`multiple`も`true`に設定する必要があります。                                                                                                                                                                                                                                                                                               | `false`                                                  |
    | `preset`            | 文字列  | `display`が`buttons`に設定されている場合に使用するボタンのプリセットを設定します。プリセットごとに、特定の値のセットに一致するように`choices`ラベルを設定する必要があります。これらの[プリセットオプション](#choice-button-presets)の詳細については、以下をご参照ください。                                                                                                                                                                                                                             |                                                          |
  </Tab>
</Tabs>

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

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

<CodeGroup>
  ```json example.json theme={null}
  {
  "name": "layout",
  "type": "choice",
  "label": "Layout",
  "required": false,
  "locked": false,
  "display": "buttons",
  "preset": "layout",
  "choices": [
  ["cards_value", "cards"],
  ["tiles_value", "tiles"],
  ["minimal_value", "minimal"]
  ]
  }
  ```

  ```text react.txt theme={null}
  import { ModuleFields, ChoiceField } from '@hubspot/cms-components/fields';
  ```
</CodeGroup>

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

<Frame>
  <img src="https://www.hubspot.jp/hubfs/Knowledge_Base_2023-24-25/choice-field-case-type.png" alt="大／小文字プリセット" />
</Frame>

\| | `expand_icon` | `caret` | `plus` | `chevron` |

<Frame>
  <img src="https://developers.hubspot.jp/hubfs/Knowledge_Base_2023-24-25/expand_icon-choice-type.png" alt="展開アイコンプリセット" />
</Frame>

\| | `icon_background_shape` | `none` | `square` | `rounded` | `circle` |

<Frame>
  <img src="https://www.hubspot.jp/hubfs/Knowledge_Base_2023_2024/choice-button-presets_3.png" alt="アイコンの背景形状プリセット" />
</Frame>

\| | `icon_size` | `small` | `medium` | `large` |

<Frame>
  <img src="https://www.hubspot.jp/hubfs/Knowledge_Base_2023_2024/choice-button-presets_5.png" alt="アイコンプリセット" />
</Frame>

\| | `layout` | `cards` | `tiles` | `minimal` |

<Frame>
  <img src="https://www.hubspot.jp/hubfs/Knowledge_Base_2023_2024/choice-button-presets_6.png" alt="レイアウトプリセット" />
</Frame>

\| | `social_icon_background_shape` | `none` | `square` | `rounded` | `circle` |

<Frame>
  <img src="https://www.hubspot.jp/hubfs/Knowledge_Base_2023_2024/choice-button-presets_2.png" alt="ソーシャルアイコンの背景プリセット" />
</Frame>

\| | `social_icon_size` | `small` | `medium` | `large` |

<Frame>
  <img src="https://www.hubspot.jp/hubfs/Knowledge_Base_2023_2024/choice-button-presets_4.png" alt="ソーシャルアイコンサイズのプリセット" />
</Frame>

|

## 色

<DndSection>
  <DndModule numCols={7}>
    <div>
      色フィールドを使用して、コンテンツ作成者はカラーピッカーのインターフェイスで色を指定することができます。このフィールドは無地と透明に対応します。コンテンツ作成者がモジュール内で色を調整できるようにするには、このフィールドが最適です。

      一部のEメールクライアントでは不透明度ルールが適用されないため、デフォルトではEメールモジュールの色フィールドの不透明度入力が非表示になっています。`show_opacity`を`true`に設定すると、Eメールモジュールの不透明度フィールドを表示できます。

      色フィールドはテーマとモジュールの両方に対応します。色フィールドは[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)として使用できます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/colorfield.png" alt="色フィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "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`    | ブール値   | 不透明度入力が表示されるかどうかを設定します。<ul><li>`true`：不透明度入力が表示されます。</li><li>`false`：不透明度入力が非表示になります。</li><li>未定義のままにすると、不透明度入力はEメールモジュールでは表示されませんが、他のモジュールタイプでは表示されます。</li></ul> | `undefined`                                |
    | `limited_options` | 配列     | デフォルトのカラーグリッドを非表示にし、お気に入りの色の一覧をオーバーライドする文字列の配列（「Favorites」ラベルは「Available colors」になります）。配列内の値は、任意の継承パスで16進コードまたは`color`16進値のいずれかである必要があります。                        | `undefined`                                |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, ColorField } from "@hubspot/cms-components/fields";
    ```

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

## CTA

<DndSection>
  <DndModule numCols={7}>
    <div>
      CTA（Call-To-Action）フィールドは、表示するCTAを選択する方法をユーザーに提供します。CTAは基本的に、追跡可能なボタンまたはリンクです。コンテンツ作成者は、サイト全体で使用できる[CTAを作成](https://knowledge.hubspot.com/ja/ctas/create-calls-to-action-ctas)することができます。

      CTAフィールドはモジュール内でサポートされます。CTAフィールドは、**CMS Hub** ProfessionalおよびEnterpriseで利用可能です。\_ \_\_ \_
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/Screen%20Shot%202020-02-26%20at%2010.24.18%20PM.png" alt="Call To Actionフィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "cta",
      "label": "CTA",
      "required": false,
      "locked": false,
      "type": "cta",
      "default": null
    }
    ```

    | パラメーター    | タイプ | 説明                                                                                              | デフォルト値 |
    | --------- | --- | ----------------------------------------------------------------------------------------------- | ------ |
    | `default` | 文字列 | デフォルトで選択されるCTA。想定される値は、[CTAマネージャー](https://app.hubspot.com/l/ctas)でCTAを編集する際にURLに表示されるCTA IDです。 | `null` |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, CTAField } from "@hubspot/cms-components/fields";
    ```

    | プロパティー    | タイプ | 説明                                                                                              | デフォルト値 |
    | --------- | --- | ----------------------------------------------------------------------------------------------- | ------ |
    | `default` | 文字列 | デフォルトで選択されるCTA。想定される値は、[CTAマネージャー](https://app.hubspot.com/l/ctas)でCTAを編集する際にURLに表示されるCTA IDです。 | `null` |
  </Tab>
</Tabs>

## CRMオブジェクト

<DndSection>
  <DndModule numCols={7}>
    <div>
      CRMオブジェクトフィールドは、表示するCRMオブジェクトの個別のインスタンスを選択する方法をユーザーに提供します。

      `module.fieldname.properties`は、このオブジェクトインスタンスからフェッチ（取得）されたプロパティーを返します。そのため、選択したオブジェクトインスタンスのデータを取得するために`crm_object()`関数を使用する必要はありません。

      `module.fieldname.id`は、オブジェクトインスタンスIDを返します。

      CRMオブジェクトフィールドはモジュール内でサポートされます。CRMオブジェクトフィールドは、**CMS Hub** ProfessionalおよびEnterpriseで利用可能です。\_ \_\_ \_
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://f.hubspotusercontent00.net/hubfs/53/CRM%20Object%20Field.png" alt="CRMオブジェクトフィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "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オブジェクトタイプ](/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types) |        |
    | `properties_to_fetch` | 配列     | オブジェクトタイプに関連付けられているプロパティー名の配列（文字列の形式）。例えば`"date_of_birth"`は、コンタクトに関連付けられたプロパティーです。これを使用すると、必要な情報だけを限定的にページで利用可能にすることができます。             |        |
    | `default`             | オブジェクト | デフォルトで選択されるオブジェクトインスタンスのIDを含むオブジェクト。コンタクトID、会社IDなど。                                                                                    | `null` |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, CRMObjectField } from "@hubspot/cms-components/fields";
    ```

    | プロパティー              | タイプ    | 説明                                                                                                                                     | デフォルト値 |
    | ------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------- | ------ |
    | `objectType`        | 文字列    | ユーザーが選択できるCRMオブジェクトのタイプ。[サポートされるCRMオブジェクトタイプ](/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types) |        |
    | `propertiesToFetch` | 配列     | オブジェクトタイプに関連付けられているプロパティー名の配列（文字列の形式）。例えば`"date_of_birth"`は、コンタクトに関連付けられたプロパティーです。これを使用すると、必要な情報だけを限定的にページで利用可能にすることができます。             |        |
    | `default`           | オブジェクト | デフォルトで選択されるオブジェクトインスタンスのIDを含むオブジェクト。コンタクトID、会社IDなど。                                                                                    | `null` |
  </Tab>
</Tabs>

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

<DndSection>
  <DndModule numCols={7}>
    <div>
      CRMオブジェクトのプロパティーフィールドは、指定されたオブジェクトタイプからラベルやプロパティー名などのプロパティーメタデータにアクセスするために使用します。これにより、コンテンツ作成者は、ページ上にプロパティーの詳細を表示する必要がある場合に、オブジェクトプロパティーから選択することができます。

      例えば、このフィールドをカスタムのテーブルモジュールに追加して、選択されたプロパティーに基づいてテーブルの見出しを入力することができます。

      CRMオブジェクトフィールドはモジュール内でサポートされます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://www.hubspot.jp/hubfs/Knowledge_Base_2021/crm-object-property-dropdown-menu0.png" alt="CRMオブジェクトプロパティーのドロップダウンメニュー0" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "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オブジェクトタイプ](/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types)をご確認ください。 |
    | `default`     | オブジェクト | 表示するデフォルトのプロパティーが含まれます。                                                                                                                             |

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

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

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, CRMObjectPropertyField } from "@hubspot/cms-components/fields";
    ```

    | プロパティー       | タイプ    | 説明                                                                                                                                                  |
    | ------------ | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |
    | `objectType` | 文字列    | ユーザーが選択できるCRMオブジェクトのタイプ。詳しくは[サポートされるCRMオブジェクトタイプ](/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types)をご確認ください。 |
    | `default`    | オブジェクト | 表示するデフォルトのプロパティーが含まれます。                                                                                                                             |
  </Tab>
</Tabs>

## 日付

<DndSection>
  <DndModule numCols={7}>
    <div>
      日付フィールドでは、日付入力用インターフェイスを提供できます。コンテンツ作成者はこのインターフェイスを使用して簡単に日付を選択できます。このフィールドから返されるタイムスタンプは、コード内で使用できます。

      日付フィールドはモジュール内でサポートされます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/date%20field.png" alt="日付フィールド（カレンダーを開いた状態）" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "event_start_date",
      "label": "Event Date",
      "required": false,
      "locked": false,
      "type": "date",
      "default": 1577854800000
    }
    ```

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

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, DateField } from "@hubspot/cms-components/fields";
    ```

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

## 日時

<DndSection>
  <DndModule numCols={7}>
    <div>
      日時フィールドでは、日付フィールドと同じ日付インターフェイスだけでなく、時刻入力用インターフェイスも提供できます。コンテンツ作成者はこれらのインターフェイスを使用して簡単に日付と時刻を選択できます。このフィールドから返されるタイムスタンプは、コード内で使用できます。

      日時フィールドはモジュール内でサポートされます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/Event%20Start.png" alt="イベント開始" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "event_start",
      "label": "Event Start",
      "required": false,
      "locked": false,
      "type": "datetime",
      "default": 1577854800000
    }
    ```

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

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, DateTimeField } from "@hubspot/cms-components/fields";
    ```

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

## Eメールアドレス

<DndSection>
  <DndModule numCols={7}>
    <div>
      Eメールアドレスのフィールドを実装すると、ユーザーが複数のEメールアドレスを選択できるようになります。例えばコンタクト情報の表示に、このフィールドを使用します。Eメールフィールドからは、選択されたEメールアドレスの配列が返されます。この配列をループ処理できます。

      Eメールフィールドはモジュール内でサポートされます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://f.hubspotusercontent00.net/hubfs/53/email-field.png" alt="Eメールフィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "emails",
      "label": "Email address",
      "required": false,
      "locked": false,
      "type": "email",
      "default": null
    }
    ```

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

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, EmailField } from "@hubspot/cms-components/fields";
    ```

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

## 埋め込み

<DndSection>
  <DndModule numCols={6}>
    <div>
      埋め込みフィールドを使用すると、ユーザーは[oEmbed対応サイト](https://oembed.com/#section7)からURLを追加したり、他のサイトから埋め込みコードを貼り付けたりできます。HubSpotでのoEmbedの使用法や使用事例については、[oEmbedのドキュメント](/cms/start-building/building-blocks/fields/oembed)をご参照ください。
    </div>
  </DndModule>

  <DndModule numCols={6}>
    <Frame>
      <img src="https://f.hubspotusercontent00.net/hubfs/53/Developer%20Site/assets/images/module-theme-fields/embed-field.jpg" alt="埋め込みフィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "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の配列。なお、[メディアブリッジプロバイダーアプリケーション](https://ecosystem.hubspot.com/marketplace/apps/apps-for-media)のインストール時にも、このパラメーターに入力されます。 |                                        |
    | `type`                             | 文字列      | このパラメーターは常に`"embed"`に設定されます。                                                                                                                                         | `"embed"`                              |
    | `default`                          | ディクショナリー | `"source_type"`パラメーターを含む配列。このパラメーターには、`"supported_source_types"`パラメーターで指定された文字列ベースの値のオプションのうちの1つが含まれます。                                                              | `oembed`                               |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    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の配列。なお、[メディアブリッジプロバイダーアプリケーション](https://ecosystem.hubspot.com/marketplace/apps/apps-for-media)のインストール時にも、このパラメーターに入力されます。 |                                        |
    | `type`                          | 文字列      | このパラメーターは常に`"embed"`に設定されます。                                                                                                                                         | `"embed"`                              |
    | `default`                       | ディクショナリー | `"source_type"`パラメーターを含む配列。このパラメーターには、`"supported_source_types"`パラメーターで指定された文字列ベースの値のオプションのうちの1つが含まれます。                                                              | `oembed`                               |
  </Tab>
</Tabs>

## ファイル

<DndSection>
  <DndModule numCols={7}>
    <div>
      ファイルフィールドを実装すると、ユーザーがファイルマネージャーまたはドキュメントマネージャーにファイルをアップロードできるようになります。また、これらのマネージャー内にある項目を簡単に添付できます。PDFファイルや他の形式のファイルにリンクする際に役立ちます。ページ上に画像を表示するには、画像フィールドを使用する必要があります。

      ファイルフィールドはモジュール内でサポートされます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://f.hubspotusercontent00.net/hubfs/53/File%20field.png" alt="ファイルフィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "file_field",
      "label": "File",
      "required": false,
      "locked": false,
      "type": "file",
      "picker": "file",
      "default": null
    }
    ```

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

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, FileField } from "@hubspot/cms-components/fields";
    ```

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

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

<DndSection>
  <DndModule numCols={7}>
    <div>
      フォローアップEメールフィールドを実装すると、フォーム送信への応答として送信するEメールをコンテンツ作成者が指定できるようになります。これは、`simple_email_campaign_id`パラメーターを介して[HubLフォームタグ](/cms/reference/hubl/tags/standard-tags#form)と連携して機能します。

      フォローアップEメールフィールドはモジュール内でサポートされます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://f.hubspotusercontent00.net/hubfs/53/followup%20email%20field.png" alt="フォローアップEメールフィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "followup_email",
      "label": "Followup email",
      "required": false,
      "locked": false,
      "type": "followupemail",
      "default": null
    }
    ```

    | パラメーター    | タイプ | 説明     | デフォルト値 |
    | --------- | --- | ------ | ------ |
    | `default` | 文字列 | EメールID | `null` |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, FollowUpEmailField } from "@hubspot/cms-components/fields";
    ```

    | プロパティー    | タイプ | 説明     | デフォルト値 |
    | --------- | --- | ------ | ------ |
    | `default` | 文字列 | EメールID | `null` |
  </Tab>
</Tabs>

## フォント

<DndSection>
  <DndModule numCols={7}>
    <div>
      フォントフィールドを使用すると、コンテンツ作成者は基本的なフォントスタイルを設定できます。コンテンツ作成者はサイズ、色、フォントファミリー、書式（太字、イタリック、下線付き）を選択することが可能です。リストに表示されるフォントは全て、標準的なウェブ対応フォントです。これらのフォントは[Google フォント](https://fonts.google.com/)から取得されますが、ページが読み込まれるドメインでHubSpotによって直接提供されます。

      フォントフィールドはテーマとモジュールの両方でサポートされます。フォントフィールドは[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)として使用できます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/font%20field.png" alt="フォントフィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Warning>
  ### 注：

  * フォントファミリーは、`font`および`font_set`プロパティーの組み合わせによって決まります。フォントを読み込むには、両方を含める必要があります。つまり、[フィールドを継承](https://developers.hubspot.jp/docs/cms/reference/fields/overview#inherited-fields)する場合、両方の値を継承する必要があります。
  * CSS関連のサブフィールドを`visibility`で非表示にしても、フィールドオブジェクトで返されるスタイルでそのCSSが出力されるのを防ぐことはできません。この場合も、`styles`オブジェクトに手動でCSSを含める必要があります。
</Warning>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "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`                                                             |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    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`                                                             |
  </Tab>
</Tabs>

## フォーム

<DndSection>
  <DndModule numCols={7}>
    <div>
      フォームフィールドを実装すると、アカウント内にある特定のフォームをコンテンツ作成者が指定できるようになります。その情報に基づいて、[HubLフォームタグ](/cms/reference/hubl/tags/standard-tags#form)を使用してページにフォームをレンダリングできます。

      フォームフィールドはモジュール内でサポートされます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://f.hubspotusercontent00.net/hubfs/53/form%20field-Aug-21-2020-08-09-55-35-PM.png" alt="フォームフィールド-2020年8月21日-08-09-55-35-PM" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "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`                     | オブジェクト | フォーム送信応答の詳細を含むオブジェクト。次のパラメーターが含まれます。<ul><li>`response_type`：次のいずれかが可能です。<ul><li>`inline:`：インライン テキスト メッセージ。</li><li>`redirect`：送信後に訪問者をリダイレクトします。</li></ul></li><li>`message`：フォーム送信後に表示するテキスト。</li></ul><ul><li>`redirect_id`：リダイレクトされるフォームの場合、これをHubSpotコンテンツIDに設定すると、フォーム送信者がHubSpotページにリダイレクトされます。</li><li>`redirect_url`リダイレクトされるフォームの場合、これを特定のURLに設定すると、フォーム送信者がページにリダイレクトされます。</li></ul> |
    | `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タグ](/cms/reference/hubl/tags/standard-tags#form)に戻す必要があります。                                                                                                      |
    | `embed_versions`              | 配列     | フォームのバージョンに基づいて選択できるフォームを指定する配列。値には、旧フォームの`"v2"`と新しいエディターフォームの`"v4"`を使用できます。                                                                                                                                                                                                                                                                                                                    |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, FormField } from "@hubspot/cms-components/fields";
    ```

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

## グラデーション

<DndSection>
  <DndModule numCols={7}>
    <div>
      このフィールドによって、コンテンツ作成者はグラデーションを作成および設定できます。現時点では、線形グラデーションで色の分岐点を最大5つまで指定できます。グラデーションフィールドには、フィールドの値に基づいてCSSを返す`.css`プロパティーがあります。詳しくは[生成されるCSSプロパティー](https://developers.hubspot.jp/docs/cms/reference/fields/overview#generated-css)についてご確認ください。

      グラデーションフィールドは[モジュール](https://developers.hubspot.jp/docs/cms/start-building/building-blocks/modules/overview)内でサポートされます。グラデーションフィールドは[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)としてのみ使用できます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://www.hubspot.com/hs-fs/hubfs/gradient_field.png?width=348&quality=low" alt="グラデーションフィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "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"）およびグラデーションの色の分岐点がオブジェクトの配列として含まれます。 |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, GradientField } from "@hubspot/cms-components/fields";
    ```

    | プロパティー    | タイプ    | 説明                                                                    |
    | --------- | ------ | --------------------------------------------------------------------- |
    | `default` | オブジェクト | グラデーションの方向性の設定（"side\_or\_corner"）およびグラデーションの色の分岐点がオブジェクトの配列として含まれます。 |
  </Tab>
</Tabs>

## HubDB行

<DndSection>
  <DndModule numCols={6}>
    <div>
      HubDB行フィールドによって、コンテンツ作成者は定義されたテーブルから個別の行（またはリピーターフィールドを使用する場合は複数行）を選択できます。このフィールドは、ユーザー定義のリスト、テーブル、リソースなどの作成に使用できます。

      HubDB行フィールドはモジュール内でサポートされます。HubDB行フィールドは、**CMS Hub** ProfessionalおよびEnterpriseで利用可能です。\_ \_\_ \_
    </div>
  </DndModule>

  <DndModule numCols={6}>
    <Frame>
      <img src="https://f.hubspotusercontent00.net/hubfs/53/Developer%20Site/assets/images/module-theme-fields/hubdb-row-field.png" alt="HubDB行フィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "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行セレクターで列データを表示する形式。パーセント記号と数値を使用して列を指定します。<br />**例**: 「%0 (%1)」は、「Column0Value (Column1Value)」と表示されます。\_ \_ | `""`              |
    | `default`          | オブジェクト | デフォルトのHubDB行を設定するためのIDを含むオブジェクト。                                                                                  | `{ "id" : null }` |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, HubDBRowField } from "@hubspot/cms-components/fields";
    ```

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

## HubDBテーブル

<DndSection>
  <DndModule numCols={7}>
    <div>
      HubDBテーブルフィールドを使用すると、コンテンツ作成者がアカウント内の特定のHubDBを指定できるようになります。その情報に基づいて、[HubLフォームタグ](/cms/reference/hubl/tags/standard-tags#form)を使用してページにフォームをレンダリングできます。このフィールドからはテーブルIDが返されます。このIDを[HubDB HubL関数](/cms/start-building/features/storage/hubdb#access-hubdb-data-using-hubl))で使用できます。

      HubDBテーブルフィールドはモジュール内でサポートされます。HubDBテーブルフィールドは、**CMS Hub** ProfessionalおよびEnterpriseで利用可能です。\_ \_\_ \_
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/HubDB%20field.png" alt="HubDBフィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "recipe_table",
      "label": "Recipe Table",
      "required": false,
      "locked": false,
      "type": "hubdbtable",
      "default": 2010782
    }
    ```

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

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, HubDBTableField } from "@hubspot/cms-components/fields";
    ```

    | プロパティー    | タイプ | 説明          | デフォルト値 |
    | --------- | --- | ----------- | ------ |
    | `default` | 文字列 | HubDBテーブルID | `null` |
  </Tab>
</Tabs>

## アイコン

<DndSection>
  <DndModule numCols={7}>
    <div>
      アイコンフィールドでは、アイコン選択用UIを提供できます。コンテンツ作成者はこのインターフェイスを使用して簡単にアイコンをモジュールに追加できます。アイコンフィールドにはFontAwesomeアイコンがあらかじめ読み込まれます。

      アイコンフィールドはモジュール内でサポートされます。アイコンフィールドは[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)として使用できます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/icon%20field.png" alt="アイコンフィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "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アイコンセット。指定可能な値は以下の通りです。<ul><li>`fontawesome-6.4.2`</li><li>`fontawesome-5.14.0`</li><li>`fontawesome-5.0.10`</li></ul> | `fontawesome-5.0.10` |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, IconField } from "@hubspot/cms-components/fields";
    ```

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

## 画像

<DndSection>
  <DndModule numCols={7}>
    <div>
      画像フィールドでは、コンテンツ作成者は簡単なインターフェイスを使用して画像をモジュールまたはテーマに追加できます。画像フィールドのファイル選択用インターフェイスには、ファイルマネージャーに保管されている画像のリストが表示されます。画像はさまざまな方法で使用および表示される可能性があることから、開発者は、コンテンツ作成者がUIで選択できるサイズ設定オプションの制限ができ、さらに[画像の遅延読み込み](/cms/best-practices/testing-staging-performance/lazy-loading)の許可もできます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/Image%20Field.png" alt="画像フィールド" />
    </Frame>
  </DndModule>
</DndSection>

画像フィールドはモジュール内でサポートされます。画像は[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)として使用できます。メッセージ性のない単なるイメージ画像で、[背景画像](#background-image)でもない場合は、画像フィールドをスタイルフィールドとしてのみ使用してください。これにより、[アクセシビリティー](/cms/best-practices/improve-existing-sites/accessibility)のベストプラクティスに従うことができます。

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

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, ImageField } from "@hubspot/cms-components/fields";
    ```

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

## リンク

<DndSection>
  <DndModule numCols={7}>
    <div>
      リンクフィールドでは、コンテンツ作成者がURLやEメールアドレスへのリンクを記載できるよう、簡単なインターフェイスを提供できます。外部リンクの場合、コンテンツ作成者は［外部］を選択します。Eメールリンクの場合は、［Eメールアドレス］を選択します。CMS Hubでホスティングされているコンテンツの場合、［コンテンツ］を使用して、アカウント内の全てのページとブログ記事のリスト、ファイルアセットが記載されたファイル、ブログ、またはアカウント内のブログリストを表示することができます。リンクフィールドはURLフィールドと同様ですが、主な違いとして、リンクフィールドには、［新しいウィンドウで開く］よう指示したり、［検索エンジンに追跡しない］ように指示したりするためのユーザーインターフェイスが表示されます。コンテンツ作成者にこのような制御を行わせるのが適切でない場合は、[URLフィールド](#url)を使用してください。

      リンクフィールドはモジュール内でサポートされます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/link%20field.png" alt="リンクフィールド" />
    </Frame>
  </DndModule>
</DndSection>

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

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, LinkField } from "@hubspot/cms-components/fields";
    ```

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

## ロゴ

<DndSection>
  <DndModule numCols={7}>
    <div>
      ロゴフィールドでは、ページ内で使用するロゴ画像を指定する機能をコンテンツ作成者に提供できます。指定しない場合、デフォルトでドメインのロゴが使用されます。サイトのヘッダーやフッターに会社のロゴが表示されるようにするには、このフィールドが役立ちます。ロゴフィールドでは、[遅延読み込み](/cms/best-practices/testing-staging-performance/lazy-loading)も可能です。

      ロゴフィールドはモジュール内でサポートされます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/logo%20field.png" alt="ロゴフィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "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` | 文字列    | 画像の[遅延読み込み](/cms/best-practices/testing-staging-performance/lazy-loading)を選択するためのコントロールをページエディターに表示するかどうかを決定します。                                                                                                                             | `false`                                                                                                                              |
    | `default`      | オブジェクト | ロゴオブジェクト。`show_loading`が`true`に設定されている場合は、`loading`プロパティーを含めることで、画像の[遅延読み込みオプション](/cms/best-practices/testing-staging-performance/lazy-loading)を設定できます。次のオプションがあります。<ul><li>`"disabled"`（デフォルト）</li><li>`"eager"`</li><li>`"lazy"`</li></ul> | `{ override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }` |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, LogoField } from "@hubspot/cms-components/fields";
    ```

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

## メニュー

<DndSection>
  <DndModule numCols={7}>
    <div>
      メニューフィールドには、コンテンツ作成者が他のページで再利用できる[ナビゲーションメニュー](/cms/start-building/building-blocks/modules/menus-and-navigation)を作成、編集、選択できるよう、簡単にインターフェイスが表示されます。メインナビゲーション、フッターナビゲーションなどの複数のページに表示されるメニューや、他の[グローバルコンテンツ](/cms/start-building/building-blocks/global-content)で使用されるメニューには、このフィールドを使用すると非常に役立ちます。モジュール内にメニューをレンダリングするには、[メニュータグ](/cms/reference/hubl/tags/standard-tags#menu)または[menu()関数](/cms/reference/hubl/functions#menu)と併せてこのフィールドを使用します。

      他のページで再利用するのに適さないメニュー（目次メニューなど）の場合は、[シンプルメニューフィールド](#simple-menu)を使用してください。

      メニューフィールドはモジュール内でサポートされます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/menu%20field.png" alt="メニューフィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "menu",
      "label": "Menu",
      "required": false,
      "locked": false,
      "type": "menu",
      "default": 12345678911
    }
    ```

    | パラメーター    | タイプ | 説明                                                                                                                                            | デフォルト値 |
    | --------- | --- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
    | `default` | 整数  | メニューの[メニューID](/cms/start-building/building-blocks/modules/menus-and-navigation#get-your-menu-id)。デフォルト値の`null`の場合、ナビゲーション下のデフォルトのメニューが設定されます。 | `null` |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, MenuField } from "@hubspot/cms-components/fields";
    ```

    | プロパティー    | タイプ | 説明                                                                                                                                            | デフォルト値 |
    | --------- | --- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
    | `default` | 整数  | メニューの[メニューID](/cms/start-building/building-blocks/modules/menus-and-navigation#get-your-menu-id)。デフォルト値の`null`の場合、ナビゲーション下のデフォルトのメニューが設定されます。 | `null` |
  </Tab>
</Tabs>

## 数値

<DndSection>
  <DndModule numCols={7}>
    <div>
      数値フィールドには、コンテンツ作成者が数値やオプションを入力または調整できるよう、簡単なインターフェイスが表示されます。パーセンテージに基づく項目を作成する場合や、数値を入力する必要があるものには、このフィールドを使用できます。

      数値フィールドはモジュール内でサポートされます。数値フィールドは[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)として使用できます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/number-field-example-4.jpg" alt="数値フィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "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` | 文字列 | フィールドにプレースホルダー値を追加します。 |        |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, NumberField } from "@hubspot/cms-components/fields";
    ```

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

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

## ページ

<DndSection>
  <DndModule numCols={7}>
    <div>
      ページフィールドには、コンテンツ作成者がサイトのページやランディングページを選択するためのインターフェイスが表示されます。

      ページフィールドから返される値は、選択したページのページIDです。このフィールドを[content\_by\_id](/cms/reference/hubl/functions#content-by-id)関数または[content\_by\_ids](/cms/reference/hubl/functions#content-by-ids)関数と併せて使用すると、選択したページのデータを現在のページで使用できます。

      ページフィールドはモジュール内でサポートされます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://www.hubspot.jp/hubfs/Page%20field.png" alt="ページフィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "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` |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, PageField } from "@hubspot/cms-components/fields";
    ```

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

## リッチテキスト

<DndSection>
  <DndModule numCols={7}>
    <div>
      リッチテキストフィールドによって、コンテンツ作成者はWYSIWYGテキストエディターの操作感を活用できます。リッチテキストフィールドの値は、HTMLとして出力されます。コンテンツ作成者にフォーマット設定機能を使用させない場合は、[テキストフィールド](#text)を使用してください。

      リッチテキストフィールドはモジュール内でサポートされます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://f.hubspotusercontent00.net/hubfs/53/Rich%20Text%20field.png" alt="リッチテキストフィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "description",
      "label": "Description",
      "required": false,
      "locked": false,
      "type": "richtext",
      "default": null
    }
    ```

    | パラメーター             | タイプ | 説明                                                                                                                      | デフォルト値 |
    | ------------------ | --- | ----------------------------------------------------------------------------------------------------------------------- | ------ |
    | `default`          | 文字列 | 表示するコンテンツの文字列はHTMLをサポートします。注：このデフォルトのプロパティー内では`get_asset_url`[関数](/cms/reference/hubl/functions#get-asset-url)を使用できません。 | `""`   |
    | `enabled_features` | 配列  | この項目配列を使用すると、[リッチテキストエディターのツールバー](/cms/reference/fields/rich-text-editor)でコンテンツ編集者に利用可能にするオプションを設定できます。                 |        |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, RichTextField } from "@hubspot/cms-components/fields";
    ```

    | プロパティー            | タイプ | 説明                                                                                                                      | デフォルト値 |
    | ----------------- | --- | ----------------------------------------------------------------------------------------------------------------------- | ------ |
    | `default`         | 文字列 | 表示するコンテンツの文字列はHTMLをサポートします。注：このデフォルトのプロパティー内では`get_asset_url`[関数](/cms/reference/hubl/functions#get-asset-url)を使用できません。 | `""`   |
    | `enabledFeatures` | 配列  | この項目配列を使用すると、[リッチテキストエディターのツールバー](/cms/reference/fields/rich-text-editor)でコンテンツ編集者に利用可能にするオプションを設定できます。                 |        |
  </Tab>
</Tabs>

## シンプルメニュー

<DndSection>
  <DndModule numCols={7}>
    <div>
      シンプルメニューフィールドには、コンテンツ作成者がナビゲーションメニューを作成できるよう、簡単なインターフェイスが表示されます。このフィールドで作成する[ナビゲーションメニュー](/cms/start-building/building-blocks/modules/menus-and-navigation)は他のページで再利用できません。再利用可能にしなければならないメニューの場合は、[メニューフィールド](#menu)を使用してください。このフィールドは、目次メニューを非常に長いページの見出しにリンクする場合や、コンテンツへのリンクの一覧を同じページ内に表示させなければならない場合に必要となります。

      シンプルメニューフィールドはモジュール内でサポートされます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/Screen%20Shot%202020-02-28%20at%207.33.17%20AM.png" alt="シンプルメニューフィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "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構造。 | `[]`   |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, SimpleMenuField } from "@hubspot/cms-components/fields";
    ```

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

## 間隔

<DndSection>
  <DndModule numCols={7}>
    <div>
      このフィールドは、コンテンツ作成者がパディングとマージンを設定するためのユーザーインターフェイス（UI）を提供します。間隔フィールドには、フィールドの値に基づいてCSSを返す`.css`プロパティーがあります。詳しくは[生成されるCSSプロパティー](https://developers.hubspot.jp/docs/cms/reference/fields/overview#generated-css)についてご確認ください。

      間隔フィールドは[モジュール](https://developers.hubspot.jp/docs/cms/start-building/building-blocks/modules/overview)内でサポートされます。間隔フィールドは[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)としてのみ使用できます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://www.hubspot.com/hs-fs/hubfs/spacing%20style%20field%20expanded.png?width=320&quality=low" alt="ページエディターで展開された間隔スタイルフィールドのスクリーンショット" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "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`オブジェクトを含んでいます。<ul><li>`padding`には`top`、`right`、`bottom`、`left`の各オブジェクトを含めることができます。</li><li>`margin`には`top`および`bottom`オブジェクトを含めることができます。</li></ul>`units`は、HubSpotでコンテンツ作成者が使用できる単位を設定します。単位について詳しくは、下記をご参照ください。                   | `{}`   |
    | `limits`  | オブジェクト | 間隔の`min`量と`max`量のガイドラインを設定します。`padding`オブジェクトと`margin`オブジェクトを含んでいます。<ul><li>`padding`には`top`、`right`、`bottom`、`left`の各オブジェクトを含めることができます。</li><li>`margin`には`top`および`bottom`オブジェクトを含めることができます。</li></ul>`units`は、HubSpotでコンテンツ作成者が使用できる単位を設定します。単位について詳しくは、下記をご参照ください。 |        |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, SpacingField } from "@hubspot/cms-components/fields";
    ```

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

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

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

## タグ

<DndSection>
  <DndModule numCols={7}>
    <div>
      タグフィールドには、コンテンツ作成者用のブログ タグ ピッカーが表示されます。このタグピッカーからは、ブログタグIDが返されます。このIDを、ブログタグ関連の関数（[blog\_tag\_url](/cms/reference/hubl/functions#blog-tag-url)、[blog\_recent\_tag\_posts](/cms/reference/hubl/functions#blog-recent-tag-posts)など）で使用できます。

      タグフィールドはモジュール内でサポートされます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/tag%20field.png" alt="タグフィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "id": "c3395cd3-8e60-7e47-2f1b-b7ccf4d669c9",
      "name": "blog_tag",
      "label": "Blog Tag",
      "required": false,
      "locked": false,
      "tag_value": "SLUG",
      "type": "tag",
      "default": null
    }
    ```

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

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, TagField } from "@hubspot/cms-components/fields";
    ```

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

## テキスト

<DndSection>
  <DndModule numCols={7}>
    <div>
      テキストフィールドを使用して、コンテンツ作成者はリッチテキスト機能を使用せずに、単純にテキストを編集できます。初期状態のテキストフィールドは1行のフィールドとして表示されますが、実際にはテキストエリアに拡大して複数の行を使用できます。コンテンツ作成者に書式を制御させたくない場合、このフィールドを使用可能です。書式設定コントロールを提供する場合は、[リッチテキストフィールド](#rich-text)を使用してください。

      テキストフィールドはモジュール内でサポートされます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/text%20field.png" alt="テキストフィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "product_name",
      "label": "Product Name",
      "required": false,
      "locked": false,
      "validation_regex": "",
      "allow_new_line": false,
      "show_emoji_picker": false,
      "type": "text",
      "default": ""
    }
    ```

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

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, TextField } from "@hubspot/cms-components/fields";
    ```

    | プロパティー    | タイプ | 説明       | デフォルト値 |
    | --------- | --- | -------- | ------ |
    | `default` | 文字列 | テキスト文字列。 | `""`   |
  </Tab>
</Tabs>

## テキストの位置合わせ

<DndSection>
  <DndModule numCols={7}>
    <div>
      このフィールドを使用すると、コンテンツ作成者はテキストコンテンツをコンテナー内の適切な位置に配置できます。このフィールドは他のアセットの位置合わせには使用できません。[他のアセットの位置合わせ用のフィールドタイプ](#alignment)をご利用ください。

      テキストの位置合わせフィールドは[モジュール](https://developers.hubspot.jp/docs/cms/start-building/building-blocks/modules/overview)内でサポートされます。テキストの位置合わせフィールドは[スタイルフィールド](https://developers.hubspot.jp/docs/cms/reference/fields/overview#style-fields)としてのみ使用できます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://www.hubspot.jp/hubfs/Text%20Alignment%20field.png" alt="テキスト位置合わせフィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "heading_align",
      "label": "Heading alignment",
      "required": false,
      "type": "textalignment",
      "default": {
        "text_align": "LEFT"
      }
    }
    ```

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

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, TextAlignmentField } from "@hubspot/cms-components/fields";
    ```

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

## URL

<DndSection>
  <DndModule numCols={7}>
    <div>
      URLフィールドは、リンクフィールドと同様の操作感を提供します。このフィールドには、制作担当者がリンクを追加できるよう、UIが表示されます。ただし、URLフィールドには、新しいウィンドウで開くよう指示したり、検索エンジンに追跡しないよう指示したりするためのUIは表示されません。開発者は、このフィールドで使用する値を指定できます。ユーザーが制御できるようにする場合は、代わりに[リンクフィールド](#link)を使用してください。

      URLフィールドはモジュール内でサポートされます。
    </div>
  </DndModule>

  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/URL%20field.png" alt="URLフィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "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` | 配列     | このフィールド上でコンテンツ作成者が選択できるリンクタイプのリスト。コンテンツ作成者が利用しないタイプはこのリストから削除してください。次のタイプがあります。<ul><li>`EXTERNAL`：外部URLのテキスト入力フィールドをレンダリングします。</li><li>`CONTENT`：アカウントのウェブサイトとランディングページを含むドロップダウンメニューをレンダリングします。</li><li>`FILE`：ファイルセレクターをレンダリングします。</li><li>`EMAIL_ADDRESS`：Eメールアドレスのテキスト入力フィールドをレンダリングします。</li><li>`BLOG`：アカウントのブログ リスト ページを含むドロップダウンメニューを表示します。</li><li>`PHONE_NUMBER`：電話番号のテキスト入力フィールドをレンダリングします。番号は`+`で始まり、（国コードを除いて）7～15桁の間でなければなりません。</li><li>`WHATSAPP_NUMBER`：アカウントの[接続済みWhatsApp電話番号](https://knowledge.hubspot.com/ja/inbox/connect-whatsapp-to-the-conversations-inbox)を含むドロップダウンメニューをレンダリングします。</li></ul> | `[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]` |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, UrlField } from "@hubspot/cms-components/fields";
    ```

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

## 動画

<DndSection>
  <DndModule numCols={6}>
    <div>
      動画フィールドは、リッチテキストフィールドを使用せずにHubSpot動画をモジュールコンテンツに追加するための場所を、コンテンツ作成者に提供します。
    </div>
  </DndModule>

  <DndModule numCols={6}>
    <Frame>
      <img src="https://f.hubspotusercontent00.net/hubfs/53/Developer%20Site/assets/images/module-theme-fields/video-field.png" alt="動画フィールド" />
    </Frame>
  </DndModule>
</DndSection>

<Tabs>
  <Tab title="JSON">
    ```json theme={null}
    {
      "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` |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    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` |
  </Tab>
</Tabs>

### conversion\_assetオブジェクトパラメーター

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

```
```