2011-07-29 00:44:42

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

テーマ:CSS

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

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


A Day In The Boy's Life-Google+1ボタンが折り返して表示される


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



Google+1ボタンが折り返して表示される原因


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


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

A Day In The Boy's Life-Google+1ボタンのスタイル設定


ってことで、このスタイルを変更すればいいんだ(実際、上記の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ボタンが折り返さず一直線に表示されるようになりました。

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





いいね!した人  |  コメント(1)  |  リブログ(0)

itboyさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

コメント

[コメントをする]

1 ■無題

苦肉の策を応用させて頂くと、

<span class="HOGE"><g:plusone href="..."></g:plusone></span>

g:plusone をクラス名を付けたSPAN要素で囲み、

CSSで

.HOGE div {display: inline !important;}

のように指定すればナンバリングが不要になります。

コメント投稿

AD

Ameba人気のブログ

Amebaトピックス

      ランキング

      • 総合
      • 新登場
      • 急上昇
      • トレンド

      ブログをはじめる

      たくさんの芸能人・有名人が
      書いているAmebaブログを
      無料で簡単にはじめることができます。

      公式トップブロガーへ応募

      多くの方にご紹介したいブログを
      執筆する方を「公式トップブロガー」
      として認定しております。

      芸能人・有名人ブログを開設

      Amebaブログでは、芸能人・有名人ブログを
      ご希望される著名人の方/事務所様を
      随時募集しております。