機能一覧

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

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

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

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

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

 

設定方法・仕様

設定方法

お客様ウェブサイト上の任意の要素に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>

 
TOPへ