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

2018年2月15日 | 森下奈緒

シェアする

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

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

CSS(スタイルシート)

 

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

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

設置イメージ

HTML

CSS(スタイルシート)

 

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

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

よく使われる言語の国旗アイコン

【32px】

日本
中国(簡体)
中国(繁体)
大韓民国
アメリカ合衆国

【24px】

日本
中国(簡体)
中国(繁体)
大韓民国
アメリカ合衆国

【16px】

日本
中国(簡体)
中国(繁体)
大韓民国
アメリカ合衆国

その他の言語の国旗アイコン

台湾
香港
タイ王国
ベトナム
インドネシア
マレーシア
インド
ロシア
スペイン
ブラジル
フランス
ドイツ
スウェーデン
イタリア
ポーランド
トルコ
ポルトガル

ライター

2010年株式会社イー・エージェンシーにWEBディレクターとして入社。現在は、スマホ変換サービス「shutto」、Webサイト多言語化サービス「shutto翻訳」の企画・開発をしています。

ご利用まではカンタン3ステップ

  • STEP 1

    アカウント登録

  • STEP 2

    翻訳設定

  • STEP 3

    公開

いまだけ30日間無料トライアル実施中!
いますぐあなたのサイトを多言語対応しましょう。