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

モジュールとテーマには、制作担当者がページエディター内でページのさまざまな要素を制御できるように、フィールドを追加します。モジュールとテーマで使用できる全てのフィールドについて、以下で説明します。モジュールとテーマのフィールド(フィールドグループや繰り返しフィールドを含む)の実装の詳細については、モジュールとテーマのフィールドの概要を参照してください。

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

全てのフィールドに共通するプロパティーがあります。これらの共通プロパティーでは、値の参照に使用する変数名と、制作担当者への表示を制御します。

// Boolean field { "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 }
全てのフィールドで使用されるプロパティー
ParameterTypeDescription Default
help_text
String

制作担当者へのヒントとしてエディターに表示するテキスト。

フィールドを使用する上で必須ではない補足情報の提示に最適です。

none
id
String

フィールドの固有ID。これはHubSpotによって生成されます。このIDはローカル環境での開発の場合は指定する必要はありません。

inline_help_text
String

フィールドのラベルの下にインラインで表示されるヘルプテキスト(300字まで)。 

フィールドを使用する上で必須となる情報の提示に最適です。

null
label
String

制作担当者に表示される説明テキスト。スペースを含めることができます。

Rich text field, Date field, etc.
locked
Boolean

フィールドがコンテンツエディター上で編集可能かどうかを指定します。trueの場合、フィールドはコンテンツエディターに表示されません。

false
name
String

このフィールドの値を参照するために使用する変数名。また、フィールドにどのような値が保存されるかを示します。スペースまたは特殊文字を含めることはできません。

richtext_field, date_field, etc.
required
Boolean

エディターでフィールドを空白のままにできるかどうかを指定します。trueの場合、フィールドに値を入力しなければコンテンツを公開できません。

false
type
String

フィールドのタイプ。全てのフィールドタイプのドキュメントについては、以下のフィールドタイプを参照してください。

visibility
Array

フィールドの表示条件を指定します。

display_width
String

"half_width"に設定すると、コンテンツエディターにモジュールフィールドを全幅フィールドではなく横並びに配置できます。fields.jsonファイル内で次の隣接フィールドも"half_width"に設定されていれば、フィールドが横並びに表示されます。

inline_help_texthelp_textの用法を混同しないように注意してください。 

ユーザーがタスクを完了するために必要な情報か」どうかを基準に使い分けます。

  • この答えが「はい」の場合、情報を画面に表示するためにinline_help_textが適しています。
  • 「いいえ」の場合は、help_textを使ってツールチップとして情報を提供します。

このような一貫性は、ユーザーインターフェイスの分かりやすさに役立ちます。

位置合わせ

このフィールドは、制作担当者が要素をコンテナー内の適切な位置に配置するための方法を提供します。このフィールドはテキストの位置合わせには使用しないでください。テキストの位置合わせには専用のフィールドタイプがあるためです。

位置合わせフィールドはモジュールでサポートされます。
位置合わせフィールドはスタイルフィールドとしてのみ使用できます。

位置合わせフィールド
// alignment field { "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", } }
ブログフィールド
パラメーターDescription Default
default
Object

horizontal_alignおよびvertical_alignを含むオブジェクト。

alignment_direction
String

水平方向のみ、垂直方向のみ、または両方の位置合わせコントロールを表示するかどうかを指定します。例:

  • HORIZONTAL
  • VERTICAL
  • BOTH
BOTH

背景画像

このフィールドは、背景位置と背景サイズのサブフィールドを備える背景画像フィールドを提供します。背景画像フィールドには、フィールドの値に基づいてCSSを返す.cssプロパティーがあります。生成されるCSSプロパティーの詳細をご確認ください。

背景画像フィールドはモジュールでサポートされます。
背景画像フィールドはスタイルフィールドとしてのみ使用できます。

背景画像フィールド
// background image field { "name": "bg_image", "label": "Background image", "required": false, "type": "backgroundimage", "default": { "src": "https://example.com/img.png", "background_position": "MIDDLE_CENTER", "background_size": "cover" } }
ブログフィールド
パラメーターDescription Default
default
Object

画像のsrc、背景位置、背景サイズを含むオブジェクト。

null

ブログ

