FC2ブログの拍手ボタンをCSSで操るには？ * 聖書･神学ブログDevotion Time

11/13 2008

FC2ブログの拍手ボタンをCSSで操るには？

　当ブログがお世話になっている　FC2ブログは、無料で１Gバイトまで使用でき、テンプレート全般を編集できますし、テンプレート中の変数もいじれるし、javascriptファイルもアップできるし、他のサービスとの連携も非常に良いですし、大変重宝しております。

　FC2ブログをスタイルシートで編集するとき、意外と苦労するのが「拍手ボタン」です。テンプレート変数の<%topentry_body>の末尾に、もしくは<%topentry_more>に合致する場合にはこの末尾に自動的に挿入されます。管理画面からボタンの種類と、左・真ん中・右の位置を選択できるだけです。でもやっぱりヘビーユーザーとしては、思いのままにスタイリングしたい！そんな方法が実はあるのです！

　ブログのソースを見ると、FC2がどんなプログラム結果で拍手ボタンを挿入しているかが分かります。たとえば、管理画面においてボタンの位置を右側とした場合には、以下のようなHTMLを吐き出しています。

<div class="fc2_footer" style="text-align: right; vertical-align: middle;">
    <a href="javascript:;" onclick="javascript:window.open('----');">
        <img src="---.gif" style="border: 0pt none ;">
    </a>
</div>
<br>

ということは、fc2_footerというclass名を利用すれば、スタイルシートをいじれるということです！FC2さんのほうで自動的に既存のCSSを読み込ませる、というようなことはされていないようなので、あえてユーザーのためにこのclass名を付けて下さっているようです。これを利用しない手はありませんね！

　私の場合は ～  の中に（つまり、追記リンクをクリックしたときだけ読み込ませるため）、以下のように書き込んでいます。

<style type="text/css"></style>

　そうすると、追記リンクを表示しないときには拍手ボタンが右側に、追記リンクを表示するときには、指定された場所に拍手ボタンが移動します！この記事を見ている方は、このページにおける拍手ボタンの位置が通常と異なることに気づきますよね。お試し下さいね。

ちなみにディフォルトにおいてclass名fc2_footerは、ブログエントリ本文を指定するclass名mainTxtの、直下のdivとして吐き出されますので、positionでabsoluteを指定すると思い通りの位置に動かしやすいでしょう。
さらにちなみに、拍手ボタンには拍手回数が記されていますが、これはあらかじめ拍手回数が挿入されたGIFファイルを、拍手回数にあわせて自動的に読みこんでいるようです。