HubLで動的にCSSクラスを生成して、モジュール単位で背景色を設定する方法

HubSpotのCMSのウェブサイトページ編集で、1ページに同じカスタムモジュールを複数個設置した場合、require_css で共通のクラス名にスタイルを当てると、すべてのモジュールにそのスタイルが適用されてしまいます。

「モジュールごとに背景色や見出しの色を変えたい！」という場面、ありますよね？

この記事では、HubLでユニークなクラス名を動的に生成して、モジュールごとに個別スタイルを適用する方法を紹介します。

問題点：共通クラス名でのスタイルが全モジュールに影響する

{% require_css %}
  <style>
    .bg_color {
      background-color: {{ '{{ module.color_field.color }}' }};
    }
  </style>
{% end_require_css %}

このように書くと、.bg_color というクラスはすべてのモジュールで共通になるため、最後に出力されたモジュールの色で上書きされてしまいます。

解決策：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のカスタムモジュールで個別スタイルを反映したい場合は：

• require_css を活用しつつ
• HubLでユニークなクラス名を生成
• CSSセレクタを .hublで動的にcssクラスを生成して、モジュール単位で背景色を設定する方法 .xxx で限定的に当てる

ことで、1ページ内に複数モジュールがあってもスタイル競合を防ぐことができます。

まずは相談から始めましょう

HubSpiotのモジュールごとに個別スタイルを適用する方法について解説しました。

お一人でこれらの実装が大変だ！という場合には弊社までご連絡ください。Webサイトの運用をサポートいたします。