このフィールドは、制作担当者がブログを選択し、開発者にブログIDを示すための方法を提供します。モジュール内でティーザーとして扱うブログの情報を呼び出す場合などに便利です。ブログIDは、ブログ関連のHubL関数で使用して、ブログ執筆者最近のブログ記事特定のタグが付いた最近のブログ記事などの情報を取得できます。

ブログフィールドはモジュールでサポートされます。

ブログフィールドのスクリーンショット
// blog field { "name" : "blog", "label" : "Blog", "required" : false, "locked" : false, "type" : "blog", "default" : 1234567890 }
ブログフィールド
パラメーターDescription Default
default
"default" / blog id

既定で選択されるブログを指定します。このパラメーターには'default'、または(ブログダッシュボードのURLで取得できる)特定のブログのIDを指定できます。

null

ブール型

このフィールドでは、機能のオンまたはオフへの切り替え操作を制作担当者に提供できます。ブール値はtrueまたはfalseに限られます。グループまたはフィールドに、ブール型フィールドに基づく条件を設定することが適切なケースは少なくありません。将来的に2つの状態では足りなくなることが想定される場合は、選択フィールドを使用した方が、後で状態を追加する際の変更作業が軽減されます。

ブール型フィールドはテーマとモジュールの両方でサポートされます。
ブール型フィールドはスタイルフィールドとして使用できます。

ブール型フィールドのスクリーンショット
// Boolean field { "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 }
ブログフィールド
パラメーターDescription Default
default
Boolean

このフィールドの既定の状態がtrueまたはfalseかを設定します。

false
display
String

フィールドの視覚表示スタイルを選択します。toggle(切り替えスイッチ)またはcheckbox(チェックボックス)として表示できます。

checkbox

スイッチまたはチェックボックスを使用する場合は、一貫性に配慮してください。配慮が不十分な場合は、制作担当者にとって分かりにくいUIを構築してしまう可能性があります。

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

境界線

このフィールドは、制作担当者が要素の周囲に境界線を作成するためのユーザーインターフェイスを提供します。境界線フィールドには、フィールドの値に基づいてCSSを返す.cssプロパティーがあります。生成されるCSSプロパティーの詳細をご確認ください。

境界線フィールドはモジュールでサポートされます。
境界線フィールドはスタイルフィールドとしてのみ使用できます。

ページエディターの境界線モジュールフィールドのスクリーンショット
// Border field { "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 } }
ブログフィールド
パラメーターDescription Default
default
Boolean

境界線の半径、上部、下部、左側、右側のキーを備えたオブジェクト。

{}

選択

選択フィールドは、<select>要素やラジオボタンと同等の性質を備えています。このフィールドでは、選択肢のリストから1項目を選択する機能を制作担当者に提供できます。ページエディターでの表示形式は2つあり、選択フィールドまたはラジオボタンとして表示できます。選択フィールドの選択肢には、個々の値にラベルを付けることができます。ページ内のモジュールを設定した後でも、選択肢のラベルは変更できます。ラベルを変更しても選択肢の値は変わらないため、サイトに悪影響を及ぼすことはありません。ただし、選択肢の値を変更した場合は、その値を使用していたモジュールとの関連付けが解除されます。

選択フィールドはテーマとモジュールの両方でサポートされます。選択フィールドはスタイルフィールドとして使用できます。

choice-field-dropdown
// Choice field { "name" : "img_position", "label" : "Image Position", "required" : false, "locked" : false, "display" : "select", "choices" : [ [ "img--left", "Image Left - Text Right" ], [ "img--right", "Text Left - Image Right" ] ], "type" : "choice", "default" : "img--left" }
ブール値フィールド
パラメーターDescription Default
choices
Array

値とラベルのペアの配列。値を先に並べます。

[ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]
default
Value

選択肢の配列の中から、既定で選択される値を設定します。

display
String

ユーザーに対するフィールドの表示形式を設定します。"radio""select"の2つの選択肢があります。

"select"

色フィールドでは、制作担当者向けのカラー ピッカー インターフェイスを提供できます。このフィールドではソリッドカラーと透明性がサポートされます。モジュール内で色を調整できる機能を制作担当者に提供するには、このフィールドが最適です。

色フィールドはテーマとモジュールの両方でサポートされます。
色フィールドはスタイルフィールドとして使用できます。

色フィールド

