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

#概要

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

デザイン・配色・フォント・サイズ・位置の変更
設定内容のプレビュー確認
デフォルトウィジェットの表示／非表示の切り替え
独自ウィジェット（サイト内のお好きな場所に設置する言語切り替え）の設置方法の確認

#使い方

#見た目を設定する

左側のパネルは「デフォルト」「独自ウィジェット」の2つのタブに分かれています。以下は「デフォルト」タブの項目です。

項目	内容
デフォルトウィジェットを表示	Autolingualが用意したウィジェットをサイトに表示するかどうかを切り替えます。オフにできるのはLiteプラン以上です
デザイン	「デフォルト」「アイコン」から選べます
配色	背景色・文字色を指定します
フォント	文字の書体を選びます
フォントサイズ / ウィジェットサイズ	フォントサイズは小・中・大から選びます。ウィジェットサイズも小・中・大から選びます。ボタンの余白や高さが変わり、文字の大きさは変わりません
位置	左上・右上・左下・右下から基準を選び、端からの距離を「端詰め」「浮かす」「かなり浮かす」から指定します

#色の指定方法

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

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

右側のプレビューにはスマートフォンとデスクトップの表示が並んで表示されます。ボタンをクリックすると言語一覧が開き、実際のサイトと同じ見た目で確認できます。Autolingualのロゴの表示有無もご契約プランに合わせて表示されます。

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

「位置」の項目は、スマートフォンとデスクトップで個別に設定できます。「位置」の項目にある「スマートフォン」「デスクトップ」のタブで切り替えてから、それぞれの四隅と端からの距離を指定してください（初期表示はスマートフォンです）。

スマートフォンタブにある「切替のしきい値」で、どの画面幅までをスマートフォンとして扱うかを指定できます（初期値は768px）。サイト側のブレークポイントに合わせて調整してください。プレビューの見出しに「〜768px」「769px〜」のように、それぞれの設定が適用される画面幅が表示されます。

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

#フォントについて

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

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

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

設定を変更すると右上の「保存」ボタンが押せるようになります。変更がない場合は押せません。

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

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

#独自ウィジェットを設置する

ヘッダーやフッターなど、サイト内のお好きな場所に、HTML / CSSで自由に実装した言語切り替え（独自ウィジェット）を設置できます（Liteプラン以上）。デフォルトウィジェットとの併用も可能です。管理画面での切り替え操作は不要です。以下のclassを設定した要素をサイトに設置すると、そのまま言語切り替えとして動作します。「独自ウィジェット」タブには、このプロジェクトの言語に合わせた実装例が表示されますので、コピーしてご利用ください。

お客様にて、言語切り替えボタンやプルダウン等の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>

表示中の言語の al-switch 要素には、active クラスが自動で付きます。選択中の言語の見た目を変えたい場合にご利用ください。デフォルトウィジェットと併用している場合も、どちらで切り替えても両方の選択状態が揃います。

data-langには、Autolingualの言語コード（例：ja、en、zh-TW）を指定してください。言語別URL機能で設定したカスタム言語コードは指定できません。使用できる言語コードは、以下の言語コード一覧をご参照ください。

言語コード一覧

デフォルトウィジェットを非表示にする場合

独自ウィジェットだけを使う場合は、「デフォルト」タブの「デフォルトウィジェットを表示」をオフにして、画面右上の「保存」を押してください。確認ダイアログで「非表示にする」を押すと反映されます。オフにした状態で独自ウィジェットを設置していないと、サイトに言語切り替えが表示されなくなりますのでご注意ください。

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

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

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

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

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

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

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

Q. 「デフォルトウィジェットを表示」をオフにしたら、サイトにウィジェットが表示されなくなりました

オフにすると、Autolingualが用意したウィジェットは表示されなくなります。独自ウィジェットをサイトに設置していない場合は、言語切り替えがなくなります。「デフォルト」タブでオンに戻して保存してください。

Q. 「デフォルトウィジェットを表示」をオフにしようとすると「アップグレードが必要です」と表示されます

デフォルトウィジェットの非表示と独自ウィジェットのご利用には、Liteプラン以上へのアップグレードが必要です。

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

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

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

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

#ご注意いただきたい点

サイト上の変更の反映には、セッションやキャッシュが残っていると時間がかかる場合があります
「ゴシック体」「明朝体」は、訪問者の環境によって見え方が変わります
独自ウィジェットのご利用とデフォルトウィジェットの非表示にはLiteプラン以上、Autolingualのロゴ非表示にはStarterプラン以上が必要です
デザイン・配色・フォント・サイズ・位置の設定は、すべてのプランでご利用いただけます。プランによる制限があるのは「独自ウィジェット」「デフォルトウィジェットの非表示」（Lite以上）と「ロゴの非表示」（Starter以上）のみです
Starterプラン以下に変更すると、デフォルトウィジェットは自動で表示に戻り、独自ウィジェットはクリックしても言語が切り替わらなくなります