[FC2ブログ]記事の拍手ランキングを追加

ブログをやっていて励みになるのは、「アクセスカウンタ」と「拍手」です。

それでアクセス数と同じように、記事の拍手ランキングを集計したいと思い調べたところ、これまで使ってきた「ブログ拍手」ではできないことがわかり、同じくFC2提供の「FC2拍手」に乗換えて拍手のランキング集計を実現しました。

【追記】下記の改善を追加しました
1．以下の不要な表示をしないようにしました。（2015.2.25）
①ユーザータグ、②拍手ボタン、③トラックバック、④コメント、⑤ページナビの前後に移動ボタン
2．表の背景を一行ごとに変えて見やすくしました（2015.3.3）

ＦＣ２が提供している拍手には２種類ある
ブログ拍手からＦＣ２拍手へ移行する
拍手ランキングの表示

ＦＣ２が提供している拍手には２種類ある

同じ外観のボタンなのに、「ブログ拍手」と「ＦＣ２拍手」の区別があるなんて、少し前まで知りませんでした。

ブログ拍手

FC2ブログの管理画面の[環境設定]から設定すると自動で挿入されるものです。

拍手ランキングの機能はない
表示位置はあらかじめ決まっている

[テンプレート編集]のHTMLには記載が無く、位置は必ず[記事フッター]の前に挿入されるので、自分で変えることはできません。
表示位置は、個別記事（１頁ページに１記事）でいうと

[記事ヘッダー]＋[本文]＋[追記]＋[ブログ拍手]＋[記事フッター]

の構成並びとなる
記事一覧（１頁ページに複数記事）のときは、[追記]の部分がないだけで同じ位置に現れる。

なお、ビジネスなど多くの公式テンプレートでは、[ブログ拍手]のほか、[ジャンル]なども表示されるが、これはHTMLに記述されているので、場所を変更したり削除したりすることができる。

ＦＣ２拍手

同じくFC2提供のサービスですが、ブログ拍手に比べ次の特長がある

FC2ブログ以外でも使える
タグをHTML文書内に組み込むので、表示位置や他のタグとの組み合わせなど自由になる
ランキング機能が提供されている

ブログ拍手からFC2拍手へ移行時の問題点

このように「FC2拍手」のほうが利点が多いので、これから拍手を設置する人は「FC2拍手」がお勧めです。とはいっても私もそうだったが、初心者にとって手軽な「ブログ拍手」でスタートしてしまっている方が多いだろう。

そして後でFC2拍手を知って移行したくなるわけだが、調べると移行はすんなりとは行かなくて次の問題がある。

拍手数の引継ぎができない
拍手のコメントが引継ぎできない

これらの問題点を改善するよう、FC2に対して多数の方から要望が出ているが、一向に実現しないのが実情である。前者は今の拍手数を記録しておき移行後手動で設定ということが、手間をかければできる。後者はどうしようもない。

なお、引継ぎはできないが消えてしまうわけでなく、FC2拍手の管理画面から両方のデータを見ることができる。

ブログ拍手からＦＣ２拍手へ移行する

拍手ランキングを実現したいので、手間を覚悟でFC2拍手に移行することにしました。

１．ブログ拍手データのバックアップ

手入力に備え、現状の拍手数をバックアップします。

全記事リストをエクセルにコピー
私の場合記事が170ほどありますので2頁分です。
拍手の数を調べて記録
ブログトップページの日付順の記事で記事ごと拍手の数を調べ、上記エクセルの表に記録していく
ブログ拍手の総数を確認
エクセルで合計の数を計算し、ブログ拍手の管理の総数（下図）とあっているか確認する。

２．FC2拍手に登録・設定

①FC2拍手に利用登録します

FC2拍手の管理メニュー

FC2ブログのマイサービス

FC2ブログのユーザーは、ブログ管理画面右上のマイサービスメニューの[拍手]からも行けます。（右図） FC2ブログユーザー以外でも登録できます。