不透明度のオプションは、host_template_typesemailが含まれるモジュールでは無効になっています。

// color field { "name" : "bg_color", "label" : "Background color", "required" : false, "locked" : false, "type" : "color", "default" : { "color" : "#ff0000", "opacity" : 100 } }
色フィールド
パラメーターDescription Default
default
Object

既定で選択される色と不透明度を設定します。

{ "color" : "#ffffff", "opacity" : 100 }

CTA

CTA(Call-To-Action)フィールドでは、表示するCTAを選択する機能をユーザーに提供できます。CTAは基本的に、追跡可能なボタンまたはリンクです。制作担当者は、サイト全体で使用できるCTAを作成することができます。 

CTAフィールドはモジュールでサポートされます。
CTAフィールドは、CMS Hub ProfessionalおよびEnterpriseで利用可能です。

Call To Actionフィールド
// CTA field { "name" : "cta", "label" : "CTA", "required" : false, "locked" : false, "type" : "cta", "default" : null }
CTAフィールド
パラメーターDescription Default
default
String

既定で選択されるCTA。CTAマネージャーでCTAを編集する際のURLに表示されるCTA idが想定されます。

null

CRMオブジェクト

CRMオブジェクトフィールドは、表示するCRMオブジェクトの個別のインスタンスを選択する方法をユーザーに提供します。 

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

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

CRMオブジェクトフィールドはモジュールでサポートされます。
CRMオブジェクトフィールドは、CMS Hub ProfessionalおよびEnterpriseで利用可能です。

CRMオブジェクトフィールド
// fields.json { "name" : "crmobject_field", "label" : "CRM object", "required" : false, "locked" : false, "object_type" : "CONTACT", "properties_to_fetch" : [ ], "type" : "crmobject", "default" : { "id" : 1 } }
CRMオブジェクトフィールド
パラメーターDescription Default
object_type
必須
String

ユーザーが選択できるCRMオブジェクトのタイプ。サポートされるCRMオブジェクトタイプ

properties_to_fetch
Array

オブジェクトタイプに関連付けられているプロパティー名の配列(文字列)。例:“date_of_birth”はコンタクトに関連付けられたプロパティーです。ページ上で利用できる情報を、必要なものに限定する際に使用します。

default
Object

既定で選択されるオブジェクトインスタンスのIDのオブジェクト。コンタクトID、会社IDなど

null

日付

日付フィールドでは、日付入力用インターフェイスを提供できます。制作担当者はこのインターフェイスを使用して簡単に日付を選択できます。このフィールドから返されるタイムスタンプは、コード内で使用できます。

日付フィールドはモジュールでサポートされます。

日付フィールドとカレンダーを開いた状態
// Date field { "name" : "event_start_date", "label" : "Event Date", "required" : false, "locked" : false, "type" : "date", "default" : 1577854800000 }
日付フィールド
パラメーターDescription Default
default
Timestamp

日時の既定として使用するUnixエポック時間のタイムスタンプ。日付入力の開始時に現在の日時を制作担当者に提示するには、nullのままにします。

null

日時

日時フィールドでは、日付フィールドと同じ日付インターフェイスだけでなく、時刻入力用インターフェイスも提供できます。制作担当者はこれらのインターフェイスを使用して簡単に日付と時刻を選択できます。このフィールドから返されるタイムスタンプは、コード内で使用できます。

日時フィールドはモジュールでサポートされます。

イベント開始
// Date and time field { "name" : "event_start", "label" : "Event Start", "required" : false, "locked" : false, "type" : "datetime", "default" : 1577854800000 }
日時フィールド
パラメーターDescription Default
default
Timestamp

日時の既定として使用するUnixエポック時間のタイムスタンプ。日付入力の開始時に現在の日時を制作担当者に提示するには、nullのままにします。

null

Eメールアドレス

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

Eメールフィールドはモジュールでサポートされます。

Eメールフィールド
// Email address field { "name" : "emails", "label" : "Email address", "required" : false, "locked" : false, "type" : "email", "default" : null }
Eメール アドレス フィールド
パラメーターDescription Default
default
Array

Eメールアドレス文字列の配列["bob@example.com", "dennis@example.com"]

null

埋め込み

