web-dev-qa-db-ja.com

グーグル翻訳プラグインをスタイリングできますか？

このプラグイン（http://translate.google.com/translate_tools）を使用してウェブサイトを翻訳しています。問題は、ページの残りの部分に合わないようにスタイルを設定する方法を理解できないことです。

助言がありますか？

cssstylestranslationgoogle-translate
17
Vasseurth

確かに、あなたはあなたのページに表示されるものなら何でもスタイリングすることができます。

レンダリングされたマークアップの一部を次に示します。

<div id="google_translate_element">
  <div class="skiptranslate goog-te-gadget" style="">
    <div id=":1.targetLanguage">
    <select class="goog-te-combo">
    </select>
  </div>
Powered by
  <span style="white-space: nowrap;">

  </span>
</div>

Goog-te-comboがレンダリングする内容を確認し、次のような独自のスタイルでオーバーライドできます。

<style>
    .goog-te-gadget {
        font-size: 19px !important;
    }    
</style>

正確に何を変更したいかに応じて、このメソッドは、クラスでレンダリングされたスタイルのいずれか、またはそれらを拡張するために使用できます。

17
Mike Veigel

この（ https://github.com/wistcc/stylinggt.js ）プラグインを使用して、スタイルにさまざまな変更を簡単に加えることもできます。

8
Winner Crespo

Google利用規約

私はあなたの質問を望んでいたのでこのページに行きました...

グーグル翻訳プラグインをスタイリングできますか？

ウィジェットの外観の変更がGoogle TOSの違反かどうかを教えてくれます。

この質問 このサイトの関連質問 と Googleウェブマスターフォーラム の質問を考慮して、この問題に対処しないでくださいすべて、私はm問題ではないと想定し、スタイルを変更しても問題ありません。

ただし、念のため、TOSの関連セクションを分解してみましょう。

最終更新日：2014年4月14日

サービスの利用

お客様は、本サービス内で利用可能となったあらゆるポリシーに従う必要があります。

サービスを誤用しないでください。たとえば、我々のサービスを妨害したり、提供するインターフェースや手順以外の方法を使用してサービスにアクセスしたりしないでください。お客様は、該当する輸出および再輸出管理法および規制を含め、法律で許可されている場合に限り、本サービスを使用できます。お客様が当社の条件またはポリシーに準拠していない場合、または違法行為の疑いがある場合は調査する場合、当社はお客様へのサービスの提供を一時停止または停止することがあります。

当社のサービスを使用しても、当社のサービスまたはお客様がアクセスするコンテンツの知的所有権の所有権が付与されることはありません。所有者から許可を得るか、法律で許可されている場合を除き、サービスのコンテンツを使用することはできません。これらの条件は、当社のサービスで使用されるブランドまたはロゴを使用する権利を付与するものではありません。本サービス内または本サービスとともに表示される法的通知を削除、不明瞭化、または変更しないでください。

当社のサービスは、Google以外のコンテンツを表示します。このコンテンツは、それを利用可能にするエンティティの唯一の責任です。コンテンツを確認して、それが違法であるかポリシーに違反しているかを判断し、ポリシーまたは法律に違反していると合理的に確信しているコンテンツを削除または表示を拒否する場合があります。ただし、これは必ずしもコンテンツを審査することを意味するものではないため、審査を行うとは限りません。

サービスの使用に関連して、サービスのお知らせ、管理メッセージ、およびその他の情報を送信する場合があります。これらの通信の一部をオプトアウトすることができます。

一部のサービスはモバイルデバイスで利用できます。そのようなサービスを、あなたの注意をそらし、交通法や安全法を順守できない方法で使用しないでください。

キー言語ここでは、2番目の段落の2番目の文のように見えます。

たとえば、当社のサービスに干渉したり、提供するインターフェイスおよび指示以外の方法を使用してサービスにアクセスしたりしないでください。

そして、キーフレーズは次のように見えます：

...インターフェース以外の方法を使用する...

私は弁護士ではありませんが、「インターフェース」のカスタムスタイリングが必ずしも「方法」を変えるとは思いません。

私の場合、ドロップダウンボックスを置き換えます...

enter image description here

巨大な言語メニューを起動します。

enter image description here

カスタムアイコン（まだデザインされていません）。

ドロップダウンメニューはクリック可能なリンクです。カスタムアイコンはクリック可能なリンクになります。メソッドに変更はありません。明らかな違反はないと思います。

この解釈をサポートするのは、エクストラワイド言語メニューmustが小さな画面に収まるようにカスタムスタイルにする必要があるという事実です。

6
Michael_B

ターゲット要素を使用してスタイルを変更できます。

これは、ウィジェットの境界線を削除するために使用したものです。

<--div id=":0.targetLanguage" style="border: none; float: right;"--><--/div-->

スクリプトが起動すると、継承されたスタイルに追加されます。私のターゲットが0で始まることに気づくでしょう。それは、私がウィジェットの単純なバージョンを使用したためです。ここの1は別のバージョン用です。全体として、Googleがレンダリングしたコードをコピーし、その上にターゲットスタイルを追加します。

お役に立てれば。

4
OMG

翻訳ウィジェットのスタイリングにほとんど成功していません。翻訳ウィジェットをdiv内にラップしてみてください<div id="google_translate_element"/>および次のようなCSSセレクターを使用します。

#google_translate_element select {}
#google_translate_element div {}
#google_translate_element span {}

必要に応じてウィジェットをスタイル設定します。

2
Salman A

はい、それはこの article で説明されているように可能です。

1
Abd Ul Aziz

これが私が使用しているものです-上記の回答を組み合わせて（ありがとう！）

背景色を黒に設定し、テキストを緑に、枠線を​​削除しました。スタイルパーツの色/テキストサイズ設定を試して、必要な効果を得ることができます。

このスレッドはとても役に立ったので、返して共有したいと思います。

<div id="google_translate_element"></div>
<script type="text/javascript">
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({
                pageLanguage: 'en',
                layout: google.translate.TranslateElement.InlineLayout.SIMPLE
            },
            'google_translate_element');
    }
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?
cb=googleTranslateElementInit"></script>

<style>
    div#google_translate_element div.goog-te-gadget-simple {
        font-size: 19px;
    }

    div#google_translate_element div.goog-te-gadget-simple {
        background-color: black;
    }

    div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span {
        color: green
    }

    div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:hover {
        color: blue
    }

    div#google_translate_element div.goog-te-gadget-simple {
        border: none;
    }
</style>
0
Chaumurky

あなたなら出来る！これを行う...参照 例

function googleTranslateElementInit(){
new google.translate.TranslateElement({pageLanguage: 'pt', includedLanguages: 'en,es', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}

$(window).load(function()  
{ 
setTimeout(function()
{  
$('span:contains("Selecione o idioma")').html('<img src="https://satautomacao.com.br/img/ensp.png" />');
$('.goog-te-gadget').css('display', 'block');
}, 500); 
// ensp.png
});
#traducoes{position: absolute; top: 9px; right: 5px;}
.goog-te-gadget{font-size: 19px !important;}
.goog-te-gadget-simple{background-color: transparent !important; border: none !important;;}
.goog-te-gadget-icon{display:none !important;}
<div id="traducoes">
<div id="google_translate_element"></div>
</div>
0
Jetro Bernardo