右側は「FC2拍手」の管理画面のメニューです。ブログ拍手の解析やコメントも見ることができるのがわかります。

②FC2拍手の設定を行う

FC2拍手管理ページの［拍手の設定］で

［拍手数］の表示を［表示する］に設定　（下図の緑枠）
［拍手送信の無制限］を［する］に設定　（下図の青枠）
（これは仮の設定で、最終的には［しない］に戻します）

FC2拍手の［拍手の設定］

③お礼ページのの作成と設定

FC2拍手の［PC用お礼ページの設定］でお礼ページを作成します。

①③の詳細は省略しますが、やってみればわかるというところです。

３．ブログにFC2拍手を設置

①タグを作成

FC2拍手管理ページで作成します。サイト用とブログ用がありますが、記事ごとに拍手ボタンをおくときはブログ用を作成します。
これまでの「ブログ拍手」と区別するため、色を変えたほうがよいでしょう。

②タグを入れる場所を探す

記事を書くごと記事内に埋め込むこともできますが、テンプレートのHTML編集で中に入れて各記事共通で表示できる所を探しました。
いくつか入れる所を試行錯誤して表にされる位置を確認します。私は結局、現状と同じ位置に表示することにしました。
下がテンプレートのHTMLの該当部分で、色を付けている9-15行目が挿入した文章です。

&amp;amp;amp;lt;div class="entry_body"&amp;amp;amp;gt;
   &amp;amp;amp;lt;%topentry_body&amp;amp;amp;gt;
   &amp;amp;amp;lt;img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-more="more" data-wp-more-text="_link" class="wp-more-tag mce-wp-more" alt="" title="続きを読む..." data-mce-resize="false" data-mce-placeholder="1" /&amp;amp;amp;gt;
&amp;amp;amp;lt;a href="&amp;amp;amp;lt;%topentry_link&amp;amp;amp;gt;" title="&amp;amp;amp;lt;%template_extend&amp;amp;amp;gt;"&amp;amp;amp;gt;&amp;amp;amp;lt;template_extend&amp;amp;amp;gt;&amp;amp;amp;lt;/a&amp;amp;amp;gt;
   &amp;amp;amp;lt;!--/more_link--&amp;amp;amp;gt;
   &amp;amp;amp;lt;img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-more="more" data-wp-more-text="" class="wp-more-tag mce-wp-more" alt="" title="続きを読む..." data-mce-resize="false" data-mce-placeholder="1" /&amp;amp;amp;gt;
&amp;amp;amp;lt;div id="more"&amp;amp;amp;gt;&amp;amp;amp;lt;%topentry_more&amp;amp;amp;gt;&amp;amp;amp;lt;/div&amp;amp;amp;gt;
&amp;amp;amp;lt;!--/more--&amp;amp;amp;gt;
   &amp;amp;amp;lt;span style="float: right; margin-right:5px; margin-left:5px"&amp;amp;amp;gt;
      &amp;amp;amp;lt;!-- FC2拍手タグここから --&amp;amp;amp;gt;
      &amp;amp;amp;lt;a href="http://clap.fc2.com・・・
 　　　　　　　　～省略～
 　　　　　　　　　 ・・alt="web拍手 by FC2" style="border:none;" /&amp;amp;amp;gt;&amp;amp;amp;lt;/a&amp;amp;amp;gt;
      &amp;amp;amp;lt;!-- FC2拍手タグここまで --&amp;amp;amp;gt;
  &amp;amp;amp;lt;/span&amp;amp;amp;gt;
&amp;amp;amp;lt;/div&amp;amp;amp;gt;
&amp;amp;amp;lt;!--/entry_body--&amp;amp;amp;gt;


両方の拍手が表示された
10-14行目がFC2拍手で作成した「FC2拍手タグ」で、右寄せと改行で表示位置を調整しています。

