Google+バッジスタイルを変更してください

Question

私のページにはGoogle+ badgeが生成されました。

2つのテーマ（明るく暗い）しかなく、私のウェブサイトにはうまく収まりません。

灰色の枠線を削除して背景を透明にしたいと考えています。

Googleが提供するコードには基本的にjsファイルにAPIが含まれており、バッジを付けたIFrameがページに追加されます。

このため、srcのドメインが私と同じドメインではないため、IFrameのCSSを変更できません。

私はバッジスタイルをカスタマイズするための文書化された方法を見つけることができないようです。

しかし、私はAndroid websiteと出会い、同じバッジがあることに気付きましたが、背景と境界線を削除することができました。アンドロイドのページソースコードを掘り下げた後、私は同じAPIを使用していて、バッジを含めるには同じマークアップを使用していることがわかりました。

誰でもどのようにカスタマイズできますか？

Answer 1

android.comの<a href="//plus.google.com/104629412415657030658" id="page-badge-border"></a>のスタイリングを見てください。それは、バッジの灰色の境界線をカバーする白いボーダーを持っています。

Answer 2

を変更するとコンセンサスが変わるようです。

国境が、しかし...このサイトでの答えは私の仕事：

<script type="text/javascript"> 
    (function() { 
     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; 
     po.src = 'https://apis.google.com/js/plusone.js'; 
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); 
    })(); 
</script> 

： http://www.daddydesign.com/wordpress/how-to-customize-your-google-page-badge/

このスクリプトは後バッジのためのGoogleの提供のdivを追加します

次に、ヘッダーに次のスタイルを追加します。

#googleplus_widget{ 
    width: 318px; /*two pixels LESS than badge width */ 
    height: 362px; /*two pixels LESS than badge height */ 
    /*float: left;*//*I replaced this with three lines below, which center the badge*/ 
    position:absolute; 
    left:0;right:0; 
    margin:0px auto 0px auto; 
} 
#googleplus_widget span{ 
    width: 318px; /*two pixels LESS than badge width */ 
    height: 362px; /*two pixels LESS than badge height */ 
    float: left; 
    overflow: hidden; 
    background: #fff; 
} 
#googleplus_widget span div{ 
    margin: -1px 0 0 -1px !important; 
    position: relative; 
} 

widthとheightの属性は、バッジの幅と高さよりも小さい2つのピクセル,より小さくする必要があります。

境界線の上に他の要素を配置することを心配する必要がないため、バッジの寸法が実際にページに表示されていることを意味するため、これは非常にきれいで清潔なソリューションです。