HubSpotのCMSのウェブサイトページ編集で、1ページに同じカスタムモジュールを複数個設置した場合、require_css で共通のクラス名にスタイルを当てると、すべてのモジュールにそのスタイルが適用されてしまいます。
「モジュールごとに背景色や見出しの色を変えたい！」という場面、ありますよね？
この記事では、HubLでユニークなクラス名を動的に生成して、モジュールごとに個別スタイルを適用する方法を紹介します。
問題点：共通クラス名でのスタイルが全モジュールに影響する
以下のように書くと、.bg_color というクラスはすべてのモジュールで共通になるため、最後に出力されたモジュールの色で上書きされてしまいます。
{% require_css %}
<style>
.bg_color {
background-color: {{ module.color_field.color }};
}
</style>
{% end_require_css %}解決策：HubLでユニークなクラスを自動生成する
ステップ1：ユニークなクラス名を作成
これは、モジュールの「インスタンス名」を小文字にしてスペースをハイフンに置き換えたものです。ページ内でモジュール名を変えれば、自動的にユニークなクラス名になります。
ステップ2：ユニーククラスにスタイルを割り当てる
{% require_css %}
<style>
.{{ unique_id }} {
background-color: {{ module.bg_color.color }};
}
.{{ unique_id }} .title h2 {
background: {{ module.title_bg_color.color }};
display: inline-block;
padding: 0.3em 2em;
border-radius: 100vh;
font-size: 1rem;
}
</style>
{% end_require_css %}bg_color：モジュール全体の背景色title_bg_color：h2要素の背景色
それぞれのフィールドをモジュールごとに個別で指定できます。
ステップ3：HTMLにユニーククラスを付ける
<div class="{{ unique_id }}">
<div class="title">
<h2>タイトル</h2>
</div>
<!-- コンテンツ -->
</div>これで、各モジュールごとに .title h2 の色も別々に指定可能になります。
まとめ
HubSpotのカスタムモジュールで個別スタイルを反映したい場合は、以下の3点を組み合わせることでスタイル競合を防げます。
require_cssを活用しつつ- HubLでユニークなクラス名を生成する（
name|lower|replace(" ", "-")） - CSSセレクタを
.hublで動的にcssクラスを生成して、モジュール単位で背景色を設定する方法 .xxxで限定的に当てる
1ページ内に複数モジュールがあっても、モジュール名を変えるだけでスタイルを独立させることができます。
よくある質問（FAQ）
Q. name 変数はどこから取得されますか？
HubSpotのモジュールインスタンス名です。ページ編集画面でモジュールを選択したとき、サイドパネルの上部に表示される名前がこれに対応します。デフォルトでは「Module」などになっているため、複数配置する場合は「Section-Blue」「Section-Red」のように任意の名前に変更してください。
Q. モジュール名を変更し忘れた場合はどうなりますか？
同じ名前のモジュールが複数あると unique_id が重複し、スタイルが意図せず共有されます。ページ編集後は必ず各モジュールのインスタンス名がユニークになっているか確認してください。
Q. require_css は通常の <style> タグとどう違いますか？
require_css はHubSpotがスタイルを重複出力しないよう管理するための仕組みです。同一スタイルが複数回呼ばれても1回だけ出力されます。通常の <style> タグをモジュール内に直接書くとモジュールの数だけ出力されるため、パフォーマンスの観点からも require_css の使用が推奨されています。
Q. この方法はHubSpotのランディングページやブログにも使えますか？
HubLが使えるテンプレート（ウェブサイトページ・ランディングページ）であれば同様に利用できます。ブログ投稿の本文はHubLの制限があるため、カスタムモジュールを使う場合はテーマのモジュールとして実装する形になります。
HubSpotのカスタムモジュール開発でお困りの場合
インセンブルでは、HubSpotのCMS実装・カスタムモジュール開発・テーマカスタマイズを行っています。「モジュールを自作したいが書き方がわからない」「既存テーマを改修したい」といったご相談もお気軽にどうぞ。