Google ＋1ボタンの横幅を調節して空白(スペース)を消す方法

Googleプラス

Google+の「+1」ボタンは以下の公式ページから比較的簡単に作成できるが、任意の横幅を設定できる「インライン」タイプと違い、一般的によく使われるコンパクトな「バルーン」タイプ（このブログでも記事タイトルの下に設置している形）では利用者が細かく幅を設定することができない。

その結果が何が起こるかというと、多くの場合にボタンの右にかなり大きめの空白（スペース）が表示されてしまう。サイトに設置しているボタンがGoogle+用だけなら特に問題はないのだが、別のサービスのものと合わせて横に並べると、そのスペースのせいできれいに並ばなくなってしまう。また、スマートフォン向けのサイト（テンプレート）などで、そもそも設置場所に余裕がないということもありえる。

Google +1ボタンの横にできてしまう空白
Google +1ボタンの横にはかなりのスペースができる。

+1 ボタンの設置にはGoogleの特殊タグを使う以外にも、一般的なdivタグが使用できるため、普通はそこに横幅（width）を設定すればいいように思える。しかし、スクリプトがタグ自体を書き換えてしまうようで、そのままでは上手くいかないようだ。

これをCSS（とHTML）で解決するには2種類ほど方法があるようなので、両方紹介したい。

ページに表示されている「+1ボタン」がひとつだけの場合

ページに設置している（表示されている）+1ボタンがひとつなら、あまり細かいことを考える必要はなく、以下のCSSコードを追加すればいい。デモコードでの横幅はこのブログで使用している「data-size="medium"」に合わせて65pxにしてあるだけなので、実際は環境に合わせて任意の値に設定して欲しい。

ちなみに自分で試してみた結果としては、Google+での共有数が一桁なら60pxでもギリギリ問題がなさそうだと感じた。

#___plusone_0 {
width:65px !important;
}

ページに表示されている「+1ボタン」が複数（ふたつ以上）の場合

ページに設置している+1が複数になってしまう場合は、前出のコードでは最初の1個しかサイズが変わらない。これはボタンに割り当てられている「___plusone_0」というIDの最後の数字が、ボタンの表示数によって0から順に増えていくため。つまり、2個目のボタンは「___plusone_1」、3個目のボタンは「___plusone_2」という形になり、IDで設定してるCSSの対象から外れてしまう。

これについては表示される個数を手動でチェックして以下のように設定する方法もあるが、あまりスマートとはいえない。

#___plusone_0,
#___plusone_1,
#___plusone_2 {
width:65px !important;
}

この場合は、CSSだけで解決するよりHTMLにも手を入れて以下のように設定した方が結果的に楽になる。

<div class="gplus-sample">今使用している+1ボタンのコード</div>

ボタン自体を「gplus-sample」というクラスがついたdivで囲っているだけ。CSSの方は次のように設定する。

.gplus-sample div {
width:65px !important;
}

例としては汎用的なdivタグを使っているが、すでにulタグをなどを使ってマークアップしてあるなら、もちろんそっち（liタグ）にclassとCSSを設定すればいい。また、各種ボタンを横並びにするときに「display:inline」などを使っているなら、「gplus-sample」の方にも適用させるのをお忘れなく。