言語切り替えバーのデザインカスタマイズ方法

カスタマイズ後のイメージサンプル

以下イメージのようにご用意いただいたオリジナルデザインでの言語切り替え表示を、あなたのウェブサイトのお好みの位置に設置いただくことができます。

設定方法・仕様

設定方法

お客様のウェブサイト上の任意の要素にHTML属性 data-stt-changelang=”言語コード” を付けると、その要素をクリックした時に言語が切り替わるようになります。設置サンプルコードは下記をご確認ください。
言語コードを付与する際には、同じブロック内での指定を推奨いたします。

また、上記と同じブロック内にHTML属性data-stt-langbarを付けると、Google Chromeの翻訳機能が使用された場合に使用による制御（※詳細は下記をご覧ください）に対してスタイルの指定が可能になります。

言語コードの確認方法

言語コードは、shutto翻訳管理画面、「サイト設定」内、「対応言語」から確認できます。
こちらのページからも言語コードをご確認いただけますが、shutto翻訳の対応言語と異なる言語が含まれている可能性がありますのでご注意ください。
例えば、英語で翻訳する場合は data-stt-changelang=”en”、中国語（簡体字）で翻訳する場合は data-stt-changelang=”zh-CN” となります。

アクティブな言語要素の属性について

現在表示されているアクティブな言語の要素には属性 data-stt-active が自動的につく仕様となっています。必要に応じてCSSを使ってスタイルを設定してください。

注意事項

言語切り替え用要素の中のテキストも翻訳の対象となります。言語切り替え内のテキストを翻訳したくない場合は翻訳除外タグ属性 data-stt-ignore をHTMLに付けてください。

ブラウザ翻訳機能使用による制御

ブラウザによる翻訳機能（Chromeの言語変更や拡張機能・DeepLのChrome拡張機能・Edgeのブラウザ翻訳機能）をユーザーが使用している場合、言語切り替えバーを操作してもshutto翻訳による翻訳表示はできません。これは、言語切り替えバーの動作を抑止しているためです。
抑止された場合には、HTML属性data-stt-langbarを保持する要素に対して属性 data-stt-disabled が自動的につく仕様となっているため、属性 data-stt-disabledに対してスタイル指定することにより、抑止されている状態（言語切替バーが動作していない状態）の言語切替バーのデザインを変更することが可能です。
※変更方法は以下をご確認ください。

サンプルコード① テキストのみ

以下のHTML・CSSをウェブサイトの任意の箇所に設置してください。お客様ご自身でHTMLとCSSの修正が行えない場合は、ウェブ制作会社様にご依頼ください。

設置後イメージ

HTML

<a href="#" data-stt-changelang="ja" data-stt-ignore>日本語</a> 
<a href="#" data-stt-changelang="en" data-stt-ignore>English</a>
<a href="#" data-stt-changelang="zh-CN" data-stt-ignore>中国（简体）</a> 
<a href="#" data-stt-changelang="zh-TW" data-stt-ignore>中國（繁體）</a>

■同じブロック内にHTML属性data-stt-langbarを設置してください。
※Google Chrome翻訳機能によって抑止された状態にCSSを指定するための設定

（例）

<div id="custom_trans_bar" data-stt-langbar>
<a href="#" data-stt-changelang="en" data-stt-ignore>English</a>
</div>

CSS（スタイルシート）

<style type="text/css">
//言語切り替え表示のデフォルトスタイル
a[data-stt-changelang] {
margin:0 7px;
}
//アクティブなテキストのスタイル
a[data-stt-active] {
text-decoration:none;
font-weight:bold;
}
<style>

サンプルコード② テキスト＋画像

以下のHTML・CSSをウェブサイトの任意の箇所に設置してください。お客様ご自身でHTMLとCSSの修正が行えない場合は、ウェブ制作会社様にご依頼ください。

設置イメージ

HTML

<a href="#" data-stt-changelang="ja" data-stt-ignore><img src="/ご利用サーバの画像ディレクトリ/Japan-2.png" width="16"> 日本語</a>
<a href="#" data-stt-changelang="en" data-stt-ignore><img src="/ご利用サーバの画像ディレクトリ/United-States-2.png" width="16"> English</a>
<a href="#" data-stt-changelang="zh-CN" data-stt-ignore><img src="/ご利用サーバの画像ディレクトリ/China-2.png" width="16"> 中国（简体）</a>
<a href="#" data-stt-changelang="zh-TW" data-stt-ignore><img src="/ご利用サーバの画像ディレクトリ/Taiwan-2.png" width=

CSS（スタイルシート）

<style type="text/css">
//言語切り替え表示のデフォルトスタイル
a[data-stt-changelang] {
text-decoration:none;
margin:0 7px;
}
//アクティブなテキストのスタイル
a[data-stt-active] {
font-weight:bold;
}
<style>

 世界の言語の国旗アイコン

世界の国旗アイコンをご自由にお使いください。ご利用の際は、画像ファイルをお客様のウェブサーバーに直接アップロードしてください。

日本	アメリカ合衆国	中華人民共和国	台湾
大韓民国	香港	タイ王国	ベトナム社会主義共和国
インド	マレーシア	インドネシア共和国	ロシア連邦
フランス共和国	ドイツ連邦共和国	イタリア共和国	ポルトガル共和国
スペイン王国	ブラジル連邦共和国	スウェーデン王国	ポーランド共和国

　

サンプルコード③ 翻訳抑止時のデザイン

CSS（スタイルシート）

※HTML属性data-stt-langbarを保持する要素に対して属性 data-stt-disabled が自動的につくため、HTML属性data-stt-langbarを必ず同じブロック内に設置したうえで、CSSを指定してください。※詳細は上記をご確ください。

<style type="text/css">
//Google Chrome翻訳機能によって抑止されている言語切り替えバーのスタイル
[data-stt-disabled] * {
color: #999;
}
<style>