header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image

Wix マルチリンガル:マルチステートボックスを使用して左横書き(LTR)から右横書き(RTL)に切り替える

12分
警告:
検索エンジンのボットは、ボックス内のコンテンツを読み取ることができないため、マルチステートボックスを追加すると、サイトの SEO に悪影響が生じます。
英語などの言語は左から右(LTR)に記述しますが、ヘブライ語などの言語は右から左(RTL)に記述します。多言語サイトがこれら両方の言語に対応している場合は、選択した言語に基づいて異なるコンテンツを表示するマルチステートボックスを追加することができます。これにより、言語ごとに異なる「ステート(状態))」を作成して、個別にデザインをカスタマイズすることができます。(英語)
マルチステートボックスを使用した Wix のライブサイトの一例。

ステップ 1 | サイトのメイン言語のバージョンにマルチステートボックスを追加する

最初のステップで、メイン言語で白紙のマルチステートボックスをサイトに追加します。テキスト、画像、ボタン、必要なパーツを追加して、その言語に合わせてデザインします。
Wix エディタ
Wix Studio エディタ
始める前に:
サイトに Wix マルチリンガルを追加し、コーディングを有効にしていることを確認してください。(英語)

  1. エディタに移動します
  2. エディタ左側で「パーツを追加 をクリックします。
  3. ボックス」をクリックします。
  4. マルチステートボックス」をクリックします。
  5. 空白のマルチステートボックスをページ上の場所にドラッグします。
エディタで、マルチステートボックスを追加する様子を示したスクリーンショット。
  1. ボックスのデフォルトの ID を分かりやすい名前に変更します:
    1. エディタ左側の「ページコード をクリックします。
    2. ホーム」をクリックします。
    3. ページコードタブで「プロパティ・イベント」アイコン をクリックします。
    4. マルチステートボックスを選択します。
    5. ID 横の項目に、分かりやすいボックス名を入力します。
Wix サイトのマルチステートボックスのスクリーンショット。
  1. ボックスにパーツを追加して、自由にデザインすることができます。

ステップ 2 | 現在のステート名を変更する

メイン言語でボックスの準備ができたら、「ステートの管理」パネルを開き、現在のステート名を変更します。追加するコードが正しく機能するよう、引用符なしで正しく「LTR」と入力してください。
Wix エディタ
Wix Studio エディタ
  1. マルチステートボックスを選択します。
  2. ステートの管理」をクリックします。
  3. 現在のステート名横の「その他のアクション」アイコン をクリックします。
  4. ID を編集」を選択します。
  5. テキストボックスに「LTR」と入力し、「完了」をクリックします。
    注意:メイン言語が右横書き言語(RTL)の場合は、ステートに「RTL」と名前を付けてください。
  6. その他のステート横の「その他のアクション」アイコン をクリックし、「削除」を選択してそれらを削除します。
マルチステートボックスを使用している Wix サイトのスクリーンショット。

ステップ 3 | ステートを複製して名前を変更する

「ステートの管理」パネルで「LTR」のステートを作成したら、それを複製し、名前を「RTL」に変更します。前のステップと同様、コードが正常に動作するよう、引用符なしで正しく「RTL」と入力してください。
Wix エディタ
Wix Studio エディタ
  1. マルチステートボックスを選択します。
  2. ステートの管理」をクリックします。
  3. 現在のステート名横の「その他のアクション」アイコン をクリックします。
  4. 複製」を選択します。
  5. 複製したステート横の「その他のアクション」アイコン をクリックします。
  6. ID を編集」を選択します。
  7. テキストボックスに「RTL」と入力し、「完了」をクリックします。
    注意:第二言語が左横書き言語(LTR)の場合は、ステート名を「LTR」に変更してください。
マルチステートボックスを使用している Wix サイトのスクリーンショット。

ステップ 4 | 第二言語のボックスを調整する

これで、マルチステートボックスの設定が完了し、翻訳の準備が整いました。RTL 言語に切り替え、ステートを RTL に変更して、コンテンツのローカライズを開始します。要素の配置は、元のステートの配置に影響を与えることなく変更することができます。次に、コードスニペットをページのコードにコピーします。
Wix エディタ
Wix Studio エディタ
  1. エディタ上部の「言語を切り替える」ドロップダウンメニューをクリックします。
Wix エディタ上部にある「言語を切り替える」ドロップダウンをクリックしているスクリーンショット。
  1. 編集したい RTL 言語を選択します。
  2. 「マルチステートボックス」ドロップダウンをクリックし、該当するボックスのステートを選択します。
マルチステートボックスを使用している Wix サイトのスクリーンショット。
  1. ボックスで翻訳したいパーツを選択します:
    • テキスト:「翻訳を編集する」または「機械翻訳する」をクリックし、テキストを翻訳します。次に、「テキスト設定」パネルで「テキストの方向を変更」アイコン をクリックし、テキストの方向を切り替えます。
    • 画像:「翻訳を編集する」をクリックし、「変更」をクリックして、サイトの RTL 言語バージョン用に別の画像を選択します。
マルチステートボックスを使用している Wix サイトのスクリーンショット。
  1. プロパティ・イベントパネルで以下のコードを追加します:
    1. エディタ左側の「ページコード をクリックします。
    2. ホーム」をクリックします。
    3. ページコードタブで「プロパティ・イベント」アイコン をクリックします。
    4. マルチステートボックスを選択します。
    5. 以下のコードスニペットをコピーし、コードパネルの上部に貼り付けます。
1import wixWindow from 'wix-window';
2const rtlLangs = ['he', 'ar', 'fa'];
  1. onReady 関数に以下のコードを追加します:
重要:
  • プレースホルダ ID は、以前に作成した ID に置き換えてください。
  • onReady 関数は、ユーザーの利便性を高めるために記述するものです。すでにこの関数がある場合は、{ } 内のコードのみを追加してください。
1$w.onReady(function () {
2    let lang = wixWindow.multilingual.currentLanguage;
3
4    if (rtlLangs.includes(lang)) {
5        $w('#myBoxID').changeState('RTL');
6    }
7   else {
8        $w('#myBoxID').changeState('LTR');
9    }
10});
Wix エディタのコードパネルのスクリーンショット。
  1. プレビュー」をクリックし、マルチステートボックスの動作をテストします。
  2. 変更内容を公開する準備ができたら、サイトを公開します。
追加の右横書き(RTL)機能をご希望ですか??
Wix マルチリンガルを使用すると、右横書きコンテンツで多言語サイトを作成することができます。現在、メニュー、テキスト、画像など、サイトの一部を言語ごとに RTL になるようカスタマイズすることが可能です(例:ヘブライ語やアラビア語など)。

Wix マルチリンガルで、その他にどのような右横書き(RTL)機能をご希望ですか?カスタマーケアまで、ご意見・ご要望をお寄せください。