コンテンツとデザインを適応させる

始める前に: ローカリゼーションについて詳しく知るには、ローカリゼーションの概要をご覧ください。

デフォルトでは、サイトに追加したロケールはサイトのプライマリロケールのコンテンツとスタイルを継承します。上書きしたり、 カスタマイズ 特定の地域の顧客の文化的および言語的要件を満たすために、デザイナー キャンバス上であらゆるものを作成できます。

プライマリロケールに要素を挿入すると、 ロケールビュー オプションをトップバーから選択し、希望するロケールを選択して、通常どおりに要素を変更します。ただし、これらの調整は選択したロケールにのみ影響します。ローカライズされた要素は「グローブナビゲータの「 」アイコンをクリックします。

ご注意ください： レイアウト (要素とコンポーネントの配置) は、プライマリ ロケールの影響を受けます。セカンダリ ロケールでは、要素やコンポーネントを追加または削除することはできません。さらに、セカンダリ ロケールで行われたローカリゼーションの変更は、そのセカンダリ ロケールにのみ影響します。

ご注意ください: 一部のローカリゼーション機能は、特定のローカリゼーション サブスクリプション パッケージに限定されています。 ローカリゼーションのサブスクリプションと機能の包括的な比較を見る.

このチュートリアルを通じて、次のことを理解できるようになります。

1. キャンバス上のテキストをカスタマイズする方法
2. 資産を適応させる方法
3. 要素の可視性を個別化する方法
4. スタイルをカスタマイズする方法
5. コンポーネントをカスタマイズする方法

キャンバス上のテキストをカスタマイズする方法

思い出してください： ローカリゼーション機能はデザイナーからのみアクセスできます。コンテンツ エディターは編集モードでコンテンツをカスタマイズできます。

デザイナーキャンバス上のテキストを調整するには、 ロケールビュー 上部のバーのドロップダウンから、希望するロケールを選択します。その後、キャンバス上のテキスト (リンク、ボタン、フォームなどを含む) を、そのロケールで表示したいコンテンツに変更できます。

テキストコンテンツを翻訳する場合は、テキストを含む要素を右クリックして「翻訳 (ロケール言語)」

ご注意ください： 子 span 要素を含む要素を自動翻訳する場合、span 要素のテキストは自動的に翻訳されません。span 要素を個別に自動翻訳することはできますが、翻訳が文脈的に適切なままになるように、span 要素内のテキストを手動で翻訳することをお勧めします。

ページ上の特定のコンテンツが翻訳されない場合は、そのコンテンツの翻訳が利用できないことが原因である可能性があります。

専門家のヒント: ページ全体を翻訳したい場合は、 体 要素を右クリックして「翻訳 (ロケール言語)」

テキストを手動で翻訳したり、次のような翻訳アプリを利用することもできます。 ローカリゼーション.

右から左に書くテキストのカスタマイズ

Webflowは、アラビア語（ar）、ペルシア語（fa）、ヘブライ語（he）、ウルドゥー語（ur）、イディッシュ語（yi）のロケール、およびこれらの言語の地域方言ロケール（例：アラビア語（イラク））の公開サイトで、テキストがカスタマイズされていない場合でも、RTL（右から左への）スクリプトを自動的にサポートします。自動RTLでテキスト要素を表示したくない場合は、カスタム属性を含めます。 dir="ltr" または dir="自動" 要素に。

アセットをカスタマイズする方法

アセットのカスタマイズが必要な理由はいくつか考えられます。たとえば、サイト上のアセットがテキストで構成されており、特定の言語またはロケールに翻訳されたバージョンが必要な場合や、アセットが複数のロケールで共有されているが、ロケールごとに翻訳された代替テキストが必要な場合などです。あるいは、サイトのローカリゼーション要件を満たすために、ロケールごとに異なるアセットが必要になる場合もあります。代替テキストとアセットはロケールごとに管理できます。

特定のロケールのアセットを置き換えるには:

1. クリック ロケールビュー 上部バーのドロップダウン
2. 希望する地域を選択してください
3. キャンバス上のアセットを選択する
4. 案内する 要素設定 > 画像設定
5. クリック 画像を置き換える
6. アセットパネルでアセットを選択するか、新しいアセットをアップロードします

資産を複数のロケールに配布し、代替テキストをカスタマイズするには 全て セカンダリロケール内のそのアセットのインスタンス:

1. クリック ロケールビュー 上部バーのドロップダウン
2. 希望する地域を選択してください
3. アクセス アセットパネル
4. カスタマイズしたいアセットの上にマウスを置きます
5. 設定「歯車” アイコン
6. アセットのカスタマイズされた代替テキストを入力します

複数のロケールでアセットを共有するが、代替テキストをカスタマイズするには 1つ セカンダリ ロケール内のそのアセットのインスタンス (つまり、セカンダリ ロケール内のアセットの代替テキストをカスタマイズし、その代替テキストをそのセカンダリ ロケール内のそのアセットの他のすべてのインスタンスに配布しない)。

1. クリック ロケールビュー 上部バーのドロップダウン
2. 希望する地域を選択してください
3. キャンバス上のアセットを選択する
4. 進む 要素設定 > 画像設定
5. 「カスタム説明」を選択して 代替テキスト 落ちる
6. アセットのカスタマイズされた代替テキストを入力します

