ご利用マニュアル

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

言語切り替えバーのデザインカスタマイズ機能とは

shutto翻訳では、言語切り替えバーをお客様のサイトに合わせたデザインで設置し、対象翻訳言語に切り替えていただくことができます。shutto翻訳管理画面で設定を行うのではなく、お客様のウェブサイト上にHTMLとCSSを設置いただく必要がございます。言語切り替え表示のデザインカスタマイズ機能は、無料トライアルを含めた、全プランのお客様にご利用いただけます。

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

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

language_bar_image

設定方法・仕様

設定方法

お客様のウェブサイト上の任意の要素に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に付けてください。

Google Chromeの翻訳機能使用による制御

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

■なぜGoogle Chromeの翻訳機能をユーザーが使用している場合、言語切り替えバーを抑止しているのか

Google Chromeの翻訳機能を使用している場合、shutto翻訳が設定している元言語と異なる言語が翻訳対象として登録される可能性があります。これを防ぐため、Google Chromeの翻訳機能をユーザーが使用している状態で言語切り替えバーが操作された場合は、言語切り替えバーの動作を抑止し、翻訳を行わないよう設定しています。(抑止状態はページの再読み込みによって解除されます)
※2022年6月現在、抑止対象の翻訳ツールはGoogle Chromeの翻訳機能のみです。

 

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

以下の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>

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

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

Japan-2日本United-States-2アメリカ合衆国China-2中華人民共和国Taiwan-2台湾
South-Korea-2大韓民国Hong-Kong-2香港Thailand-2タイ王国Vietnam-2ベトナム社会主義共和国
India-2インドMalaysia-2マレーシアIndonesia-2インドネシア共和国Russia-2ロシア連邦
France-2フランス共和国Germany-2ドイツ連邦共和国Italy-2イタリア共和国Portugal-2ポルトガル共和国
Spain-2スペイン王国Brazil-2ブラジル連邦共和国Sweden-2スウェーデン王国Poland-2ポーランド共和国

 

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

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>
 

(例) 

 抑止なし

 

 

 抑止あり

 

関連するマニュアル

コンテンツ編集機能

shutto翻訳のコンテンツ編集機能では、管理画面から対象のページのコンテンツを編集する...

言語切り替え時に中間ページに遷移する機能のご利用方法

shutto翻訳にご登録いただいているサイトの言語切り替えをする際に、「このウェブサイト...

他の翻訳サービスを導入したサイトからshutto翻訳を導入したサイトへ遷移する機能のご利用方法

利用方法他の翻訳サービスをご利用のページからshutto翻訳でご利用いただいているペー...

翻訳対象タグと属性について

翻訳対象タグについてshutto翻訳では基本的にすべての翻訳を行えますが、一部翻訳の対...

関連するよくあるご質問

言語切り替え表示をオリジナルデザインにすることは出来ますか?

shutto翻訳についてのヘルプセンター、よくあるご質問一覧ページです。マーケティングプ...

海外のお客様が閲覧した場合、お客様の利用言語に合わせた言語が表示されますか?

海外のお客様が閲覧した場合、お客様の利用言語に合わせた言語が表示されますか?

設定を行ったのに翻訳が反映されません。原因はなんでしょうか?

shutto翻訳についてのヘルプセンター、よくあるご質問一覧ページです。マーケティングプ...

言語切り替えバーで、サイトの表示を切り変えることができません。なぜでしょうか?

shutto翻訳についてのヘルプセンター、よくあるご質問一覧ページです。マーケティングプ...
TOPへ