結果、画面では右のように表示されます。黄色はブログ拍手、白が追加したFC2拍手です 。
なお、私はFC2公式テンプレートの「ビジネス」を元にしていますが、他のテンプレートでは変わってくるかもしれません。

４．拍手の数をFC2拍手に入力して引き継ぐ
自動で引継ぎができないので手入力しますが、通常一度拍手した記事には連続して拍手できません。24時間以上経過すればできますが、拍手が多い記事は大変です。 　それで前々項で
お礼ページの「もっと送る」ボタン
①お礼ページを作成・設定

 ②［拍手を無制限にする］を［する］に設定
の2つを準備しておいたのですが、ここでは以下の作業を行います。

③拍手を設定したい記事に自分で拍手する
ブログトップの記事一覧画面で、「ブログ拍手」ボタンに数値がある記事に自分で「FC2拍手」をします。 　すると、右のようにお礼ページが表示されますが、前記2項が設定されていれば［もっと送る］ボタンがあります。拍手が2以上の時は、これを使って目的の数まで増やします。

これをブログ拍手があった記事全てについて行います。私はエクセルで記録しておいた数を参照し、チェックしながら行いました。
④FC2拍手の［拍手を無制限にする］を［しない］に設定する
拍手の数の入力が終われば、いたずら防止のため戻しておきます。
５．ブログ拍手の表示を消す
ブログ拍手を消す設定
ここまで2種類の拍手を表示していましたが、もう「ブログ拍手」は不要ですので消します。

FC2ブログの[環境設定]-[ブログ拍手の設定]で、[拍手ボタンの設定]を[なし]に設定します。（右図）
ここでトラブル発生。 一部の記事に、消したはずのブログ拍手が残っています。 おかしいなと思って、拍手が残っている記事の編集で何も変更せず[保存]したら直りました。FC2側のバグのようです。他のブログ拍手が残った記事も全てこの方法で消しました。

拍手ランキングの表示
FC2拍手に移行できたので、次に目的の拍手ランキングを作成します。
１．ランキングページを作成
ランキング作成例
サイドバーなどに右のような小さなランキング表を追加しても良いのですが、私は大きい表でたくさん表示したかったので別ページにしました。サイドバーにはリンクを貼ります。
ランキングリストは、新しい記事を起こしてその文章内に貼り付けます。

①FC2拍手のページでランキングリストの部品を作成
［拍手タグ/ブログパーツ］-［ブログパーツ作成］の画面で、［表示件数］は最高の20、［ブログパーツの色］は「カスタム」にして、後でスタイルシートでカスタマイズします。
②新しい記事を作成して上記ランキングリストのデータを貼り付ける
プレビュー画面でランキング表が表示されることを確認します。スタイルシートの設定をするまでは標準の小さな形です。
③記事タイトルを入力
私は「拍手ランキング TOP２０」に』しました。
④記事日付を一番古くする
記事一覧で最初に出てこないようにするためです。
２．スタイルシートでカスタマイズ
私のカスタマイズした例です。

注釈を入れましたので何処をさわれば良いかわかるでしょう 。変更したのはタイトルのバックの色、表の幅、各列の幅の比率、順位の文字色、タイトルの左寄せ、余白 等です。

