バンビの初心者ブログ教室

私がブログ運営で月間10万円稼いだ方法を教えます！

ブログの始め方
ブログの収益化
記事の書き方
SEO・アクセスアップ
ブログ運営報告
HTML CSS デザイン
はてなブログ
サイトマップ
トップ > はてなブログに自動翻訳ボタンを設置する方法（簡易版＆もちろん無料）多言語化して全世界に情報発信！

はてなブログに自動翻訳ボタンを設置する方法（簡易版＆もちろん無料）多言語化して全世界に情報発信！

※当ブログ内では商品広告やPRを行っております。

はてなブログに自動翻訳ボタンを設置する方法（簡易版＆もちろん無料）全世界に情報発信！

せっかくブログを書くなら世界に発信したい！

という方、必見です👀

この記事では、はてなブログに自動翻訳ボタンを設置する方法を解説します♪
めちゃ簡単で、コードを決められた場所にコピペするだけなので、興味のある方はぜひやってみてね。

下記の翻訳ボタンのプルダウンで言語を選ぶと別ウィンドウでこのページの翻訳が開きます♪（閉じ方は普通にブラウザのタブを閉じればOK◎）

↓↓

※Google翻訳を使った翻訳ページに飛ばすやり方です。
メリット、デメリットもありますので、詳しくは、この翻訳ボタンの仕組みのところを読んでくださいね(^-^)

↓↓

 

コードをコピペするだけで簡単自動翻訳ボタン

はてなブログに自動翻訳ボタンを設置する方法

やることは、めちゃ簡単です。

はてなブログの「ダッシュボード」→「🔧 設定」→「詳細設定」へ行き、
ずっと下にスクロールしていくと
「head内タグ」というのがあり、さらに、その下に「<head>要素にメタデータを追加」という欄があるので、そこに以下のコードをコピペします。

<!-- 一翻訳ボタン -->
<style>
.min-translate {
    position: fixed;
    top: 10px; /*上からの位置*/
    right: 10px; /*右からの位置*/
    z-index: 9999;
}

.min-translate select {
    padding: 3px;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 8px;
    background: white;
    cursor: pointer;
}
</style>

<div class="min-translate">
    <select onchange="translatePage(this.value)">
        <option value="">🌐 翻訳</option>
        <option value="en">🇺🇸 English</option>
        <option value="zh-CN">🇨🇳 中文</option>
        <option value="ko">🇰🇷 한국어</option>
        <option value="es">🇪🇸 Español</option>
        <option value="th">🇹🇭 ไทย</option>
    </select>
</div>

<script>
function translatePage(lang) {
    if (!lang) return;
    const currentUrl = window.location.href;
    const googleTranslateUrl = 'https://translate.google.com/translate?sl=ja&tl=' + 
                               lang + '&u=' + encodeURIComponent(currentUrl);
    window.open(googleTranslateUrl, '_blank');
}
</script>

※コード公開についてのお願い（当ページ内）

 

↓翻訳ボタンが表示されるはずです。

はてなブログに翻訳ボタンを設置する方法

ボタンの位置は、上のコードでは右上に表示されるように書いています。

   top: 10px; /*上からの位置*/
   right: 10px; /*右からの位置*/

5px, 10pxの値を変更して、位置を調整してください。

なお、
左上に表示したい場合は

   top: 10px; /*上からの位置*/
   left: 10px; /*右からの位置*/

右下は

   bottom: 10px; /*上からの位置*/
   right: 10px; /*右からの位置*/

左下は

   bottom: 10px; /*上からの位置*/
   left: 10px; /*右からの位置*/

となります。

 

翻訳ボタンの仕組みと注意点

翻訳ボタンと言っても、あなたのページが翻訳されたものに変わるのではなく実際にはこんなURLに飛ばしています。

↓

https://translate.google.com/translate?sl=ja&tl=en&u=あなたのページURL

これは実は、Google翻訳の翻訳後のページなんです。

 

