Google+1ボタンがIEだと折り返して表示されることへの対処（暫定版）

「AmebloにGoogle+1ボタンを設置してみたよ 」にてアメブロにGoogle+1ボタンを設置してみたんですが、設置当初はIEだと表示されませんでした。

ところが、最近になってIEで見てみたら何故か表示されるようになっていて、ウィジット側で対応したのかなと喜んでいたら、折り返して表示される・・・。

FireFoxなら問題なく表示されるので、CSSの問題かなと思い対処してみることに。

原因は、Google+1ボタンのDIV要素に指定されているスタイルで、display:inline-blockとなっているため折り返しているようです。

- IEのDeveloper Toolbarで見たときの適用されているスタイル

ってことで、このスタイルを変更すればいいんだ（実際、上記のIEのDeveloper Toolbarからdisplayプロパティをinlineに変更してみるとプレビュー上では折り返さずに表示される）、ということで対処しようと思ったのですが、元々Google+1ボタンはウィジットをブログに貼り付ける際のDIV要素をJavaScriptで変換して表示しています。

<div class="g-plusone" size="medium" data-size="medium" data-count="true" href='http://www.example.com'></div>

上記のDIV要素が下記のように変換されます。

<div id="___plusone_0" style="border-bottom-style: none; padding-bottom: 0px; border-right-style: none; text-indent: 0px; margin: 0px; padding-left: 0px; width: 90px; padding-right: 0px; display: inline-block; border-top-style: none; background: none transparent scroll repeat 0% 0%; float: none; height: 20px; border-left-style: none; padding-top: 0px; cssfloat: none;">

※ 実際の+1ボタンはiframeにて展開

で、上記のように変換後のDIV要素にスタイルが指定されているため、元のDIV要素にいくらスタイルを設定しても反映されません。

で、とった苦肉の策がアメブロでユーザー用に利用できるCSSに、上記のGoogle+1ボタン用のID名を指定してスタイルを上書きするというもの。

ID名は、「___plusone_」という接頭辞で最後の数字がボタンを1つ追加するたびにインクリメントされていきます。

このブログの場合、1ページに表示されるGoogle+1ボタンの最大数は3つ（エントリの表示数を3つに制限しているため）なので、0から2までのID名にてdisplayプロパティをinlineに変更していきました。

#___plusone_0 {
*display: inline !important;
}
#___plusone_1 {
*display: inline !important;
}
#___plusone_2 {
*display: inline !important;
}

そのまま、displayプロパティをinlineに変更するとFireFoxで折り返すようになってしまいます。

ということでスターハックを使って、IEの場合のみ適用されるスタイルにしています。

これで、IEとFireFoxともにGoogle+1ボタンが折り返さず一直線に表示されるようになりました。

なんかもっとスマートなやり方があるんではなかろうかとも思うのですが・・・。

[PR]フレッツ光申込で現金キャッシュバック２万円！！[光ブロードバンドナビ]

[PR]スカパー！おまかせＨＤプランは標準取付け工事無料！故障時は無料で交換！

[PR]お名前.comのホームページ作成ツール★誰でも簡単にWebクリエイターに