【プロジェクト設定画面】3-4.言語選択ウィジェット

目次

#概要

サイトに表示される言語切り替えボタン（ウィジェット）の見た目を設定する画面です。

• デザイン・配色・フォント・サイズ・位置の変更
• 設定内容のプレビュー確認
• 独自デザインのウィジェットへの切り替え

---

#使い方

#見た目を設定する

#色の指定方法

背景色・文字色は、色見本をクリックするとカラーピッカーが開きます。マウスで選ぶほか、#FFFFFF のようなカラーコードを直接入力することもできます。サイトのブランドカラーに合わせる場合は、カラーコードでの指定が確実です。

背景色と文字色のコントラストが低いと文字が読みにくくなります。プレビューで見え方をご確認ください。

#位置をスマートフォンとパソコンで個別に設定する

「位置」の項目は、スマートフォンとデスクトップで個別に設定できます。 上部のタブで切り替えてから、それぞれの配置を指定してください。

パソコンでは右下でも、スマートフォンでは他の要素と重なってしまう場合などに、別々の位置を指定できます。

#フォントについて

「ゴシック体」「明朝体」を選択した場合、サイト訪問者のシステムにインストールされているフォントのうち、設定に近いものが利用されます。 訪問者の環境によって多少見え方が変わります。

サイトのデザインに合わせたい場合は「サイトで指定されているフォントに合わせる」をお選びください。

#設定内容を確認して保存する（重要）

保存すると設定はすぐに反映されますが、**サイト上の変更の反映には、セッションやキャッシュが残っていると時間がかかる場合がございます。 ** ブラウザにてこれらを削除していただくか、シークレットモードでの確認をお願いいたします。

保存したのに見た目が変わらない場合は、まずこの方法でご確認ください。

#独自ウィジェットに切り替える

用意されたデザインではなく、HTML / CSSで自由に実装したウィジェットをご利用いただくこともできます。 実装のご準備がない場合は「デフォルト」のままお使いください。 実装される場合は、画面上部の「ウィジェットタイプ」で「独自ウィジェット」を選択してください。 独自ウィジェットを利用される場合、デフォルトウィジェットは表示されなくなり、お客様ご自身でウィジェットを表示するコードを実装していただく必要がございます。

お客様にて、言語切り替えボタンやプルダウン等のHTML, CSS, JavaScriptを自由に実装いただいた上で、当該箇所に対して以下のclassを設定してください。

• “al-languages” クラス

  • Autolingualは画面上のテキストを取得して翻訳しますが、言語表記自体は翻訳されないよう、このクラスがある要素および子要素と子ノードについては翻訳処理が除外されます。
  • 言語切り替えボタン全体の要素に対して追加してください。

• “al-switch” クラス

  • このクラスが実装されいる要素をクリックすると言語が切り替わります。
  • 言語切り替えのトリガーにしたい要素に追加してください。
  • 対象要素にはプロジェクトに存在する言語コードのdata-lang属性が含まれている必要があります。

実装例

<div class="al-languages">
  <span class="al-switch" data-lang="ja">日本語</span>
  <span class="al-switch" data-lang="en">English</span>
  <span class="al-switch" data-lang="ko">한국어</span>
</div>

data-langは、国際標準化機構が発行するISO 639-1で定義されている言語コードを使用する必要があります。以下は主要な言語のISO 639-1言語コードです。

言語コード一覧

---

#よくあるご質問・困ったときは

Q. 保存したのに、サイトのウィジェットの見た目が変わりません

セッションやキャッシュが残っている可能性があります。ブラウザのキャッシュを削除するか、シークレットモード（プライベートモード）でサイトを開いてご確認ください。

Q. 設定したフォントと、実際のサイトの表示が違います

ゴシック体・明朝体を選んだ場合、サイト訪問者のパソコンやスマートフォンに入っているフォントのうち設定に近いものが使われます。訪問者の環境によって多少見え方が変わる場合があります。

Q. スマートフォンでウィジェットが他の要素と重なってしまいます

「位置」はスマートフォンとデスクトップで個別に設定できます。タブを「スマートフォン」に切り替えて、別の位置や端からの距離を指定してください。

Q. 独自ウィジェットに切り替えたら、サイトにウィジェットが表示されなくなりました

独自ウィジェットを選択すると標準のウィジェットは表示されなくなり、表示用のコードをお客様ご自身で実装していただく必要があります。 実装のご準備がない場合は「デフォルト」に戻してお使いください。

Q. 独自ウィジェットを選ぼうとすると「アップグレードが必要です」と表示されます

独自ウィジェットのご利用にはLiteプラン以上へのアップグレードが必要です。

Q. Autolingualのロゴを消したいです

ロゴを非表示にするにはStarterプラン以上へのアップグレードが必要です。

Q. プレビューに表示される言語が実際と違います

プレビューには、このプロジェクトで設定している言語が表示されます。表示される言語を変更したい場合は「設定 › 言語設定」からご調整ください。

---

#ご注意いただきたい点

• サイト上の変更の反映には、セッションやキャッシュが残っていると時間がかかる場合があります
• 「ゴシック体」「明朝体」は、訪問者の環境によって見え方が変わります
• 独自ウィジェットのご利用にはLiteプラン以上、Autolingualのロゴ非表示にはStarterプラン以上が必要です