A Day In The Boy's Life

とあるエンジニアのとある1日のつぶやき。


テーマ:

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さんの読者になろう

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

AD

ブログをはじめる

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

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

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

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

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