ご利用マニュアル

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

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

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

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

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

language_bar_image

設定方法・仕様

設定方法

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

言語コードの確認方法

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

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

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

注意事項

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

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

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

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ポーランド共和国

 

関連するマニュアル

初回表示言語の設定方法について

初回表示言語閲覧者が初めてサイトを訪れた時、どの言語で翻訳表示をするかを設定できます。...

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

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

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

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

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

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

関連するよくあるご質問

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

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

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

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

個人情報を翻訳しないことはできますか?

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

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

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