Weglot で Pixpa ウェブサイトを多言語化

PixpaとWeglotの連携により、多言語ウェブサイトの翻訳、表示、管理に必要なすべての機能が、完全な編集制御とともに提供されます。

複雑な手順は一切不要です。PixpaのウェブサイトをWeglotアカウントに接続するだけで、数分以内に完全に翻訳されたウェブサイトが表示されます。

自動翻訳: Weglotは、Pixpaサイトのテキスト、画像、SEOメタデータを自動的にスキャンして検出し、新しいコンテンツやページを随時翻訳します。

新たなオーディエンスにリーチしましょう:言語サブドメインやサブディレクトリ、hreflangタグの実装、翻訳されたメタデータなどを活用した多言語SEOにより、翻訳されたページを検索エンジンで上位表示させることができます。


ここで扱われる内容:  


Weglot コード スニペットをコピーするには、次の手順に従います。

  • 会員登録について Weglot アカウント用。
  • あなたがすべき 確認メールを受け取る サインアップしたアカウントで。 メールを確認すると、Weglot のセットアップ ページが表示されます。
  • 新しいプロジェクトを作成します [ウェブサイト テクノロジー] として [その他] を選択します。
  • 次のステップで、ボックスまで下にスクロールし、「Javascript 統合を使用する」、以下に示すように。

  • 次に、Pixpa Web サイトの元の言語と、サイトを翻訳して表示する新しい言語を入力するよう求められます。

  • 次のステップでは、画面に表示されているコードをコピーして、Pixpa Studio に貼り付けます。 それでおしまい。


コピーしたJSコードをPixpa Studioに埋め込む

  • に行く 設定 (1)クリックして 言語とラベル (2)左側のサイドバーにあります。
  • 有効にします Weglotトグル (3)コピーした Weglot JSコード とします。
  • 以下を行うには、 Save ボタン。 それでおしまい。


あなたのPixpaウェブサイトが翻訳されました!

これでWeglotを使ったウェブサイトの翻訳が完了しました。ウェブサイトにアクセスすると、サイトの右下に言語切り替えボタンが表示されます(表示されるまで数分かかる場合があります)。

Weglotアカウントにログインし、「翻訳」に移動すると、すべての翻訳が表示され、編集できます。


動的サイト要素の翻訳

Weglotはデフォルトでは動的コンテンツ(リスト項目セクション、見出しセクションなど)を翻訳しない場合があります。これを解決するには、Weglotアカウントにログインし、「アプリ設定」に移動してください。

  • [ダイナミックの追加] ボタンをクリックします
  • 以下に示すように、CSS セレクターをコピーして貼り付け、[保存] をクリックします。 Do ド​​ット接頭辞を忘れないでください。
.is-wrapper, .overlay-container, .dynamic-component, .gallery-slider-desc

  • それでおしまい。 今すぐ Pixpa サイトをリロードしてください。
  • 変更は 30 秒後に表示されます。変更に気付かない場合は、ためらわずにウェブサイトのページをハードリフレッシュ*し、シークレット ウィンドウでもう一度確認してください。

*ハードリフレッシュ:
Mac: cmd shift R (小文字)
PC: Ctrl F5


スタイル言語スイッチャー

デフォルトの Weglot と Pixpa の言語スイッチャーを選択できます。

Weglot デフォルト言語スイッチャー

Weglot が提供する言語スイッチャーは、サイトの右下隅にある小さなボックスです。 これは次のようになります。


Weglotの言語切り替え機能(1)に関する基本設定は、Weglotダッシュボード > 設定 >言語切り替え機能にあります。設定画面は以下のようになります。


また、ここでカスタム CSS (2) を追加して、スイッチャーのデザインをカスタマイズしたり、ウェブサイト上のデフォルトの位置を変更したりすることもできます。

例:Weglotスイッチャーのデフォルト位置は右下です。位置を左に変更するには、 Weglotアカウントに以下のCSSコードを追加してください。

.wg-default, .wg-default .country-selector  {
    left: 40px!important;
    right: auto!important;
}

デフォルトのスイッチャーのカスタマイズオプションをさらにご覧になりたい場合は、こちらをクリックしてください。


Pixpa言語スイッチャー

Pixpaウェブサイトのスタイルプロパティを使用します。スイッチャーはウェブサイトのメインメニューの一部となります

動作の様子はこちらをクリックしてください – light.pixpa.com


翻訳の除外を追加する

Weglotはデフォルトで言語切り替えドロップダウンメニューを翻訳する場合があります。これを制限するには、Weglotアカウントにログインし、「翻訳除外」に移動してください。

  • 除外されたブロック セクションの下にある [ルールの追加] をクリックします。
  • 以下に示すように、CSS セレクターをコピーして貼り付け、[保存] をクリックします。 Do ド​​ット接頭辞を忘れないでください。
.pixpa言語スイッチャー


言語 Web サイトにサブドメインを使用する

Weglotを使えば、ウェブサイトの各言語バージョンごとにサブドメインを設定できます。例えば:

  • en.yourwebsite.com 英語用
  • fr.yourwebsite.com フランス語用
  • es.yourwebsite.com スペイン語

このアプローチは SEO に適しており、検索エンジンが各言語バージョンを個別にインデックスできるようになります。

Weglotでサブドメイン翻訳を設定する手順

  • Weglotアカウントにログイン – weglot.comにアクセスして ログインアカウントをお持ちでない場合は、 一つ作る.
  • Pixpaウェブサイト用の新しいプロジェクトを作成する
    • 指定します プロジェクト名 をクリックして その他 ウェブサイト技術として
    • 詳しくはこちら 次へ

  • ウェブサイトの 元の言語 追加したい言語 (翻訳言語)をクリックして 次へ。

  • ウェブサイトの詳細を追加する
    1. ドメインのURL – 指定されたフィールドにウェブサイトのドメイン名を入力してください。ドメイン名が検証済みであることを確認してください。
    2. 公開先 - 選択 ライブウェブサイトを接続する オプションを選択します。
    3. URLタイプ - 選択 サブドメイン ドロップダウンからのオプション。
    4. 次へ - クリック 次へ ボタンをクリックしてサブドメインの設定手順に進みます。

  1. DNSを手動で設定する – DNS レコードを手動で構成するオプションを選択します。
  2. DNSレコードのコピー – 提供された CNAME レコードの詳細 (名前、タイプ、値) をコピーし、ドメイン レジストラ経由でドメインの DNS 設定に追加します。
  3. DNSをチェック – DNS レコードを追加したら、伝播するまで数分間待ってから、「DNS の確認」をクリックして接続を確認します。

  1. PixpaにWeglotスクリプトを追加する – Weglotが提供するJavaScript統合スニペットをコピーして、 Weglot JS コード フィールドの下にある 言語とラベル Pixpa Studio のセクション。

  1. 多言語サブドメインをテストする – 各サブドメイン(例:fr.yourwebsite.com)にアクセスし、サイトが正しく翻訳されていることを確認してください。Weglotの言語スイッチャーを使えば、訪問者は言語を切り替えることもできます。
お願い

Weglotでサブドメインベースの言語ウェブサイトを有効にするには、Pixpaウェブサイトにカスタムドメインを接続する必要があります。この機能は、ドメイン名のDNSレコードを編集する必要があるためです。カスタムドメイン名をPixpaウェブサイトに接続する方法については、ヘルプ記事を参照してください。

お探しのものが見つかりませんか?

Pixpaエキスパートに連絡してください。

Pixpa Studioがリニューアルされました。現在、ヘルプ記事のスクリーンショットをすべて更新中です。