アセットまたは代替テキストをプライマリ ロケールから継承するようにリセットするには:

1. クリック ロケールビュー 上部バーのドロップダウン
2. 希望する地域を選択してください
3. キャンバス上のアセットを選択する
4. アクセス 要素設定 > 画像設定
5. クリック 画像 および/または 代替テキスト （希望するリセットに応じて）
6. クリック プライマリロケールにリセット

要素の表示をカスタマイズする方法

セカンダリ ロケールのすべての要素とコンポーネントはプライマリ ロケールから継承されますが、要素の可視性を使用してセカンダリ ロケールのページ表示を個別化できます。

特定の要素の可視性を変更するには:

1. クリック ロケールビュー 上部バーのドロップダウン
2. 希望する地域を選択してください
3. アクセス 要素設定 > 可視性
4. 要素の表示設定（「表示」または「非表示」）を選択します。

要素はサーバー側で非表示になります。つまり、非表示の要素はサイトのデザインには表示されず、サイトの HTML コードにも反映されません。

スタイルをカスタマイズする方法

特定の要素のスタイルをローカライズすることで、特定のロケールの表示をカスタマイズすることもできます。

専門家のヒント: 単語の区切り、行の区切り、テキストの折り返しのスタイルは、言語固有のルールを遵守し、ロケール全体で肯定的なユーザー エクスペリエンスを保証するのに役立ちます。テキストの折り返しと行の区切りについて詳しくご覧ください。

ご注意ください: Webflowは、アラビア語（ar）、ペルシア語（fa）、ヘブライ語（he）、ウルドゥー語（ur）、イディッシュ語（yi）のロケール、およびこれらの言語の地域方言ロケール（例：アラビア語（イラク））の公開サイトで、テキストにローカライズがなくても自動的にRTL（右から左）スクリプトをサポートします。自動RTLでテキスト要素を表示したくない場合は、カスタム属性を追加します。 dir="ltr" または dir="自動" それぞれの要素に適用します。右から左に書くテキストをローカライズする方法の詳細については、こちらをご覧ください。

特定の要素のスタイルをローカライズするには: 

1. タップして ロケールビュー 上部バーのドロップダウン
2. 好みの地域を選択してください
3. キャンバス上の要素を選択する 
4. 必要に応じてスタイルを変更する

要素スタイルを復元してプライマリロケールから継承するには: 

1. を押す ロケールビュー 上部バーのドロップダウン
2. 希望する地域を選択してください
3. キャンバス上の要素を選択する 
4. あらゆるスタイルを スタイルパネル (例: フォント、色、区切りなど) 
5. プレス リセット

コンポーネントをローカライズする方法

重要： 要素をコンポーネントに変換する前に、要素やその子要素をセカンダリ ロケールでローカライズすると、ローカライズされたコンテンツはプライマリ ロケールのコンポーネントのデフォルト コンテンツで上書きされます。したがって、コンテンツをローカライズする前に、要素をコンポーネントに変換することをお勧めします。

要素をローカライズするのと同じ方法で、コンポーネントをローカライズできます。プライマリ コンポーネントをローカライズすると、そのコンポーネントのローカライズされた値が、特定のロケールのそのコンポーネントのすべてのインスタンスで保持されることが保証されます。

たとえば、ナビゲーション バーがあり、テキストとリンクをローカライズしたい場合は、次のようになります。 

1. クリック ロケールビュー 上部バーのドロップダウン
2. ご希望の地域を選択してください
3. キャンバス上のナビゲーションバーコンポーネントをダブルタップして、プライマリコンポーネントを調整します。
4. メインコンポーネント内のテキストとリンクを修正または解釈する
5. メインコンポーネントを終了する 

これに続いて、そのロケール内でそのナビゲーション バーが出現するたびに、ローカライズされた値が採用されます。

あるいは、コンポーネント プロパティのデフォルト値をローカライズすることもできます。 

1. を押す ロケールビュー 上部バーのドロップダウン
2. ご希望の地域を選択してください
3. ローカライズしたいコンポーネントをダブルタップしてメインコンポーネントを調整します
4. 進む 要素設定パネル > コンポーネントのプロパティ > プロパティの管理
5. ローカライズする値を持つコンポーネントプロパティをヒットします 
6. デフォルト値を修正します (例: テキスト、可視性、画像など) 

プロパティ フィールドをローカライズすることで、コンポーネント インスタンスをローカライズすることもできます。これを開始するには、まず、ローカライズする要素に指定されたプロパティがコンポーネントにあることを確認します。次に、次の操作を行います。 

1. を押す ロケールビュー 上部バーのドロップダウン
2. ご希望の地域を選択してください 
3. ローカライズしたいコンポーネントインスタンスを公開する 
4. コンポーネントインスタンスの値を修正またはローカライズする
5. コンポーネントインスタンスを終了する

コンポーネント インスタンス内のローカライズされた値は、同じロケール内であっても、同じコンポーネントの他のインスタンスには伝播されません。 

注記： セカンダリ ロケール ビューでは、新しいコンポーネント プロパティを追加したり、コンポーネント プロパティを消去または切断したり、コンポーネント プロパティのタイプや設定を変更したりすることはできません。