2011/06/03

[小ネタ] Google+1ボタンの右側の余白をなくす方法

Google +1 を当ブログにも設置してみました。
Googleさんがタグジェネレータを用意してくれているので設置は非常に簡単です。

タグジェネレータはこちら
Google +1 をWebサイトに表示


タグジェネレータにはscriptタグを埋め込むように指示されます。
指示に従ってタグを埋め込むとこんな感じにGoogle +1 ボタンが設置されます。

スクリーンショット(2011-06-02 23.03.55)


右側に若干アレな余白があるのが分かりますでしょうか。

スクリーンショット(2011-06-02 23.03.55)


埋め込んだスクリプトが動作した結果、このような記述が・・・

<g:plusone size="medium"></g:plusone>


このように置換され、ボタンが表示されます。

<div style="height: 20px; width: 82px; display: inline-block;" id="___plusone_0">
<iframe allowtransparency="true" hspace="0" id="I1_1307025807685" marginheight="0" marginwidth="0" name="I1_1307025807685" src="https://plusone.google.com/u/0/_/+1/button?hl=ja&amp;jsh=s%3Bplusone%3Agoogleapis.client%4021550740_8d71de52%2Fclient%3Bgoogleapis.proxy%4021550740_8d71de52%2Fproxy%3Bplusone%3Agoogleapis.client%3Aiframes-styles-bubble%4021550740_8d71de52%2Fbubble%3Biframes-styles-bubble%21plusone%3Agoogleapis.client%4021550740_8d71de52%2Fbubble_only%3Bplusone-unsupported%4021550740_8d71de52%2Funsupported#url=http%3A%2F%2Fblog.amazedkoumei.com%2F2011%2F05%2F13000funiphone.html&amp;size=medium&amp;count=true&amp;useSharedProxy=true&amp;rcache=true&amp;scache=true&amp;id=I1_1307025807685&amp;parent=http%3A%2F%2Fblog.amazedkoumei.com&amp;rpctoken=604458771&amp;_methods=_ready%2C_close%2C_open%2C_resizeMe" style="position: static; left: 0pt; top: 0pt; width: 86px; height: 20px; visibility: visible;" tabindex="-1" vspace="0" frameborder="0" scrolling="no" width="100%">
</iframe>
</div>


タグに直接style属性でwidthが指定されているためスタイルシートによる解決はできません。

ではどうするか。

答え

このようにDIVタグで囲んであげればいい。

<div style="width:60px;">
<g:plusone size="medium"></g:plusone>
</div>


当たり前ですね。
でも結構悩んだんです(恥)

誰かの助けになれば幸いです(笑)



Comments

Anonymous 2011/06/30 13:16
これだと数字が増えた場合にだめになりそうですけど・・

amazedkoumei 2011/06/30 14:48
( ゚д゚)ハッ!

最大桁数て3桁なのかな・・?
「1k」って表記はみたことあるんですけど、、、

Anonymous 2011/07/01 12:39
普通にcssの!importantを使えば、余計な事しなくても大丈夫ですよww

amazedkoumei 2011/07/01 19:15
なるほど。知らなかったです。!important。
恥ずかしい(´・ω・`)

数字増えたことのことを考えると右側の余白は甘んじて受け入れるしかない・・のですかね。