HubSpot カスタムモジュールにスタイルフィールドを使用してみた

HubSpotでカスタムモジュールを作成する時、スタイルフィールドを設定することで、
スタイルタブはユーザーに色や余白、フォントなどの「見た目」をカスタマイズさせるための設定エリアです。
でも、実際に使ってみてわかったのは、Styleタブに設定した値はHTML内で指定しないと反映されないということ。

🎯 どこに何を設定するの？

Design ManagerでStyleタブに色やフォントなどのフィールドを追加しても、それだけでは見た目は変わりません。
実際にデザインに反映するには、HTMLや<style>タグの中でその値をHubLを使って呼び出す必要があります。

前回、デザインマネージャーで作成したカスタムモジュールに
font_colorというカラー選択フィールドを追加しました。

ユーザーがスタイルタブで色を選ぶと、その値が自動でテキストに反映されるようになります。
これにより、HTMLやCSSなどに馴染みのない マーケーターも簡単にスタイルを微調整できるようになります。
また、デフォルト値を設定する子で、何も選択されていない場合についても指定可能です。

🎨 テストしたコード

（HTMLコードは前回のコードそのまま使用しています）

<div style="text-align:;">

 5）チェックされてない時だけ表示

</div>

<style>
*, div {
  font-family: Verdana;
  line-height: 1.5;
  
}
</style>

ユーザーがStyleタブで色を選ぶと、その値が自動でテキストに反映されるようになります。
何も選択されていない場合は、スタイルはデフォルトのままです。

✏️ 今日のメモ