【3月3日追記】更に後述の変更も加えて最終のものに更新しました。
/* 拍手ランキング */
#fc2clap_rank_table { /* 外枠 */
border-collapse: collapse;
width: 600px; /*表の横幅 */
color: #8E8E8E;
font-family: "Verdana","Impact","ＭＳ Ｐゴシック","Hiragino Kaku Gothic Pro","ヒラギノ Pro W3","Osaka";
font-size: 13px;
border: 1px solid #cccccc;
vertical-align: baseline;
margin: 10px 1px;
table-layout: auto;
}
#fc2clap_rank_table tr.fc2clap_rank { /* 表上下のFC2拍手へのリンク表示 */
background-color: #e1e1de;
text-align: center;
border: 1px solid #cccccc;
padding: 3px 3px;
}
#fc2clap_rank_table tr.fc2clap_rank:nth-child(1) { /* 上部のみ */
display:none;
}
#fc2clap_rank_table span.fc2clap_rank_main { /* 表メイン部 */
color: #FFFFFF;
/* font-weight: bold; */
padding: 3px 3px;
}
#fc2clap_rank_table tr.fc2clap_rank_item { /* 見出し内 */
background-color: #e1e1de;
font-weight: bold;
text-align: center;
color: #4D4D4D;
border: 1px solid #cccccc;
padding: 3px 0;
}
#fc2clap_rank_table td.fc2clap_rank_items_rank { /* 見出し（順位） */
border: 1px solid #cccccc;
width: 11%;
}
#fc2clap_rank_table td.fc2clap_rank_items_title { /* 見出し（タイトル） */
border: 1px solid #cccccc;
width: 74%;
}
#fc2clap_rank_table td.fc2clap_rank_items_clap { /* 見出し（拍手数） */
border: 1px solid #cccccc;
width: 15%;
}
#fc2clap_rank_table td.fc2clap_rank_items1 { /* 順位 */
border: 1px solid #cccccc;
text-align: center;
}
#fc2clap_rank_table span.fc2clap_rank_namber { /* 順位数文字色 */
color: #3a3a3a;
/*  font-weight: bold; */
}
#fc2clap_rank_table tr.fc2clap_rank_form { /* 各順位横１行 */
background-color: #f1f1cd; /* 各行のの背景色　IE7以下用 */
border: 1px solid #cccccc;
padding: 3px 3px;
}
#fc2clap_rank_table tr.fc2clap_rank_form:nth-child(odd) { /* 奇数行の背景色 */
background-color: #fafaed;
}
#fc2clap_rank_table tr.fc2clap_rank_form:nth-child(even) { /* 偶数行の背景色 */
background-color: #eaeadd;
}
#fc2clap_rank_table td.fc2clap_rank_clap { /* 拍手数 */
padding: 3px 5px;text-align: right;
width: 26%;
border:1px solid #cccccc;
}
#fc2clap_rank_table span.fc2clap_name { /* 拍手数配色 */
color: #FF0000;
/*  font-weight: bold; */
}
#fc2clap_rank_table td.fc2clap_rank_items { /* タイトル */
padding: 3px 5px;text-align: left; border: 1px solid #cccccc;
}
#fc2clap_rank_table span.fc2clap_rank_title a { /* タイトル文字色 */
color: #1144aa;
}
/* 拍手ランキング　ここまで */

これをテンプレートのCSSの最後に貼り付けます。

３．サイドメニューにリンクを作成
私の場合プラグインのフリーエリアを使い、全記事リストとアクセスランキングのリンクをサイドメニューに置いていましたので、ここに拍手ランキングページへのリンクを追加しました。 下が、フリーエリアのHTMLに入力している内容です。
&amp;amp;amp;lt;li &amp;amp;amp;amp;align&amp;amp;amp;gt;
&amp;amp;amp;lt;a href="&amp;amp;amp;lt;%url&amp;amp;amp;gt;archives.html"&amp;amp;amp;gt;全記事の目次一覧表示(日付順)&amp;amp;amp;lt;/a&amp;amp;amp;gt;
&amp;amp;amp;lt;/li&amp;amp;amp;gt;
&amp;amp;amp;lt;li &amp;amp;amp;amp;align&amp;amp;amp;gt;
&amp;amp;amp;lt;a href="http://11752544.ranking.fc2.com/?rtype=page" title="月間アクセスランキング" /&amp;amp;amp;gt;月間アクセスランキング&amp;amp;amp;lt;/a&amp;amp;amp;gt;
&amp;amp;amp;lt;/li&amp;amp;amp;gt;
&amp;amp;amp;lt;li &amp;amp;amp;amp;align&amp;amp;amp;gt;
&amp;amp;amp;lt;a href="https://e-farm.org/blog-entry-301.html" title="拍手ランキング"&amp;amp;amp;gt;拍手ランキング&amp;amp;amp;lt;/a&amp;amp;amp;gt;
&amp;amp;amp;lt;/li&amp;amp;amp;gt;

