技術 technology

Google Language Translatorの翻訳ボタンをオリジナルに変更する方法

WordPressサイトの外国語対応を低コストで行いたい場合にはGoogle翻訳プラグインを利用するのが定番ではありますが、ボタンのデザインがイマイチ…ということも多いですよね。

今回は、WordPressのプラグイン、「Google Language Translator」のボタンデザインをカスタマイズする方法を紹介します。前半はインストールや設定の話ですので、ボタンデザインの変更をしたい方は目次からどうぞ。

Google Language Translatorとは?

Google Language Translatorは、簡単な操作でサイトを外国語対応可能にしてくれるWordPressのプラグインで、約100ヶ国語への翻訳が可能です。早速インストールしましょう。

基本的な使い方

インストールと有効化が完了したら、言語の設定を行います。設定メニューに「Google language Translator」が追加されていますので、こちらをクリックして設定画面に移動しましょう。

設定メニューに「Google Language Translator」が追加された

設定画面では、元の言語と翻訳言語を選択していきます。

言語の設定

Google Language Translatorの設定画面。上部に元の言語を設定するセレクトボックスがあり、下部には翻訳する言語を選ぶチェックボックスが’ある

元の言語が正しく選択されていないと、翻訳されませんので注意してください。チェックが終わったら、ページの中程にある保存ボタンをクリックします。

保存ボタン

これで、サイトの翻訳機能が備わりました。簡単ですね!続いて、翻訳ボタンを変更する方法を解説します。

Google Language Translatorのボタンをオリジナルにする手順

翻訳ボタンのコード(aタグ)を取得する

まずどのページでも良いので、翻訳ボタンが表示されているページを開きましょう。そうすると、以下のようなボタンがサイトに追加されているはずです。

Google Language Translatorのボタン

ボタンを見つけたら、クリックします。すると設定画面で指定した言語が国旗の形で表示されますので…

この状態でブラウザの「検証機能」を起動します。WindowsならF12キーを押すと、検証機能が起動します。

起動したら、以下ピンクの箇所をクリックしてください。

続いて、旗をクリックすると、下のテキストがハイライトされますので、その部分をドラッグして、コピーします。

テキストの内容としては以下のような感じです。

<a title="English" class="nturl notranslate en flag united-states tool-item" data-lang="English"></a>

このテキストを取得できたら、ボタンを設置したい場所に貼り付けましょう。あとはこのaタグをデザインすればボタンの作成は完了です!

最後に、もう一度GoogleLanguageTranslatorの設定画面へ移動して、「Add CSS Styles」の欄に以下のテキストを貼り付けてください。これでオレンジのボタンも削除されます。

#glt-translate-trigger{
display:none;
}

注意

新規のサービス提供を終了してしまった埋め込みのGoogle翻訳ですが、本プラグインを経由すればまだ利用できるようです。(2019年7月5日時点)ただし、いつ利用不可になるかはわかりませんので、ご注意ください。

 

一覧ページへ 

Other contents
その他のコンテンツ

Go to Top

Contact
お問い合わせ