埋め込みフィールドでは、ユーザーによるoEmbed対応のサイトのURLの追加や、他のサイトからの埋め込みコードの貼り付けが可能になります。oEmbedの資料を参照して、HubSpotでのoEmbedの使用方法の詳細や使用事例をご覧ください。

埋め込みフィールド
// embed field { "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" } }
Use this table to describe parameters / fields
ParameterTypeDescription Default
supported_source_types
Array

サポートされるソースタイプ。oEmbed URL(oembed)、HTML埋め込みコード(html)、またはメディアブリッジ(media_bridge)のいずれか。

["oembed", "html"]
supported_oembed_types
Array

サポートされるoEmbedタイプ。"photo""video""link""rich"など。HTMLのsupported_source_typesには適用されません。

[ "photo", "video", "link", "rich" ]
supported_media_bridge_providers
Array

コンテンツの選択に利用可能なメディア ブリッジ プロバイダーを指定するプロバイダーIDの配列。

注:このパラメーターは、メディア ブリッジ プロバイダー アプリケーションをインストールした場合にも入力されます。 

type
String

このパラメーターは常に"embed"に設定されます。

"embed"
default
Dict

"source_type"パラメーターを含む配列。このパラメーターには、"supported_source_types"パラメーターで提供されるオプションの値を基にした1つの文字列があります。

oembed

ファイル

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

ファイルフィールドはモジュールでサポートされます。

ファイルフィールド
// Email address field { "name" : "file_field", "label" : "File", "required" : false, "locked" : false, "type" : "file", "picker" : "file", "default" : null }
ファイルフィールド
パラメーターDescription Default
default
String

ファイルのURL。

null
picker
String

利用可能な値:file、document、image。
このパラメーターに応じて、ファイルマネージャーまたはドキュメントマネージャーにアップロードされたアセットがファイル選択画面に表示されます。

file

フォローアップEメール

フォローアップEメールフィールドを実装すると、フォーム送信への応答として送信するEメールを制作担当者が指定できるようになります。このフィールドは、simple_email_campaign_idパラメーターでHubLフォームタグを指定して使用します。

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

フォローアップEメールフィールド
// Followup email field { "name" : "followup_email", "label" : "Followup email", "required" : false, "locked" : false, "type" : "followupemail", "default" : null }
Eメール アドレス フィールド
パラメーターDescription Default
default
String

EメールID

null

フォント

フォントフィールドでは、基本的なフォントスタイル設定コントロールを制作担当者に提供できます。制作担当者はサイズ、色、フォントファミリー、書式(太字、イタリック、下線付き)を選択できます。リストに表示されるフォントは全て、Google フォントおよび標準的なウェブ対応フォントです。 

フォントフィールドはテーマとモジュールの両方でサポートされます。フォントフィールドはスタイルフィールドとして使用できます。

フォントフィールド
// Font field { "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 } } }

注:フォントファミリーはfontfont_setの組み合わせによって決まります。フォントを読み込むには、両方を指定する必要があります。継承フィールドの場合、これは、両方の値を継承する必要があることを意味します。

フォントフィールド
パラメーターDescription Default
default
Object

サイズ、サイズ設定単位、色の設定と、太字、イタリック、下線のスタイル設定を含むフォントオブジェクト。

{ "size" : 12, "size_unit" : "px", "color" : "#000", "styles" : { } }
load_external_fonts
Boolean

スタイルシートまたはモジュールのHubLによって選択または参照したウェブフォントが、HubSpot上で自動的にページに読み込まれます。これをfalseに設定した状態ですでにページにフォントが読み込まれている場合、フォントは二重に読み込まれません。

true
visibility
Object

hidden_subfieldsのネストされたオブジェクトを使用して、非表示にするフォントフィールドを制御するブール値を設定できます。サブフィールドには、fontsizebolditalicunderlinecolorがあります。

variant
String

Google フォントを使用する場合は、フォントのバリエーションです。例えば、フォントの太さを700にして使用するには、"700"にします。フォントをイタリックの太さ400にして使用するには、"400i"にします。

フォーム

フォームフィールドを実装すると、アカウント内にある特定のフォームを制作担当者が指定できるようになります。その情報を基に、HubLフォームタグを使用してページにレンダリングできます。 

フォームフィールドはモジュールでサポートされます。

