ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む

0
    JUGEMテーマ:ホームページ作成


    ■Googleウェブサイト翻訳ツールを組み込む

    私の作ったサイトの右上の方をちょっと見てみてください。
    ペーパークラフトが好きなんです

    アクセスカウンターの下に「[言語を選択] Powered by Google翻訳」というツールがありますよね。これがGoogleウェブサイト翻訳ツールです。プルダウンメニューから好きな言語を選ぶことで、このページを翻訳して読んでもらうことができるツールです。

    ペーパークラフトは、世界中に愛好家がいて、世界中で自分の作った型紙を公開しています。私も世界中のサイトを見て回っているのですが、そこで困るのが言葉の問題です。英語ならOKです、学校で習いましたから。ドイツ語やフランス語でも、英語に似ているので何となく雰囲気は判ってきます、長年見ていますと。でもこれが、ロシア語、タイ語、スウェーデン語、それにお隣のハングルで書かれているともう全く手が出ません。そんな時にはGoogle翻訳のようなウェブサイトを翻訳してくれるサービスを使って見るのですが、このGoogleウェブサイト翻訳ツールはその翻訳機能をあらかじめサイトに組み込んでおこう、というものです。世界中からお客様に来てほしい、というときにはぜひつけておきたいツールですね。

    着け方ですが、まずGoogle翻訳のサイトにアクセスします。
    Google翻訳

    ここの真ん中下の方に「ウェブサイト翻訳ツール」というのがあるので、これをクリック。

    今すぐウェブサイトに追加」をクリック。
    ここでGoogleアカウントへのログインを求められますので、指示に従ってログイン、またはアカウントを作成します。ログイン済みの人は特に何も言われません。

    さてここからが実際の設定になります。まずはサイトの登録です。ここで設定したサイトが先程ログインしたGoogleアカウントに登録され、あとからいつでも翻訳ツールの設定を修正できるようになります。

    最初のプロパティがウェブサイトのURL。この図では・・・/index.htmlとしていますが、右の(例)にあるように、ドメインまで書けばOKです。また、実際に翻訳機能を追加する「ページ」と完全に一致する必要は無いようです。後で翻訳設定を修正するときの目印位に思っておけばいいと思います。

    2つ目は翻訳元の言語。これはオーナーがここで指定することになっていて、サイト訪問者は変更できません。

    それぞれ設定して「次へ」を押すと、詳細設定画面に入ります。

    ・翻訳する言語:
    翻訳先の言語はサイト訪問者がプルダウンリストから任意に選べます。特に意図が無ければ「すべての言語」を選んでおけばOKです。ただ、ここでその選択肢を絞ることもできます。言語を絞っておいて翻訳内容を細かく調整する、といったことができるようになっています。

    ・表示モード:
    インライン/タブ/自動、から選べます。
    インラインは、↓の様な体裁で、コードを書き込んだ場所に言語を選択するプルダウンリストと「Powered by Google翻訳」の文字が表示されます。

    上の図は表示形式として「横」を選んだ場合。「縦」だとこうなります。


    タブは、コンテンツエリアの枠に「翻訳タブ」を追加するイメージを狙った表示で、コードを書き込んだエリアの左上、右上、右下、左下に沿うように上記インライン横と同じ体裁で表示してくれます。設定ページのサンプルだと本当にタブが追加されたような体裁に見えるのですが、このタブの「枠線」は実は自動ではつきません。CSS等で自分でつける必要がありますので、何も設定しないと上のインライン/横とぱっと見余り変わりません。

    自動は、例えば日本語以外の設定のブラウザでアクセスしたときのみ、Google翻訳ツールを表示する、という設定になります。

    ・詳細設定
    - ユーザの言語がページの言語と異なる場合に自動的に翻訳バナーを表示する。
    これをチェックしておくと、最初に設定した言語(今回は日本語)以外の設定のブラウザでアクセスすると、自動的に↓のバナーをページの上部に表示してくれます。Google翻訳ツールをユーザに探してもらう必要がなくなります。


    - ページに複数の言語のコンテンツが含まれている。
    言いたいことは何となくわかるのですが、これをチェックすると何が変わるかはよくわかりませんでした。

    - Googleアナリティクスを使用して翻訳トラフィックを追跡する。
    このGoogleアナリティクスについては、これから勉強して後日詳細レポートを上げようと思いますので、今しばらくお待ちください。

    全て設定し終わったら「コードを取得」をクリックしてください。この設定はまたあとで修正・変更することが可能です。
    クリックすると、以下のような画面がでて、2種類のコードをページに挿入するよう指示が出ます。

    1つ目のコードは、ページのソースのヘッダ部分に挿入します。「このページはGoogle翻訳機能でカスタマイズされています」という事を示すメタタグです。これが無くても翻訳機能自体には影響ありませんので、おそらく翻訳内容の調整やクローラーでの識別等に使っているのだと思われます。

    2つ目のコードが実際のツールの部分です。このコードを、ツールを表示させたい場所に挿入します。
    私はこのコードの1行目にある</div>をコードの一番最後に移動して、全体をid="google_translate_element"の<div>〜</div>で囲ってやり、cssでこのidを指定してマージンの調節等をやっています。


    以上でGoogle翻訳の回は終了です。次回はGoogle Adsenseの追加についてです。


     


    コメント
    初めまして!
    「ホームページをリニューアルするの巻(19)−
    Googleウェブサイト翻訳ツールを組み込む」を拝見しました。

    以前にGoogle翻訳ツールをページに埋め込んだのですが、
    そのページのみ表示されて、リンク先のページまで翻訳されません。

    下のページのように、トップに埋め込むと全ページに
    翻訳機能が適用されるようにしたいのですが。
    http://gakeslabindonesia.id/id/
    http://mebiphar.com/index.php/en/

    お手数を恐縮ですがアドバイスをいただけませんでしょうか。
    どうぞよろしくお願いいたします。
    小田きく江様

    当ブログにお越しいただき、ありがとうございます。
    お尋ねの件、週末に調べてみたいので、ちょっとお時間を頂けませんでしょうか?

    申し訳ありませんが、よろしくお願いします。
    • てちくん
    • 2017/02/24 12:35 AM
    小田さま

    管理人のてちくんです

    お尋ねの件、ちょっと回答が長くなってしまいましたので、2/28日にメールで回答させていただきましたが、届きましたでしょうか?
    もし行違っているようでしたら送りなおしますので、またご連絡ください。
    よろしくお願いします。
    • てちくん
    • 2017/03/11 11:04 AM
    コメントする








       

    calendar

    S M T W T F S
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    31      
    << March 2024 >>

    アクセスカウンタ

    合計:
    今日:
    昨日:

    selected entries

    categories

    archives

    recent comment

    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      小田きく江
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      てちくん
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      suraugi
    • いそべぇのペーパークラフトを作る(初級編)(12)
      てちくん
    • いそべぇのペーパークラフトを作る(初級編)(12)
      だべえ
    • noomでマイナス12kgのダイエットに成功!
      Yoko

    recommend

    recommend

    recommend

    ドール デザートメーカー ヨナナス901
    ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

    結構高いんです、でも欲しいんです!

    links

    profile

    書いた記事数:173
    最近の更新日:2017/01/30

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM

    Google Adsense

    楽天ブックス

    楽天