2025.06.09
HubLで動的にCSSクラスを生成して、モジュール単位で背景色を設定する方法
HubSpotのCMSのウェブサイトページ編集で、1ページに同じカスタムモジュールを複数個設置した場合、require_css で共通のクラス名にスタイルを当てると、すべてのモジュールにそのスタイルが適用されてしまいます。
「モジュールごとに背景色や見出しの色を変えたい！」という場面、ありますよね？
この記事では、HubLでユニークなクラス名を動的に生成して、モジュールごとに個別スタイルを適用する方法を紹介します。
問題点：共通クラス名でのスタイルが全モジュールに影響する
このように書くと、.bg_color というクラスはすべてのモジュールで共通になるため、最後に出力されたモジュールの色で上書きされてしまいます。
解決策：HubLでユニークなクラスを自動生成する
ステップ1：ユニークなクラス名を作成
これは、モジュールの「インスタンス名」を小文字にしてスペースをハイフンに置き換えたものです。
ページ内でモジュール名を変えれば、自動的にユニークなクラス名になります。
ステップ2：ユニーククラスにスタイルを割り当てる
- bg_color：モジュール全体の背景色としてフィールドを設定します。
- title_bg_color：h2要素の背景色としてフィールドを設定します。
を個別に指定可能です。
ステップ3：HTMLにユニーククラスを付ける
<div class="hublで動的にcssクラスを生成して、モジュール単位で背景色を設定する方法">
<div class="title">
<h2>タイトル</h2>
</div>
<!-- コンテンツ -->
</div>
これで、各モジュールごとに .title h2 の色も別々に指定可能になります！
まとめ
HubSpotのカスタムモジュールで個別スタイルを反映したい場合は：
- require_css を活用しつつ
- HubLでユニークなクラス名を生成
- CSSセレクタを .hublで動的にcssクラスを生成して、モジュール単位で背景色を設定する方法 .xxx で限定的に当てる
ことで、1ページ内に複数モジュールがあってもスタイル競合を防ぐことができます。
まずは相談から始めましょう
HubSpiotのモジュールごとに個別スタイルを適用する方法について解説しました。
お一人でこれらの実装が大変だ！という場合には弊社までご連絡ください。Webサイトの運用をサポートいたします。
