> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-language-selector.md).

# AX - 言語セレクター

## 概要

**AX - 言語セレクター** Experience Sites ページに言語ピッカーを表示し、ポータルユーザーが利用可能な言語を切り替えられる Experience Cloud コンポーネントです。

国際的な顧客やパートナー向けに多言語サポートを提供するために使用します。このコンポーネントは、Experience Site に設定されたすべての有効な言語を表示し、ユーザーが別の言語を選択するとページ内容を更新します。

グローバルな顧客ポータル、国際的なパートナーサイト、複数リージョンのサポートセンター、または異なる言語を話すユーザーにサービスを提供するあらゆるポータルに最適です。

<details>

<summary>🔀 Salesforce 標準言語セレクターと Avonni Language Selector の違い</summary>

Avonni Language Selector は、標準の Salesforce 言語セレクターより優れており、次の機能を提供します:

1. **言語のグループ化:** 地域やその他の基準で言語を整理し、使いやすい体験を実現します。
2. **視覚的なカスタマイズ:** セレクターの見た目と操作感を、Web サイトのデザインに合わせて調整できます。
3. **高度な機能:** 標準セレクターにはない、メニューの nubbin カスタマイズや柔軟なメニュートリガーなどの機能を利用できます。

Avonni Language Selector を使えば、機能的で視覚的にも魅力的、かつ Web サイト独自のアイデンティティに完全に合った多言語体験を作成できます。

</details>

## 設定

### **準備を整える: 基本設定**

#### **ラベル**

* 言語選択メニューの上に表示されるラベルをカスタマイズします。
* あるいは、「現在の言語をラベルとして使用」オプションを切り替えて、現在選択されている言語をラベルとして動的に表示します。

<figure><img src="/files/74c1b2eea57a3c38d859d678775b67e83417b752" alt="" width="563"><figcaption></figcaption></figure>

#### **言語グループ**

* 言語グループ機能を使用して、複数の言語を個別の列に整理します。
* 選択する言語が有効で、サイトで利用可能であることを確認してください。

<figure><img src="/files/e0cc70644d8b3def2c88a9e56f3a925b7c8ce128" alt="" width="306"><figcaption></figcaption></figure>

### **視覚的なカスタマイズ**

#### **アイコン名とサイズ**

言語の多様性を表すシンボル（たとえば地球儀など）を選び、サイトの雰囲気に合うようサイズを調整します。Lightning Design System のアイコンの代わりに、 **CMS アイコンソース** または **アイコン URL または式**。切り替え **現在の言語をラベルとして使用** 現在選択されている言語をボタンのラベルとして表示します。

#### **バリアント**

サイトの美観に合う視覚スタイル（bare、bare-inverse、base、border、border-filled など）を選択します。

#### **メニューの配置**

サイトの美観に合う視覚スタイル（bare、bare-inverse、base、border、border-filled など）を選択します。

### **メニューの動作**

#### **メニューのトリガー**

訪問者はボタンをクリックしますか、ホバーしますか、それともフォーカスすると言語オプションが表示されますか？対象ユーザーにとって最も直感的な操作を選択してください。

#### **メニューのヌビン**

この小さな矢印は、道標のようにメニューからコンポーネントへと向きを示すさりげない装飾です。

#### **メニュータイトル**

明確さのために、メニューに分かりやすいタイトル（例:「言語を選択」）を付けます。

### **役立つヒントとアクセシビリティ**

#### **ツールチップ**

ユーザーがコンポーネントにホバーしたとき、ツールチップで簡単な説明や手順を表示します。

#### **下向き矢印を非表示**

よりすっきりした見た目にしたい場合は、通常ドロップダウンに付随する下向き矢印アイコンを非表示にできます。

#### **伸長**

このオプションにより、コンポーネントを拡張してコンテナいっぱいに表示し、洗練された見た目を実現できます。

#### **無効**

必要に応じて、言語選択機能を一時的に無効化します。

#### **水平配置**

コンテナ内でのコンポーネントの水平方向の配置（左、中央、右）を制御します。

Avonni Language Selector により、Experience Cloud サイトは世界中のユーザーを歓迎する拠点になります。訪問者は好みの言語を簡単に選択でき、コンテンツを快適かつスムーズに閲覧できます。

## スタイリング

{% tabs %}
{% tab title="間隔" %}
コンポーネントの周囲の余白（上 / 下 / 左 / 右）を制御します。
{% endtab %}

{% tab title="背景" %}

* **色 / アクティブ時の色 / ホバー時の色:** 通常時、アクティブ時、ホバー時のトリガーボタンの背景を設定します。
  {% endtab %}

{% tab title="ラベル/アイコン" %}

* **色 / アクティブ時の色 / ホバー時の色:** 各状態のラベルとアイコンの色を設定します。
* **フォントサイズ / フォントスタイル / フォントウェイト / フォントファミリー:** ラベルのタイポグラフィを制御します。
* **水平配置：** ラベルとアイコンを揃えます。
  {% endtab %}

{% tab title="枠線" %}

* **色 / アクティブ時の色 / ホバー時の色:** 各状態の枠線色を設定します。
* **サイズ / スタイル / 角丸:** トリガーボタンの枠線を制御します。
  {% endtab %}

{% tab title="画像" %}

* **枠線の色 / サイズ / スタイル / 角丸 / オブジェクトフィット:** トリガーアイコンとして使用するカスタム画像をスタイル設定します。
  {% endtab %}

{% tab title="メニュー" %}

* **幅 / 最小幅 / 最大幅 / 高さ / 最小高さ / 最大高さ / 列幅:** ドロップダウンメニューのサイズを制御します。
* **ブロックスペーシング / インラインスペーシング:** メニューの間隔を設定します。
  {% endtab %}

{% tab title="メニューの色" %}

* **背景 / 枠線:** メニューの背景色と枠線色を設定します。
  {% endtab %}

{% tab title="メニュータイトル" %}

* **テキスト色 / フォントサイズ / フォントウェイト / フォントファミリー / テキストシャドウ:** メニュータイトルをスタイル設定します。
  {% endtab %}

{% tab title="メニューグループラベル" %}

* **テキスト色 / フォントサイズ / フォントウェイト / フォントファミリー / テキストシャドウ:** 言語グループのラベルをスタイル設定します。
  {% endtab %}

{% tab title="メニュー項目" %}

* **ホバー時の背景色 / テキスト色 / ホバー時のテキスト色:** メニュー項目の色を設定します。
* **フォントサイズ / フォントファミリー / テキストシャドウ:** メニュー項目のタイポグラフィを制御します。
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-language-selector.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.