--/-- --

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

11/13 2008

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

 当ブログがお世話になっている FC2ブログは、無料で1Gバイトまで使用でき、テンプレート全般を編集できますし、テンプレート中の変数もいじれるし、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名を付けて下さっているようです。これを利用しない手はありませんね!

 私の場合は<!--more--> ~ <!--/more--> の中に(つまり、追記リンクをクリックしたときだけ読み込ませるため)、以下のように書き込んでいます。

<style type="text/css"><!--
    .fc2_footer{position:absolute;float:left;margin:300px 0 0 100px;}
-->
</style>

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

  • ちなみにディフォルトにおいてclass名fc2_footerは、ブログエントリ本文を指定するclass名mainTxtの、直下のdivとして吐き出されますので、positionでabsoluteを指定すると思い通りの位置に動かしやすいでしょう。
  • さらにちなみに、拍手ボタンには拍手回数が記されていますが、これはあらかじめ拍手回数が挿入されたGIFファイルを、拍手回数にあわせて自動的に読みこんでいるようです。
blog comments powered by Disqus
このページのTOPへ
聖書リスニング
DTメンバー募集(無料!)

Devotion Timeのメルマガメンバーになりませんか!メンバー限定企画もあり!ご希望の方はメールアドレスを入力して下さい。(さらに詳しく >>)

Profile

ブロガー: 西原智彦
1972年広島生まれ。ロボットが好きで工学修士に(1996)。聖書に惚れ込み、実践神学修士に(2005)。(さらに詳しく >>)

カテゴリ
お問い合わせフォーム

個人的な感想、ご質問にどうぞ

お名前(ハンドルネームOKです):
メールアドレス:
件名:
本文:

Copyright © Devotion Time All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。