form field-Aug-21-2020-08-09-55-35-PM
// Form field { "name" : "form", "label" : "Form", "required" : false, "locked" : false, "type" : "form", "default" : { "form_id" : "f7110408-1935-4ed3-8a8e-293bb1c9d1ec", "response_type" : "inline", "message" : "Thanks for submitting the form.", "gotowebinar_webinar_key" : null, "form_type" : "HUBSPOT" } }
Eメール アドレス フィールド
パラメーターDescription Default
default
Object

選択したフォームID、レスポンスタイプ、メッセージを含むフォームオブジェクト。

{ "response_type" : "inline", "message" : "Thanks for submitting the form." }

グラデーション

このフィールドは、制作担当者がグラデーションを作成および設定するための方法を提供します。現時点でサポートされている線形グラデーションは5点までです。グラデーションフィールドには、フィールドの値に基づいてCSSを返す.cssプロパティーがあります。生成されるCSSプロパティーの詳細をご確認ください。

グラデーションフィールドはモジュールでサポートされます。グラデーションフィールドはスタイルフィールドとしてのみ使用できます。

グラデーションフィールド
// Gradient field { "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 } } }
Eメール アドレス フィールド
パラメーターDescription Default
default
Object

グラデーションの方向性の設定("side_or_corner")およびグラデーションの段階を、オブジェクトの配列として含むオブジェクト。

HubDB行

HubDB行フィールドによって、制作担当者は定義されたテーブルから個別の行(またはリピーターフィールドを使用する場合は複数行)を選択できます。このフィールドは、ユーザー定義のリスト、テーブル、リソースなどの作成に使用できます。

HubDB行フィールドはモジュールでサポートされます。
HubDB行フィールドは、CMS Hub ProfessionalおよびEnterpriseで利用可能です。

hubdb-row-field
// HubDB Row field { "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 } }
Use this table to describe parameters / fields
ParameterTypeDescription Default
table_name_or_id
String

HubDBテーブルの名前またはID。このフィールドは必須です。

columns_to_fetch
Array

テーブルから取得する列名の配列。空白にした場合、テーブル内の全ての列が返されます。

[]
display_columns
Array

選択ラベルに使用する列名の配列。空白にした場合、テーブルの最初の列のみが返されます。

[]
display_format
String

パーセント記号と数値を使用した列指定による、HubDB行セレクターでの列データの表示形式。
例:%0 (%1)は、列0値 (列1値)と表示されます。

""
default
Object

既定のHubDB行を設定するための「ID」を含むオブジェクト。

{ “id” : null }

HubDBテーブル

HubDBテーブルフィールドを実装すると、制作担当者がアカウント内にある特定のHubDBを指定できます。その情報を基に、HubLフォームタグを使用してページにレンダリングできます。このフィールドからはテーブルIDが返されます。このIDをHubDB HubL関数で使用できます。

HubDBテーブルフィールドはモジュールでサポートされます。HubDBテーブルフィールドは、CMS Hub ProfessionalおよびEnterpriseで利用可能です。

HubDBフィールド
// HubDB Table field { "name" : "recipe_table", "label" : "Recipe Table", "required" : false, "locked" : false, "type" : "hubdbtable", "default" : 2010782 }
Eメール アドレス フィールド
パラメーターDescription Default
default
String

HubDBテーブルのID

null

アイコン

アイコンフィールドでは、アイコン選択用UIを提供できます。制作担当者はこのインターフェイスを使用して簡単にアイコンをモジュールに追加できます。アイコンフィールドにはFontAwesomeアイコンがあらかじめ読み込まれます。

アイコンフィールドはモジュールでサポートされます。アイコンフィールドはスタイルフィールドとして使用できます。

アイコンフィールド
// Icon field { "name" : "icon_field", "label" : "Icon", "required" : false, "locked" : false, "icon_set" : "fontawesome-5.14.0", "type" : "icon", "default" : { "name" : "accessible-icon", "unicode" : "f368", "type" : "REGULAR" } }
アイコンフィールド
パラメーターDescription Default
default
Object

アイコンオブジェクト

icon_set
String

使用するFontAwesomeアイコンのセット。有効な値は、以下のとおりです。
fontawesome-5.14.0
fontawesome-5.0.10