Google翻訳は、標準機能として、URLを入れてページ全体を翻訳してくれる機能が備わっています。

はてなブログに自動翻訳ボタンを設置する方法

つまり、はてなブログに設置した「自動翻訳ボタン」で言語を選ぶと、Google翻訳でWEBサイトを入力した後の翻訳後のページに飛ぶというわけです。

たとえば、

https://example.com/page1

にアクセスし、いま作成した自動翻訳ボタンで英語を選択すると、実際には以下のようなURLが別ウィンドウで開かれるというシンプルな仕組みです。
↓

https://translate.google.com/translate?sl=ja&tl=en&u=https%3A%2F%2Fexample.com%2Fpage1

 

・sl=ja → 元の言語（source language） を日本語（ja）と指定

・tl=en → 翻訳先の言語（target language） を英語（en）と指定

・u=... → 翻訳したいページのURL を指定

 

この「翻訳ボタン」は、このような仕組みを利用しているため、ちょっと注意する点もあるので、以下で説明します。

また、注意点＆それに関する対策も解説していますので、最後まで読み進めてくださいね。

 

自動翻訳ボタンを設置するメリット

まず、翻訳ボタンを設置することのメリットを考えましょう。

無料で、シンプル、誰でも簡単に設置できるのはとても魅力ですし、多言語化をすることにより、さまざまなメリットもあります。

  • 海外の人にも記事を読んでもらえる
  • 読者層が広がる（世界中にシェアしてもらえるかも！）
  • 「海外ユーザー歓迎」の雰囲気を出せる

まず、翻訳ボタンを設置することにより、ブログの印象が国際的になります。
ブログの内容にもよりますが、お店などを運営している場合には印象がグッと良くなります。

お店以外でも、自分が発信する情報が、日本語だけでは届かなかった多くの人に読んでもらえる可能性があります。

 

⚠️「世界中の人に読んでもらいたい」と願うだけなら、このコードで解決ですが、WEBサイトとしてアクセスを集めたい！となると、対策が必要になります。

⚠️ このコードの特性としてのデメリット、また対策方法を以下で解説しますね。

 

この自動翻訳ボタンのデメリット

簡単に誰でも設置できる翻訳ボタンとして紹介したコードですが、一番のデメリットは、

  • 翻訳後のURLは Google翻訳のアドレス になる

という点です。

Google翻訳のURLへリンクしているので、翻訳された後のページは自分のページではなくなってしまいます。

それにより、アクセス解析にも現れないし、サーチコンソールなどで確認することもできません。

世界中の人がアクセスして外国語で自分の記事を読んでくれたとしても、自分のアクセス数にはなりません。あくまでも「アクセスした多言語の人が翻訳できる」という機能でしかないのです。

 

以下では、そんなGoogle翻訳のアドレス になってしまうというデメリットを解消する方法を紹介します。

 

Google翻訳のURLリンクでも有効なSEO対策

翻訳ボタンは「入口」としては便利ですが、翻訳先は Google翻訳のURL です。
そのため、検索エンジンからの評価（SEO）も、アクセス解析（GoogleサーチコンソールやGoogleアナリティクス）も、自分のブログには返ってきません。

 

これを解決するために、自分のサイト内に主要言語（英語）のページを1ページ用意しましょう。

つまり、一般のページは翻訳はGoogleに任せるけど、最低限の外国語版のトップページ を作り、そこを外国人読者の「公式入口」にするのです。

英語と書いたのは、一番アクセスが多く、海外の何かを検索する場合、英語で検索している人が多いからです。別の言語の人たちに向けて情報発信している場合は、その言語に合わせると良いと思います。（例えば、ドイツビールや〇〇国の旅行記みたいな記事をメインで書いているなど）

外国語のページは、人によってはムズカシイかもしれませんが、それこそGoogle翻訳に頼れば良いのです。

Google翻訳

↑このページにアクセスし、文章を入れて翻訳させて、そのままコピペすればOK。

