彼此ともつかぬ場所


□ スポンサー広告 □

スポンサーサイト

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




*    *    *

Information

□ 雑記 □

ブログパーツ「FC2拍手ランキング」カスタマイズ記

 自分のブログ内の記事タイトルを、拍手の多い順に表示する事の出来るブログパーツ「FC2拍手ランキング」の、スタイルシートがユーザーサイドでカスタマイズ出来るようになったようです。

 FC2拍手の管理画面で「ブログパーツ作成」をクリックしてみれば、

カスタム
直接スタイルシートを記述できる上級者向けのカスタマイズモードです。

……とありました。
 どこをどういう風にカスタマイズ出来るのかな、と思ったら、FC2拍手の管理画面上では、ブログパーツのサンプルスタイルシートが提示されるのみ。このサンプルCSSに出てくるクラス名やID名を参考にして、各々自分でスタイルを設定して、そのCSSの記述をブログテンプレートに追加してね、という、実に漢らしいシステムとなっていました。

 これはこれでイイかも。ちょっと面倒くさいけど、かなり好きに改造出来そう。
 という事で、早速嬉しがってチャレンジしました。

 ブログパーツのタグを作成、フリーエリアのプラグインにそのタグをコピーして貼り付け。
 CSSを何も設定しないままプラグインを表示させてみると、こんな感じになりました。

 スクリプトを読んでみたら、ブログパーツの表のHTMLは以下のようになっていました。

<table id="fc2clap_rank_table">
  <tr class="fc2clap_rank">
    <td colspan="3"><span class="fc2clap_rank_main">FC2拍手<a href="http://clap.fc2.com/ranking" target="_blank">ランキング</a> - 人気!</span></td>
  </tr>
  <tr class="fc2clap_rank_item">
    <td class="fc2clap_rank_items_rank" width="16%">順位</td>
    <td class="fc2clap_rank_items_title" width="58%">タイトル</td>
    <td class="fc2clap_rank_items_clap" width="28%">拍手数</td>
  </tr>
  <tr class="fc2clap_rank_form">
    <td class="fc2clap_rank_items1"><span class="fc2clap_rank_namber">1</span>位</td>
    <td class="fc2clap_rank_items"><span class="fc2clap_rank_title"><a class="" href="1位の記事のURL">1位の記事のタイトル</a></span></td>
    <td class="fc2clap_rank_clap"><span class="fc2clap_name">拍手数</span>拍手</td>
  </tr>
  <tr class="fc2clap_rank_form">
    <td class="fc2clap_rank_items1"><span class="fc2clap_rank_namber">2</span>位</td>
    <td class="fc2clap_rank_items"><span class="fc2clap_rank_title"><a class="" href="2位の記事のURL">2位の記事のタイトル</a></span></td>
    <td class="fc2clap_rank_clap"><span class="fc2clap_name">拍手数</span>拍手</td>
  </tr>
   (以下、設定したランクの数だけ繰り返し)
  <tr class="fc2clap_rank">
    <td colspan="3"><span class="fc2clap_rank_main">powered by <a href="http://fc2.com" target="_blank">FC2</a> <a href="http://clap.fc2.com" target="_blank">拍手</a></span></td>
  </tr>
</table>


 現時点のブログパーツには、テンプレートで設定したプラグイン用のスタイルのみが反映されているようです。
 つまり、上のHTMLに出てくるクラスやIDは白紙状態。イチから自由にスタイルを設定しろ、というわけなんですね。

 ここからは、完全に筆者個人の趣味の話です。

 表の罫線を指定するのが面倒なので背景色でセルを区切ってしまおう。
 セル内の文字は上に寄せたい。
 順位とか拍手数とか、別に文字の色変えしなくてもいいや。
 いや、いっそ順位要らないから、記事タイトルを広々と表示したい。
 ああ、そのためには項目見出しのセル幅指定が邪魔だな。
 なら、ついでに項目見出しも表示させないでおこう。

 そんなこんなで、テンプレートに付け加えたCSSが以下の通り。

/* FC2拍手 */
#fc2clap_rank_table { border-spacing:0px 3px; }
.fc2clap_rank_item { display:none; }
.fc2clap_rank_items1 { display:none; }
.fc2clap_rank_form { vertical-align:top; background-color:#666666; }
.fc2clap_rank_clap { text-align:right; width:4em; }


 これらを簡単に解説すると、
 一行目:セルの左右は隙間なく、セルの上下に 3px の隙間
 二行目:「順位」「タイトル」「拍手数」の見出し行を非表示
 三行目:「順位」の列を非表示
 四行目:ランキング本体部分の文字を上寄せ。ついでに背景色変更
 五行目:「拍手数」の列は文字を右寄せに、セルの幅を全角四文字分に指定

 実際の表示はこんな感じとなりました。


 ついでに、以前にブログ拍手でいただいていた分のカウントを、FC2拍手へ手作業で移行しました。
 というのも、「当ブログ内のどの記事に反響があるのか」という統計をとるに際して、これまでのブログ拍手の数を無視してしまうのは得策ではない、と思ったからです。

 過去記事のブログ拍手数を厳密にカウントするために、一度ブログ拍手を復活させました。そうでもしないと、どの記事にどれだけの拍手があるのか、ブログ拍手の管理画面からは窺い知れないもので。
 で、拍手ボタンが二つ並んでいるのは怪しいので、

.fc2_footer { display:none; }

と、スタイルシートに追加して、ブログ拍手ボタンを非表示に。
 それから、ブラウザの表示設定でスタイルシートをオフにして上記非表示設定を解除。あとは、各々の記事で、ブログ拍手ボタンに表示された拍手の数だけ、ちまちまFC2拍手ボタンをクリック、クリック……。
 ……我ながら、ヒマだなあ、と思います。


 ブログ拍手のデータが、FC2拍手に持ち越せたら良かったんですけれど、ね。



*    *    *

Information

Date:2009/10/24
Trackback:0
Comment:0

Comment

コメントの投稿

コメント書き込みの前に、是非一度「コメントについて」に目をお通しください。







 ブログ管理者以外には秘密にする

Trackback

TrackbackUrl:http://greenbeetle2.blog117.fc2.com/tb.php/74-6e46df18
この記事にトラックバックする(FC2ブログユーザー)

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