shutto翻訳では、言語切り替えバーをお客様のサイトに合わせたデザインで設置し、対象翻訳言語に切り替えていただくことができます。shutto翻訳管理画面で設定を行うのではなく、お客様のウェブサイト上にHTMLとCSSを設置いただく必要がございます。言語切り替え表示のデザインカスタマイズ機能は、無料トライアルを含めた、全プランのお客様にご利用いただけます。
以下イメージのようにご用意いただいたオリジナルデザインでの言語切り替え表示を、あなたのウェブサイトのお好みの位置に設置いただくことができます。
お客様のウェブサイト上の任意の要素に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に対してスタイル指定することにより、抑止されている状態（言語切替バーが動作していない状態）の言語切替バーのデザインを変更することが可能です。
※変更方法は以下をご確認ください。
|
■なぜブラウザによる翻訳機能をユーザーが使用している場合、言語切り替えバーを抑止しているのか ブラウザによる翻訳機能を使用している場合、shutto翻訳が設定している元言語と異なる言語が翻訳対象として登録される可能性があります。これを防ぐため、ブラウザによる翻訳機能をユーザーが使用している状態で言語切り替えバーが操作された場合は、言語切り替えバーの動作を抑止し、翻訳を行わないよう設定しています。（抑止状態はページの再読み込みによって解除されます。） |
以下のHTML・CSSをウェブサイトの任意の箇所に設置してください。お客様ご自身でHTMLとCSSの修正が行えない場合は、ウェブ制作会社様にご依頼ください。
|
日本語 | English | 中国（简体） | 中國（繁體） |
<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>
<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の修正が行えない場合は、ウェブ制作会社様にご依頼ください。
|
|
<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=
<style type="text/css">//言語切り替え表示のデフォルトスタイルa[data-stt-changelang] {text-decoration:none;margin:0 7px;}//アクティブなテキストのスタイルa[data-stt-active] {font-weight:bold;}<style>
世界の国旗アイコンをご自由にお使いください。ご利用の際は、画像ファイルをお客様のウェブサーバーに直接アップロードしてください。
※HTML属性data-stt-langbarを保持する要素に対して属性 data-stt-disabled が自動的につくため、HTML属性data-stt-langbarを必ず同じブロック内に設置したうえで、CSSを指定してください。※詳細は上記をご確ください。
<style type="text/css">
//Google Chrome翻訳機能によって抑止されている言語切り替えバーのスタイル
[data-stt-disabled] * {
color: #999;
}
<style>
|
（例） 抑止なし |
→ → |
抑止あり |