7-9行目が拍手ランキングへのリンクです。 これで、サイドメニューから拍手ランキングのページが見られるようになりました。

４．ランキングページをカテゴリから隠す
ランキングページは普通の記事とは違うので、サイドメニューのカテゴリから見えないように隠しておきます。

例えば「非表示」という新しいカテゴリを作り、拍手ランキングの記事をそのカテゴリに入れる。
「非表示」カテゴリを表示しないように、スタイルシートで指定する。

私が使っているLc.ツリーの場合、下記をCSSの最後に追加します。
/* Lc．ツリー */
#lc_cat_no_row_18 {display:none;}  /* 数字のカテゴリを非表示 */
/* Lc．ツリー　ここまで */

数字（18)はカテゴリーナンバーで、そのカテゴリの記事リストを表示したときにURLに現れる数字です。
なお、「Lc.ツリー」はFC2ブログの共有プラグインで、カテゴリーをツリー表示してくれます。非常に多機能ですが、上記以外は標準のまま使わせてもらっています。詳細は本家Lc-Factory＠FC2ブログ/Lc.ツリーカテゴリーを参照ください。
これで、拍手関係の一連のブログ改造が終わりました。ほぼ希望通り拍手ランキングの表示ができるようになり、ひとまず満足です。

余分な表示を消す【2015.2.25追記】
拍手ランキングは特殊ページなので、一般の個別記事にある

ユーザータグ
拍手ボタン
トラックバック
コメント
ページナビのうち、前後に移動ボタン

の部品を消してスッキリさせたいと思いました。

1,、2は、上記「カテゴリから隠す」と同様に、スタイルシートに記事番号（またはカテゴリ）指定で表示しない記述を追加してできました。 3、4、5はその方法ではできなくてあきらめていたのですが、あるブログに紹介されている方法で実現できました。そのうちに紹介したいと思います。

表の背景や上部の表示を改善 【2015.3.3追記】
表の背景を一行ごとに変える
一行ごとに背景色を変えて、見栄えをアクセスランキングと統一しました。

やり方は、スタイルシートの一行分指定の部分を以下のようにします。
#fc2clap_rank_table tr.fc2clap_rank_form { /* 各順位横１行 */
background-color: #f1f1cd;  /* 従来の背景色指定　IE7以下用に残す */
border: 1px solid #cccccc;
padding: 3px 3px;
#fc2clap_rank_table tr.fc2clap_rank_form:nth-child(odd) { background-color: #fafaed; /* 奇数行の色 */ }
#fc2clap_rank_table tr.fc2clap_rank_form:nth-child(even) { background-color: #eaeadd; /* 偶数行の色 */ }

5-6行目が追加した記述で、奇数・偶数行別に背景色を指定しています。ただ、IE7以前はこの機能に対応していないので動作しません。このため従来の背景色指定も残しておきます。
上部の「FC2拍手ランキング-人気！」を消す
表の上に「FC2拍手ランキング-人気！」が表示されるのを消したいと思います。

CSSでは「#fc2clap_rank_table tr.fc2clap_rank」という指定がその部分なのですが、下の「powerd by FC2拍手」も共通になっています。「powerd by FC2拍手」は消すとまずそうなので、以下のように「nth-child(1)」で上部だけ指定して表示しないようにします。
#fc2clap_rank_table tr.fc2clap_rank:nth-child(1) { /* 上部のみ */
  display:none;
}

これをCSSに追加して消すことができました。 以上により、下のようなランキング表示ができました。