fontawesome-5.14.0

画像

画像フィールドでは、制作担当者が画像をモジュールまたはテーマに追加できるよう、簡単なインターフェイスを提供できます。画像フィールドのファイル選択用インターフェイスには、ファイルマネージャーに保管されている画像のリストが表示されます。画像はさまざまな方法で使用および表示される可能性があることから、開発者は、制作担当者がUIで選択できるサイズ設定オプションの制限ができ、さらに画像の遅延読み込みの許可もできます。

画像フィールド

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

// Image field { "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 } }
リンクフィールド
パラメーターDescription Default
default
Object

画像サイズ、altテキストなどのプロパティーを設定します。以下のプロパティーを含めることができます。 

  • size_type:画像のサイズを自動または手動のどちらで設定するか。
    • "auto":元のサイズを基準に、HubSpotによって画像サイズが自動調整されます。
    • "auto_custom_max""max_height""max_width"プロパティーに指定された最大サイズを基準に、HubSpotによって画像サイズが自動調整されます。
    • "exact""height""width"プロパティーに指定されたサイズを基準に、HubSpotによって画像サイズが設定されます。
  • src:既定の画像のURL。画像の絶対パスにする必要があります。
  • alt:画像の既定のaltテキスト。
  • loading:画像の遅延読み込みオプション"disabled"(既定)、"eager"、または"lazy"に設定できます。
{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }
responsive
Boolean

画像がレスポンシブ対応か、または高さと幅が固定されるかを指定します。

true
show_loading
Boolean

画像の遅延読み込みを選択するためのコントロールをページエディターに表示するかどうかを指定します。

false

リンク

リンクフィールドでは、制作担当者がURLやEメールアドレスへのリンクを記載できるよう、簡単なインターフェイスを提供できます。外部リンクの場合、制作担当者は「external」を選択します。Eメールリンクの場合は、「email address」を選択します。CMS Hubでホスティングされているコンテンツの場合、「content」を使用して、アカウント内の全てのページとブログ記事のリスト、ファイルアセットが記載されたファイル、ブログ、またはアカウント内のブログリストを表示することができます。リンクフィールドはURLフィールドと同様ですが、主な違いとして、リンクフィールドには、「新しいウィンドウで開く」よう指示したり、「検索エンジンに追跡しない」ように指示したりするためのUIが表示されます。制作担当者にこのような制御を行わせるのが適切でない場合は、URLフィールドを使用してください。

リンクフィールドはモジュールでサポートされます。

リンクフィールド
// Link field { "name" : "link", "label" : "Link", "required" : false, "locked" : false, "supported_types" : [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ], "type" : "link", "show_advanced_rel_options" : false, "default" : { "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false } }
リンクフィールド
パラメーターDescription Default
default
Object

URLオブジェクト

{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }
supported_types
Array

このフィールド上で制作担当者が選択できるリンクのタイプのリスト。制作担当者が利用しないタイプはこのリストから削除してください。

[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]
show_advanced_rel_options
Boolean

制作担当者に対して高度なrelオプションを表示するかどうか。 

false

ロゴ

ロゴフィールドでは、ページ内で使用するロゴ画像を指定する機能を制作担当者に提供できます。指定しない場合、既定でドメインのロゴが使用されます。サイトのヘッダーやフッターに会社のロゴが表示されるようにするには、このフィールドが役立ちます。

ロゴフィールドはモジュールでサポートされます。

ロゴフィールド
// Logo field { "name" : "logo", "label" : "Logo", "required" : false, "locked" : false, "type" : "logo", "default" : { "override_inherited_src" : false, "src" : null, "alt" : null } }
リンクフィールド
パラメーターDescription Default
default
Object

ロゴオブジェクト

{ "override_inherited_src" : false, "src" : null, "alt" : null }

メニュー

メニューフィールドには、制作担当者が他のページで再利用できるナビゲーションメニューを作成、編集、選択できるよう、簡単にインターフェイスが表示されます。メインナビゲーション、フッターナビゲーションなどの複数のページに表示されるメニューや、他のグローバルコンテンツで使用されるメニューには、このフィールドを使用すると非常に役立ちます。モジュール内にメニューをレンダリングするには、メニュータグまたはmenu()関数と併せてこのフィールドを使用します。

