For the complete documentation index, see llms.txt. This page is also available as Markdown.

AX - 言語セレクター

概要

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

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

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

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

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

  1. 言語のグループ化: 地域やその他の基準で言語を整理し、使いやすい体験を実現します。

  2. 視覚的なカスタマイズ: セレクターの見た目と操作感を、Web サイトのデザインに合わせて調整できます。

  3. 高度な機能: 標準セレクターにはない、メニューの nubbin カスタマイズや柔軟なメニュートリガーなどの機能を利用できます。

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

設定

準備を整える: 基本設定

ラベル

  • 言語選択メニューの上に表示されるラベルをカスタマイズします。

  • あるいは、「現在の言語をラベルとして使用」オプションを切り替えて、現在選択されている言語をラベルとして動的に表示します。

言語グループ

  • 言語グループ機能を使用して、複数の言語を個別の列に整理します。

  • 選択する言語が有効で、サイトで利用可能であることを確認してください。

視覚的なカスタマイズ

アイコン名とサイズ

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

バリアント

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

メニューの配置

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

メニューの動作

メニューのトリガー

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

メニューのヌビン

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

メニュータイトル

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

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

ツールチップ

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

下向き矢印を非表示

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

伸長

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

無効

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

水平配置

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

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

スタイリング

コンポーネントの周囲の余白(上 / 下 / 左 / 右)を制御します。

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

  • 色 / アクティブ時の色 / ホバー時の色: 各状態のラベルとアイコンの色を設定します。

  • フォントサイズ / フォントスタイル / フォントウェイト / フォントファミリー: ラベルのタイポグラフィを制御します。

  • 水平配置: ラベルとアイコンを揃えます。

  • 色 / アクティブ時の色 / ホバー時の色: 各状態の枠線色を設定します。

  • サイズ / スタイル / 角丸: トリガーボタンの枠線を制御します。

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

  • 幅 / 最小幅 / 最大幅 / 高さ / 最小高さ / 最大高さ / 列幅: ドロップダウンメニューのサイズを制御します。

  • ブロックスペーシング / インラインスペーシング: メニューの間隔を設定します。

  • 背景 / 枠線: メニューの背景色と枠線色を設定します。

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

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

  • ホバー時の背景色 / テキスト色 / ホバー時のテキスト色: メニュー項目の色を設定します。

  • フォントサイズ / フォントファミリー / テキストシャドウ: メニュー項目のタイポグラフィを制御します。

最終更新

役に立ちましたか?