Jimdoにページ翻訳のボタンを追加する

海外の閲覧者のために翻訳ボタンを簡単に設置する方法です。

特にJIMDOに特化した方法という訳ではないのだが、Googleが提供している翻訳ウィジェットのサービスを追加することで、簡単にページ翻訳機能を追加出来ることがわかったので、その方法を簡単に説明したいと思う。

上記サイトのリンクにアクセスすると

Google翻訳の『ウェブサイトに翻訳を追加』のページに飛ぶ。

ステップ 1: 翻訳要素のタイプ

ここで、「

ステップ 2: 言語

ステップ 3: オプションの設定を表示

オプションの設定を表示とすると、翻訳する先の言語や、表示方法などを選択出来る。

 

■翻訳する言語
すべてをチェックすると52カ国全てを選択されてしまう。

業種にもよると思うが、最近では、英語、中国語、韓国語あたりが多いのでは?

チェックマークは複数選択出来るので、必要な言語を選択しよう。

 

表示モード

  • インラインでは、縦長、横長、ドロップダウンのみ(プルダウン表示のみ)が選択できる。
  • タブを選ぶと、右下、左下、右上、左上の四種類の表示方法が選択できる。
  • 自動を選ぶと、訪問者のデフォルト言語に合わせて、翻訳のバナーが自動表示される。
    らしい(自分が日本語なので確認出来ませんでした。)

 

■詳細設定

必要に応じてチェックマークを入れます。

Google Analyticsで翻訳の利用状況を追跡出来ます・・・を選択すると

Analytics ウェブ プロパティ IDを入力するボックスが表示されるので、Google Analyticsのページにログインして、ウェブ プロパティ IDを追加することで、この機能が動作するようになる。


ステップ 4: 次のスニペットをコピーしてウェブページに貼り付けます

最初の<script>から最後の</script>までを選択して、Jimdoのページ内に貼り付ければ貼りつけた場所に、翻訳用のプルダウンか、タブが表示されるようになります。

※PIKやオリジナルで作成したページでは、思ったレイアウトで表示されないなどを確認している。

スタイルシートで強制的に、レイアウトを表示し直す場合には、以下のソースコードが参考になるかもっしれない。

 

JavaScriptによって自動的に発行されるタグ

<div class="skiptranslate goog-te-gadget" style="">
<div id=":0.targetLanguage">
<select class="goog-te-combo">
<option value="">言語を選択</option>
<option value="en">英語</option>
<option value="ko">韓国語</option>
<option value="zh-CN">中国語(簡体)</option>
<option value="zh-TW">中国語(繁体)</option>
<option value="言語CODE">以下言語名・・・・</option>
</select>
</div>
Powered by
<span style="white-space:nowrap">
<a target="_blank" href="http://translate.google.com" class="goog-logo-link">
<img src="http://translate.googleapis.com/translate_static/img/mini_google.png">翻訳</a>
</span>
</div>

このタグに指定されているスタイルシート(スタイルによって異なる)

.goog-te-gadget {
    color: #666666;
    font-family: arial;
    font-size: 11px;
    white-space: nowrap;
}

.goog-te-gadget img {
    border: medium none;
    vertical-align: middle;
}

.goog-te-combo {
    margin-left: 4px;
    margin-right: 4px;
    vertical-align: baseline;
}

.goog-te-gadget .goog-te-combo {
    margin: 4px 0;
}

.goog-logo-link, .goog-logo-link:link, .goog-logo-link:visited, .goog-logo-link:hover, .goog-logo-link:active {
    color: #444444;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}
.goog-te-banner .goog-logo-link, .goog-close-link {
    display: block;
    margin: 0 10px;
}
.goog-te-banner .goog-logo-link {
    padding-top: 6px;
}

.goog-te-combo, .goog-te-banner *, .goog-te-ftab *, .goog-te-menu *, .goog-te-menu2 *, .goog-te-balloon * {
    font-family: arial;
    font-size: 10pt;
}

 

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422