Zum Hauptinhalt springen
最終更新日: 2025年8月22日
ブランド設定を使用すると、ユーザーはHubSpotコンテンツ全体で使用される会社のブランドカラー、ロゴ、ファビコンを設定できます。これにより、テーマのfields.jsonファイル内、HTML/HubLファイル内、CSSファイル内のトークンを使用して、これらのブランド設定にアクセスできるようになります。モジュールのfields.jsonファイル内でブランドカラーにアクセスすることもできます。 fields.jsonファイル内にこれらのトークンを追加した後、コンテンツ作成者はテーマ設定エディター内で値を編集できます。HTML、HubL、またはCSSでこれらのトークンを追加すると、値はハードコードされ、コンテンツ作成者がページエディターで変更することはできなくなります。 以下では、利用可能なブランド設定変数と実装例について説明します。

​
ブランド設定変数

property_value_pathsオブジェクトの値内、またはHTML/HubLファイルとCSSファイル内でブランド設定エリアからアクセスできるオプションを以下に示します。

​
カラー

ブランドカラーには、テーマまたはモジュールのfields.jsonファイル内、および次のHubLトークンを使用してHTML/HubLファイルおよびCSSファイル内からアクセスできます。
  • プライマリー：
    • {{brand_settings.primaryColor}}
    • {{brand_settings.colors[0]}}
brand-colors-primary
  • セカンダリー：{{brand_settings.secondaryColor}}
brand-colors-secondary
  • アクセントカラー：
    • {{brand_settings.accentColor1}}
    • {{brand_settings.accentColor2}}
    • {{brand_settings.accentColor3}}
brand-colors-accent
  • 追加の色：
    • {{brand_settings.colors[1]}}
    • {{brand_settings.colors[2]}}
    • {{brand_settings.colors[3]}}
brand-colors-additional
色の16進コードに直接アクセスするには、トークンにhexフィルターを含めます。例：{{brand_settings.primaryColor.hex}} テーマまたはモジュールのfields.jsonファイルにブランド設定カラーを含めるには、次の形式を使用します。 
//Example of using the primary color in within a theme's
// field.json file
{
  "name": "branding_color",
  "label": "branding_color",
  "type": "color",
  "default": {
    "color": "#26ff55",
    "opacity": 60
  },
  "inherited_value": {
    "property_value_paths": {
      "color": "brand_settings.primaryColor"
    }
  }
}
アカウントのブランド設定に追加の色が設定されていない場合があります。コードがブランド設定に存在しない継承色を参照している場合は、次のフォールバックロジックが使用されます。
  • secondaryColorは最初の追加色（colors[1]）にフォールバックします。
  • accentColor1は2番目の追加色（colors[2]）にフォールバックします。
  • accentColor2は3番目の追加色（colors[3]）にフォールバックします。
  • accentColor3は4番目の追加色（colors[4]）にフォールバックします。
  • その他の色（colors[3]など）はdefault値にフォールバックします。既定のプロパティーの色が設定されていない場合は、primaryColorが使用されます。

​
ロゴ

ブランドロゴには、モジュールのfields.jsonファイル内、HTML/HubLファイルおよびCSSファイル内からアクセスできます。 次のトークンを使用して、ブランド設定内でプライマリーロゴセットにアクセスできます：
  • {{brand_settings.primaryLogo}}
  • {{brand_settings.logos[0]}}
brand-settings-logo0
全ての追加のロゴには、{{brand_settings.logos[1-19]}}を使用してアクセスできます。 さらに、次のロゴ属性にアクセスできます。
  • ロゴのURL：{{brand_settings.primaryLogo.link}}
  • ロゴのaltテキスト：{{brand_settings.primaryLogo.alt}}
  • ロゴの高さ：{{brand_settings.primaryLogo.height}}
  • ロゴの幅：{{brand_settings.primaryLogo.width}}
  • ロゴの画像へのリンク：{{brand_settings.primaryLogo.src}}

​
ファビコン

ブランドファビコンには、HTML/HubLファイルおよびCSSファイル内からのみアクセスできます。 次のトークンを使用して、ブランド設定内でプライマリーロゴセットにアクセスできます：
  • {{brand_settings.primaryFavicon}}
  • {{brand_settings.favicons[0]}}
brand-settings-favicon0
全ての追加のファビコンには、{{brand_settings.favicons[1-19]}}を使用してアクセスできます。 srcフィルターを含めることで、ロゴのURLに直接アクセスできます。例：{{brand_settings.primaryFavicon.src}}