他のページで再利用するのは妥当ではないメニュー(目次メニューなど)の場合は、シンプル メニュー フィールドを使用してください。

メニューフィールドはモジュールでサポートされます。

メニューフィールド
// Menu field { "name" : "menu", "label" : "Menu", "required" : false, "locked" : false, "type" : "menu", "default" : 12345678911 }
リンクフィールド
パラメーターDescription Default
default
Integer

メニューのメニューID。既定値のnullの場合、ナビゲーションの下の既定メニューが設定されます。

null

数値

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

数値フィールドはモジュールでサポートされます。数値フィールドはスタイルフィールドとして使用できます。

数値フィールド
// Number field { "name" : "number_field", "label" : "Number", "required" : false, "locked" : false, "display" : "slider", "min" : 1, "max" : 10, "step" : 1, "type" : "number", "prefix": "", "suffix" : "", "default" : null }

注:サフィックスとプレフィックスパラメーターを使用しても、フィールドの数値には影響ありません。コンテンツエディターでの表示にのみ使用されます。

リンクフィールド
パラメーターDescription Default
default
Number

既定として使用する数値。

null
prefix
String

数値フィールド(の前)に追加するプレフィックス。

suffix
String

数値フィールド(の後)に追加するサフィックス。

ページ

ページフィールドには、制作担当者がサイトのページやランディングページを選択するためのインターフェイスが表示されます。

ページフィールドから返される値は、選択したページのページIDです。このフィールドをcontent_by_id関数またはcontent_by_ids関数と併せて使用すると、選択したページのデータを現在のページで使用できます。

ページフィールドはモジュールでサポートされます。

// Page field { "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 }
リンクフィールド
パラメーターDescription Default
default
Integer

既定で選択するページのID。

null

リッチテキスト

リッチ テキスト フィールドは、制作担当者にWYSIWYGテキストエディターの操作感を提供します。リッチ テキスト フィールドの値は、HTMLとして出力されます。制作担当者にフォーマット設定機能を使用させない場合は、テキストフィールドを使用してください。

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

リッチ テキスト フィールド
// Rich text field { "name" : "description", "label" : "Description", "required" : false, "locked" : false, "type" : "richtext", "default" : null }
リンクフィールド
パラメーターDescription Default
default
String

表示するコンテンツの文字列としてHTMLがサポートされます。 

注:この既定のプロパティーではget_asset_url関数を使用することはできません。 

""
enabled_features
任意
Array

リッチ テキスト エディターのツールバーとしてコンテンツ編集者に提供するオプションの設定に使用する項目の配列。 

シンプルメニュー

シンプル メニュー フィールドには、制作担当者がナビゲーションメニューを作成できるよう、簡単なインターフェイスが表示されます。このフィールドで作成するナビゲーション メニューは他のページで再利用できません。再利用可能にしなければならないメニューの場合は、メニューフィールドを使用してください。このフィールドを使用する必要があるのは、非常に長いページの見出しにリンクする目次メニューや、現在のページでしか意味をなさない、コンテンツへのリンクのリストを作成する場合です。

シンプル メニュー フィールドはモジュールでサポートされます。

シンプルメニューフィールド
// Simple menu field { "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" : [ ] } ] }
リンクフィールド
パラメーターDescription Default
default
Array of objects

メニューと子メニューを表すJSON構造。

[]

間隔

このフィールドは、制作担当者がパディングとマージンを設定するためのユーザーインターフェイス(UI)を提供します。間隔フィールドには、フィールドの値に基づいてCSSを返す.cssプロパティーがあります。生成されるCSSプロパティーの詳細をご確認ください。

間隔フィールドはモジュールでサポートされます。
間隔フィールドはスタイルフィールドとしてのみ使用できます。

ページエディターで展開された間隔スタイルフィールドのスクリーンショット
// Spacing field { "name": "img_spacing", "label": "Spacing around image", "required": false, "type": "spacing", "default": { "padding": { "top": { "value": 10, "units": "px" }, "bottom": { "value": 10, "units": "px" }, "left": { "value": 10, "units": "px" }, "right": { "value": 10, "units": "px" } }, "margin": { "top": { "value": 10, "units": "px" }, "bottom": { "value": 10, "units": "px" } } } }
リンクフィールド
パラメーターDescription Default
default
Object