Google翻訳は、たまに変な訳になってしまうことがあるので、私が良くやる方法としては、翻訳後の文章をもう一度、日本語に翻訳させて意味が通るか見ます。

日本語に翻訳させた時に意味が通らないようだったら、その部分の元の日本語を機械が翻訳しやすいように書き換えて、また翻訳させます。

日本語は特に主語がなくても通じてしまうため、わざと主語を多めに入れたり、文章を短く区切って翻訳させると結構いー感じに翻訳できます。（まあ、細かいことは気にしないのが一番ですが）

あとは、ChatGPTとかも、結構上手に翻訳してくれますよ(^-^)

 

以下では、ステップごとにGoogle翻訳のURLリンクでも有効なSEO対策を載せてますので、順番にやっていってくださいね。

STEP1 英語トップページを作る

アドレスを

https://example.com/en/

のようにして、英語版のトップページを作りましょう。（アドレスはなんでもOKですが、アルファベットのものが良い👍）

  • 簡単なプロフィールやサイト紹介を英語で書く
  • 代表的な記事を10本ほどピックアップして、英語で短いサマリー＋リンクを載せる
    （リンク先は日本語のページでOKです。翻訳ボタンがついてるから！）
  • 「リンク先は日本語ですが、右上のボタンから翻訳できます」と明記しておく
    （The link opens a Japanese page, but on that page you’ll also find a translate button in the top right.）

STEP2 内部リンクでSEOを補強

日本語のページからも内部リンクを貼って動線を用意しましょう。（SEO対策）

  • 日本語ページのヘッダーやフッターに「English」リンクを設置
  • 翻訳ボタンの近くにも「公式英語ページはこちら（English TOP）」という案内を入れるとなおよし◎

余裕があれば、英語トップページから、それぞれの日本語記事に1〜2行の英語説明を添えてリンクするとSEO的にもさらに良くなります。

 

STEP3 検索エンジンに伝える

<head> に hreflang を設定し、日英ページの対応を知らせます。
これも、同じく最初のコードを入れた、
「ダッシュボード」→「🔧 設定」→「詳細設定」→<head>要素にメタデータを追加」の中に入れてください。
↓ 自分のURLで設定してくださいね。

<link rel="alternate" href="https://自分のURL" hreflang="ja">
<link rel="alternate" href="https://自分のURL/en/" hreflang="en">
<link rel="alternate" href="https://自分のURL/" hreflang="x-default">

 

なお、この対策しても、Google翻訳後のページのアクセス数などは分からないのですが、少なくとも英語版トップページ（自分のページ）へのアクセス数は分かります。

この英語版トップページに海外からのアクセスが劇的に増えた場合には、翻訳後のページの英語版を実際に作成するなどして対応するのが良いでしょう。

まずは、その前段階の入口としては、この自動翻訳ボタン（簡易版）はまさにおすすめなのです😊

 

主な言語コード一覧

コードの⬇️ここの部分を変えたり追加したりすれば、他の言語にも翻訳できます。

        <option value="">🌐 翻訳</option>
        <option value="en">🇺🇸 English</option>
        <option value="zh-CN">🇨🇳 中文</option>
        <option value="ko">🇰🇷 한국어</option>
        <option value="es">🇪🇸 Español</option>
        <option value="th">🇹🇭 ไทย</option>

 

