Google 翻訳 (Google Translate)
テキスト翻訳 (Translate text)
ウェブサイト翻訳ツール プラグイン (Website Translator plugin)
Webサイトを翻訳して表示できるツールです。これはウェブサイト翻訳ツールから取得できるコードを、サイトに追加するだけで実装できます。
コードの解説
プラグインのIDを、head要素内にmeta要素で記述します。
<meta name="google-translate-customization" content="xx"></meta>
言語選択のドロップダウンリストを表示する場所に、次のdiv要素を記述します。
<div id="google_translate_element"></div>
プラグインのスクリプトを記述します。
<script type="text/javascript">
function googleTranslateElementInit()
{
new google.translate.TranslateElement(
{
pageLanguage: 'ja', // Webサイトの言語
includedLanguages: 'de,en,zh-CN', // 翻訳する言語
layout: google.translate.TranslateElement.InlineLayout.SIMPLE, // 表示モード
autoDisplay: true, // 翻訳バナーを自動的に表示するか
multilanguagePage: true, // コンテンツに複数の言語が含まれているか
gaTrack: true, // Google Analyticsにより、トラフィックを追跡するか
gaId: 'UA-xx-1' // Google AnalyticsのID
}, 'google_translate_element' );
}
</script>
<script type="text/javascript"
src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
表示モード
ドロップダウンリストの表示形式は、google.translate.TranslateElementオブジェクトに定義されている定数で指定します。
| モード | 定数 | 値 | |
|---|---|---|---|
| インライン | 縦 | InlineLayout.VERTICAL | 0 |
| 横 | InlineLayout.HORIZONTAL | 1 | |
| ドロップダウン リストのみ | InlineLayout.SIMPLE | 2 | |
| タブ | 右下 | FloatPosition.BOTTOM_RIGHT | 3 |
| 左下 | FloatPosition.BOTTOM_LEFT | 4 | |
| 右上 | FloatPosition.TOP_LEFT | 1 | |
| 左上 | FloatPosition.TOP_RIGHT | 2 |
このリストの表示が不要ならば、id="google_translate_element"のdiv要素の記述を削除します。
インライン:縦
インライン:横
インライン:ドロップダウン リストのみ
言語の表示順の変更
※以下の説明は正しくないかもしれません。
言語のリストは、includedLanguagesでの言語コードの設定順に表示されます。よってその記述順を変更すれば、言語リストの順を変更できます。
言語のリストが表示されない
言語の一覧に何も表示されず、言語を選択できない場合があります。
このようになる原因の1つに、Flashの保護モードがあります。もしこの機能を無効にしても構わないならば、これを無効にすることで解決できる場合があります。Language options not displaying for Google Translate in Firefox | Firefox Support Forum | Mozilla サポート
複数の技術系サイトから、まとめて検索