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"というクラス名が最初から付いているわけですから、これを利用できないかと考えています。
もし、できるのであれば、そのやり方を教えてください。
お礼
できました。ありがとうございました。私のケアレスミスですね。