CSSでクラス名を指定してもうまくいかない

質問

下記URLのサイトを参考にして「Google+1ボタン」を設置しようとしています。
https://developers.google.com/+/web/+1button/?hl=ja

とりあえずサイト上には設置できたのですが、今度はこの「Google+1ボタン」を自分が設置したい場所に貼り付けるために、CSSで指定しようと思いました。

ちなみに、取得したコードは以下のようになっています。

<!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-plusone" data-size="medium"></div>

<!-- 最後の +1 ボタン タグの後に次のタグを貼り付けてください。 -->
<script type="text/javascript">
window.___gcfg = {lang: 'ja'};

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

コードは上記のようになっています。

class="g-plusone"
となっていますので、このままこれをクラス名としてCSSに記述しても適用されません。
そこで、これにさらに<div>タグで囲んで、この<div>にクラスを付ければできると思い
<div class=”sample”><div class="g-plusone" data-size="medium"></div></div>

として、sampleに対してスタイルを指定してみたところ、うまくできました。

しかし、できればこのようなことはせず、"g-plusone"というクラス名が最初から付いているわけですから、これを利用できないかと考えています。

もし、できるのであれば、そのやり方を教えてください。

回答No.2

ORUKA1951 · ベストアンサー

最終的なHTMLにスタイルを指定すれば良いです。
<div style="text-indent: 0px; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 106px; height: 24px;" id="___plusone_0">
<iframe・・・【中略】・・・></iframe>
</div>
とかになっているはずです。
　style属性で指定されているため、詳細度が1000で上書きできない。
　⇒（HTMLでは、要素の"style"属性値は、スタイルシート規則である。これらの規則はセレクタを持たないので、a=1、b=0、c=0、かつd=0。）( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html#specificity )
　よって、著者のimportant宣言( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html#cascading-order )を使用します。

HTMLのソースを見て、上記なら
<style type="text/css">
<!--
#___plusone_0{margin-left:100px!important;}
-->
</style>

firefoxをお使いだと思いますが、そのfirebugを利用して確認すると簡単です。

お礼

ありがとうございます。

ちなみにですが、ルール的にはよくなくても、とりあえずうまく表示できたからと言って、

<div class=”sample”><div class="g-plusone" data-size="medium"></div></div>

なんてことはやらないほうがいいですよね？

こういうことをすると、具体的にどのような不都合があるのか教えてほしいです。

回答No.1

kuroneko0525

google+1 ボタンが実際に表示されたページのソースを見てみましょう。

<g:plusone></g:plusone>

スクリプトが動作した結果こんな風にタグが変わっているかと思います。
なので、質問者様がやったちょっと手間のかかるやり方でやるしかないのではないでしょうか。

お礼

ありがとうございます。

ヘッダー内に表示させているのですが、今見てみましたが、
<div class=”sample”><div class="g-plusone" data-size="medium"></div></div>
となっていました。