パディングオブジェクトとマージンオブジェクトを含むオブジェクト。現時点では、上部と下部のみの調整をサポートしています。

{}

タグ

タグフィールドには、制作担当者用のブログピッカーが表示されます。このタグピッカーからは、ブログタグIDが返されます。このIDを、ブログタグ関連の関数(blog_tag_urlblog_recent_tag_postsなど)で使用できます。

タグフィールドはモジュールでサポートされます。

タグフィールド
// Tag field { "id" : "c3395cd3-8e60-7e47-2f1b-b7ccf4d669c9", "name" : "blog_tag", "label" : "Blog Tag", "required" : false, "locked" : false, "tag_value" : "SLUG", "type" : "tag", "default" : null }
タグフィールド
パラメーターDescription Default
default
String

ブログタグID

null

テキスト

テキストフィールドでは、制作担当者がリッチテキスト機能を使用せずに、単純にテキストを編集できます。初期状態のテキストフィールドは1行のフィールドとして表示されますが、実際にはテキストエリアに拡大して複数の行を使用できます。制作担当者に書式を制御させない場合は、このフィールドを使用します。書式設定コントロールを提供する場合は、リッチ テキスト フィールドを使用してください。

テキストフィールドはモジュールでサポートされます。

テキストフィールド
// Text field { "name" : "product_name", "label" : "Product Name", "required" : false, "locked" : false, "validation_regex" : "", "allow_new_line" : false, "show_emoji_picker" : false, "type" : "text", "default" : "" }
リンクフィールド
パラメーターDescription Default
default
String

テキスト文字列。

""

テキスト位置合わせ

このフィールドは、制作担当者がテキストコンテンツをコンテナー内の適切な位置に配置するための方法を提供します。このフィールドは他のアセットの位置合わせには使用しないでください。他のアセットの位置合わせには専用のフィールドタイプがあるためです。

テキストの位置合わせフィールドはモジュールでサポートされます。テキストの位置合わせフィールドはスタイルフィールドとしてのみ使用できます。

テキスト位置合わせフィールド
// text alignment field { "name": "heading_align", "label": "Heading alignment", "required": false, "type": "textalignment", "default": { "text_align": "LEFT" } }
ブログフィールド
パラメーターDescription Default
default
Object

horizontal_alignおよびvertical_alignを含むオブジェクト。

alignment_direction
String

水平方向のみ、垂直方向のみ、または両方の位置合わせコントロールを表示するかどうかを指定します。例:

  • HORIZONTAL
  • VERTICAL
  • BOTH
BOTH

URL

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

URLフィールドはモジュールでサポートされます。

URLフィールド
// URL field { "name" : "url", "label" : "URL", "required" : false, "locked" : false, "supported_types" : [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ], "type" : "url", "default" : { "content_id" : null, "href" : "http://example.com", "type" : "EXTERNAL" } }
リンクフィールド
パラメーターDescription Default
default
Object

タイプ、href、コンテンツID(コンテンツがHubSpotのページまたは投稿の場合)を伴うURLオブジェクト。

{ "content_id" : null, "href" : "", "type" : "EXTERNAL" }
supported_types
Array

このフィールド上で制作担当者が選択できるリンクのタイプのリスト。制作担当者が利用しないタイプはこのリストから削除してください。

[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]

動画

動画フィールドは、リッチ テキスト フィールドを使用せずにHubSpot動画をモジュールコンテンツに追加するための場所を、制作担当者に提供します。

動画フィールド
//Video field { "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 } }
Use this table to describe parameters / fields
ParameterTypeDescription Default
default
Object

player_idheightwidthsize_typeconversion_assetloop_videomute_by_defaultautoplayhide_controlの設定を備えた動画オブジェクト。

[]
show_advanced_options
Boolean

制作担当者に対して高度な既定のオプションを表示するかどうか。

false

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

Use this table to describe parameters / fields
ParameterTypeDescription Default
type
String

"FORM""CTA"、または""のいずれかを指定できます

""
id
String

フォームまたはCTAタイプのID

""
position
String

動画の開始前または終了後にコンバージョンアセットを表示するかどうか。「PRE」または「POST」のいずれかを指定できます。

""

参考になりましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。