DIV 要素を横に並べる、など

弱小ブログにとっては貼り付けるのに勇気がいる SNS系ボタン (Twitter、Facebook、はてな等) ですが、とりあえずつけてみました。 今回はそのあたりの話をします。

jQuery.socialbutton プラグイン

jQuery 環境でお手軽に SNS系ボタンを配置できる「jQuery.socialbutton プラグイン」というものが公開されており (ダウンロードページ)、これを利用すれば簡単に SNS系ボタンを用意することができます。 前回のエントリのために jQuery 導入済み (と言ってもインクルードしただけですが) というのも SNS系ボタンの導入を後押ししました。 作者の方に感謝です。

DIV 要素を横に並べる

ところで、サンプルページのソースを見ると以下のように DIV 要素が並んでいます。 socialbutton プラグインを紹介する多くのページでも DIV 要素が使われています。 

<div id="hatena"></div>
<div id="twitter"></div>
<div id="facebook_like"></div>

ところが、ブラウザ表示上はボタンが綺麗に横に並んでいます。 「DIV 要素なのになんで横に並ぶんだー！？」と思い、検索すると「float 属性を指定しましょう」とのこと。 でもその場合は以下のようになるはずですが、スタイルを指定している気配はありません。 

<div id="hatena" style="float: left;"></div>
<div id="twitter" style="float: left;"></div>
<div id="facebook_like" style="float: left;"></div>

種明かしをすると一つ上位の DIV 要素のクラス名を使って横並びの設定が行われているのでした。 

<style>
.block div {
margin-right: 15px;
float: left;
}
</style>
<div class="block">
<div id="hatena"></div>
<div id="twitter"></div>
<div id="facebook_like"></div>
</div>

一つ上位の DIV を「block」クラスとして「block」クラスの子孫 DIV 要素には「float: left;」が適用されるようなスタイルを設定しているのです。 こうすれば個々の DIV に float 属性を設定しないで済みます。 「なるほど！」と思ったテクニックでした。

IE7 で動かない？

「これで横に並べて表示できる！」と喜んだのもつかの間、今度は IE7 で動かないという事象が発生しました。 「エラー: ‘}’がありません。」というエラーが出て、以下のように Twitter ボタンが表示されず、ただのリンクになってしまいます。 Facebook や Hatena は大丈夫です。
SNS ボタン

これも検索して調べたところ、FC2 ブログの文字コードは EUC なので Twitter 用 JS ファイル widgets.js をインクルードする際に「charset="UTF-8"」を設定しなければならないようです。 ところが、socialbutton.js の中で Twitter の widgets.js を読み込むところにこれを付けたり、socialbutton.js を読み込むところにも付けたりしてみましたが、改善されません。 結局どうしたかというと IE7 以下では socialbutton.js を読み込む前に widgets.js を読むようにしました。 具体的には以下のようにしました。 

<!--[if lt IE 8]>
<script type="text/javascript" charset="utf-8" src="http://platform.twitter.com/widgets.js"></script>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/oldimages/socialbutton.js"></script>

widgets.js を２度読むことになりそうなのですが、それでもきちんと動いたので良しとします。

あんまりハマりたくないけれど

JavaScript やら CSS やらをいじるのは何となく ad hoc な感じがしてあんまりハマりたくないのですが、最近の動向を考えるとそうも言っていられない状況です。 なので、昨年ぐらいに参考書として買った「現場のプロから学ぶXHTML+CSS」を読み返しながらブログテンプレートをいじったりしています。

ちょっと紹介するとこの本は「昔は HTML をいじっていたけど今はさっぱり」という私のような人にちょうど良い本です。 結局よく見返すのは１章の XHTML と２章の CSS だったりしますし、最新情報というには出てから間が空いていて、構成も初心者にはどうかという感じですが、この分野はなかなか「最新動向まで加味して体系だてた決定版！」というのが出にくい分野だと思いますので何かしら一冊手元に置いてやっていくのが良いように思います。

前からブログのデザインリニューアルをしたいとは思っているのですがなかなかできず、ちょっとした手直しを続けるようなことになりそうです。 socialbutton のカウンターについては気にし過ぎない、ということで。