言語 国旗 言語コード <option> コード
英語 🇺🇸 en <option value="en">🇺🇸 English</option>
中国語（簡体字） 🇨🇳 zh-CN <option value="zh-CN">🇨🇳 中文（简体）</option>
中国語（繁体字） 🇹🇼 zh-TW <option value="zh-TW">🇹🇼 中文（繁體）</option>
韓国語 🇰🇷 ko <option value="ko">🇰🇷 한국어</option>
スペイン語 🇪🇸 es <option value="es">🇪🇸 Español</option>
フランス語 🇫🇷 fr <option value="fr">🇫🇷 Français</option>
ドイツ語 🇩🇪 de <option value="de">🇩🇪 Deutsch</option>
イタリア語 🇮🇹 it <option value="it">🇮🇹 Italiano</option>
ポルトガル語（ブラジル） 🇧🇷 pt-BR <option value="pt-BR">🇧🇷 Português (Brasil)</option>
ポルトガル語（ポルトガル） 🇵🇹 pt-PT <option value="pt-PT">🇵🇹 Português (Portugal)</option>
タイ語 🇹🇭 th <option value="th">🇹🇭 ไทย</option>
インドネシア語 🇮🇩 id <option value="id">🇮🇩 Bahasa Indonesia</option>
ベトナム語 🇻🇳 vi <option value="vi">🇻🇳 Tiếng Việt</option>
ヒンディー語 🇮🇳 hi <option value="hi">🇮🇳 हिन्दी</option>
アラビア語 🇸🇦 ar <option value="ar">🇸🇦 العربية</option>
ロシア語 🇷🇺 ru <option value="ru">🇷🇺 Русский</option>

 

自動翻訳ボタン（簡易版）コード解説

簡単にコードの解説を載せています。
改変する際はこちらを参考にしてください。

 

<!-- CSS：ボタンの見た目を調整 -->
<style>
.min-translate {
    position: fixed;   /* 画面の端に固定する */
    top: 5px;          /* 上からの位置 */
    right: 10px;       /* 右からの位置 */
    z-index: 9999;     /* 他の要素より前面に表示 */
}
.min-translate select {
    padding: 3px;              /* 内側の余白 */
    font-size: 16px;           /* 文字サイズ */
    border: 2px solid #ddd;    /* 薄い枠線 */
    border-radius: 8px;        /* 角を丸める */
    background: white;         /* 背景色 */
    cursor: pointer;           /* マウスをのせた時にポインタ表示 */
}
</style>

<!-- HTML：翻訳ボタン本体 -->
<div class="min-translate">
    <select onchange="translatePage(this.value)">
        <option value="">🌐 翻訳</option>
        <option value="en">🇺🇸 English</option>
        <option value="zh-CN">🇨🇳 中文</option>
        <option value="ko">🇰🇷 한국어</option>
        <option value="es">🇪🇸 Español</option>
        <option value="th">🇹🇭 ไทย</option>
    </select>
</div>

<!-- JavaScript：動きをつける -->
<script>
function translatePage(lang) {
    if (!lang) return; // 何も選ばなかったら処理しない

    // 今見ているページのURLを取得
    const currentUrl = window.location.href;

    // Google翻訳のURLを組み立てる
    const googleTranslateUrl =
      'https://translate.google.com/translate?sl=ja&tl=' +
      lang + '&u=' + encodeURIComponent(currentUrl);

    // 新しいタブで開く
    window.open(googleTranslateUrl, '_blank');
}
</script>

 

 

コード公開についてのお願い

今回紹介したコードは、自分で考えたものです。


・ご自身のサイトに組み込んで自由にお使い頂けます。

・もし、カスタマイズのやり方などで、記事の中でコードを紹介する場合には、参考ページとして、このページ（https://www.bambi.pro/entry/translate-button）へのリンクを紹介してください。
（無断で何の紹介もなく掲載されているのを見つけると悲しくなってしまいますので、どうぞよろしくお願いします！）

 

アフィリエイト関連おすすめ記事

 

【収益公開中】はてなブログは稼げるのか？10ヶ月間の運営報告から考察

 

６ヶ月間で14万PV達成！アクセスを増やす方法（１）
検索順位を上げる記事の書き方

これまでに試したPVを増やす方法（２）

これまでに試したPVを増やす方法（３）
SEO対策、読者急増、アクセス増、ネタにも困らない魔法の方法！

 

戦略的アフィリエイトのすすめ！雑記ブログを収益化して月々5万円稼ぐ方法