> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.jp/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# ブランド設定の継承

> ロゴやブランドカラーなどのブランド設定を、テーマ内、またはHubL/HTMLファイルおよびCSSファイル全体で使用する方法について説明します。 

[ブランド設定](https://knowledge.hubspot.com/settings/customize-branding-for-your-hubspot-content#customize-your-company-logo-and-colors)を使用すると、ユーザーはHubSpotコンテンツ全体で使用される会社のブランドカラー、ロゴ、ファビコンを設定できます。これにより、テーマの`fields.json`ファイル内、HTML/HubLファイル内、CSSファイル内のトークンを使用して、これらのブランド設定にアクセスできるようになります。モジュールの`fields.json`ファイル内でブランドカラーにアクセスすることもできます。

`fields.json`ファイル内にこれらのトークンを追加した後、コンテンツ作成者はテーマ設定エディター内で値を編集できます。HTML、HubL、またはCSSでこれらのトークンを追加すると、値はハードコードされ、コンテンツ作成者がページエディターで変更することはできなくなります。

以下では、利用可能なブランド設定変数と実装例について説明します。

## ブランド設定変数

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

### カラー

ブランドカラーには、テーマまたはモジュールの[fields.jsonファイル](#fields-json-color)内、および次のHubLトークンを使用してHTML/HubLファイルおよびCSSファイル内からアクセスできます。

* **プライマリー：**

  * `{{brand_settings.primaryColor}}`
  * `{{brand_settings.colors[0]}}`

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/brand-colors-primary.png" alt="brand-colors-primary" />
</Frame>

* **セカンダリー：**`{{brand_settings.secondaryColor}}`

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/brand-colors-secondary.png" alt="brand-colors-secondary" />
</Frame>

* **アクセントカラー：**

  * `{{brand_settings.accentColor1}}`
  * `{{brand_settings.accentColor2}}`
  * `{{brand_settings.accentColor3}}`

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/brand-colors-accent.png" alt="brand-colors-accent" />
</Frame>

* **追加の色：**

  * `{{brand_settings.colors[1]}}`
  * `{{brand_settings.colors[2]}}`
  * `{{brand_settings.colors[3]}}`

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/brand-colors-additional.png" alt="brand-colors-additional" />
</Frame>

色の16進コードに直接アクセスするには、トークンに`hex`フィルターを含めます。例：`{{brand_settings.primaryColor.hex}}`

テーマまたはモジュールの`fields.json`ファイルにブランド設定カラーを含めるには、次の形式を使用します。

```json theme={null}
//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"
    }
  }
}
```

<Warning>
  アカウントのブランド設定に追加の色が設定されていない場合があります。コードがブランド設定に存在しない継承色を参照している場合は、次のフォールバックロジックが使用されます。

  * `secondaryColor`は最初の追加色（`colors[1]`）にフォールバックします。
  * `accentColor1`は2番目の追加色（`colors[2]`）にフォールバックします。
  * `accentColor2`は3番目の追加色（`colors[3]`）にフォールバックします。
  * `accentColor3`は4番目の追加色（`colors[4]`）にフォールバックします。
  * その他の色（`colors[3]`など）は`default`値にフォールバックします。既定のプロパティーの色が設定されていない場合は、`primaryColor`が使用されます。
</Warning>

### ロゴ

ブランドロゴには、モジュールの`fields.json`ファイル内、HTML/HubLファイルおよびCSSファイル内からアクセスできます。

次のトークンを使用して、ブランド設定内でプライマリーロゴセットにアクセスできます：

* `{{brand_settings.primaryLogo}}`
* `{{brand_settings.logos[0]}}`

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2021/Developer/brand-settings-logo0.png" alt="brand-settings-logo0" />
</Frame>

全ての追加のロゴには、`{{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]}}`

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2021/Developer/brand-settings-favicon0.png" alt="brand-settings-favicon0" />
</Frame>

全ての追加のファビコンには、`{{brand_settings.favicons[1-19]}}`を使用してアクセスできます。

`src`フィルターを含めることで、ロゴのURLに直接アクセスできます。例：`{{brand_settings.primaryFavicon.src}}`