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

ランキング2

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

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

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

FC2が提供している拍手には2種類ある

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

ブログ拍手

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

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

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

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

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

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

FC2拍手

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

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

移行時の問題点

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

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

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

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

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

ブログ拍手からFC2拍手へ移行する

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

1.ブログ拍手データのバックアップ

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

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

ブログ拍手の管理

2.FC2拍手に登録・設定

FC2拍手に利用登録します
FC2拍手の管理メニュー
FC2拍手の管理メニュー
マイサービスからFC2拍手へ
FC2ブログのマイサービス

FC2ブログのユーザーは、ブログ管理画面右上のマイサービスメニューの[拍手]からも行けます。(右図) FC2ブログユーザー以外でも登録できます。 右側は「FC2拍手」の管理画面のメニューです。 ブログ拍手の解析やコメントも見ることができるのがわかります。

②FC2拍手の設定を行う

FC2拍手管理ページの[拍手の設定]で

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

Fc2拍手の設定FC2拍手の[拍手の設定]

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

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

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

3.ブログにFC2拍手を設置

①タグを作成

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

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

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

<div class="entry_body">
   <%topentry_body>
   <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" />
<a href="<%topentry_link>" title="<%template_extend>"><template_extend></a>
   <!--/more_link-->
   <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" />
<div id="more"><%topentry_more></div>
<!--/more-->
   <span style="float: right; margin-right:5px; margin-left:5px"> 
      <!-- FC2拍手タグここから -->
      <a href="http://clap.fc2.com・・・
         ~省略~
           ・・alt="web拍手 by FC2" style="border:none;" /></a>
      <!-- FC2拍手タグここまで -->
  </span>  
</div>
<!--/entry_body-->
両方の拍手を表示1
両方の拍手が表示された

10-14行目がFC2拍手で作成した「FC2拍手タグ」で、右寄せと改行で表示位置を調整しています。
結果、画面では右のように表示されます。黄色はブログ拍手、白が追加したFC2拍手です 。

なお、私はFC2公式テンプレートの「ビジネス」を元にしていますが、他のテンプレートでは変わってくるかもしれません。

4.拍手の数をFC2拍手に入力して引き継ぐ

自動で引継ぎができないので手入力しますが、通常一度拍手した記事には連続して拍手できません。24時間以上経過すればできますが、拍手が多い記事は大変です。  それで前々項で

もっと送る
お礼ページの「もっと送る」ボタン

①お礼ページを作成・設定
②[拍手を無制限にする]を[する]に設定

の2つを準備しておいたのですが、ここでは以下の作業を行います。

③拍手を設定したい記事に自分で拍手する

ブログトップの記事一覧画面で、「ブログ拍手」ボタンに数値がある記事に自分で「FC2拍手」をします。  すると、右のようにお礼ページが表示されますが、前記2項が設定されていれば[もっと送る]ボタンがあります。拍手が2以上の時は、これを使って目的の数まで増やします。
これをブログ拍手があった記事全てについて行います。私はエクセルで記録しておいた数を参照し、チェックしながら行いました。

④FC2拍手の[拍手を無制限にする]を[しない]に設定する

拍手の数の入力が終われば、いたずら防止のため戻しておきます。

5.ブログ拍手の表示を消す

ブログ拍手を消す設定
ブログ拍手を消す設定

ここまで2種類の拍手を表示していましたが、もう「ブログ拍手」は不要ですので消します。
FC2ブログの[環境設定]-[ブログ拍手の設定]で、[拍手ボタンの設定]を[なし]に設定します。(右図)

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

拍手ランキングの表示

FC2拍手に移行できたので、次に目的の拍手ランキングを作成します。

1.ランキングページを作成

ランキング例
ランキング作成例

サイドバーなどに右のような小さなランキング表を追加しても良いのですが、私は大きい表でたくさん表示したかったので別ページにしました。サイドバーにはリンクを貼ります。

ランキングリストは、新しい記事を起こしてその文章内に貼り付けます。

 ①FC2拍手のページでランキングリストの部品を作成

[拍手タグ/ブログパーツ]-[ブログパーツ作成]の画面で、[表示件数]は最高の20、[ブログパーツの色]は「カスタム」にして、後でスタイルシートでカスタマイズします。

②新しい記事を作成して上記ランキングリストのデータを貼り付ける

 プレビュー画面でランキング表が表示されることを確認します。スタイルシートの設定をするまでは標準の小さな形です。

③記事タイトルを入力

私は「拍手ランキング TOP20」に』しました。

④記事日付を一番古くする

記事一覧で最初に出てこないようにするためです。

2.スタイルシートでカスタマイズ

私のカスタマイズした例です。
注釈を入れましたので何処をさわれば良いかわかるでしょう 。変更したのはタイトルのバックの色、表の幅、各列の幅の比率、順位の文字色、タイトルの左寄せ、余白 等です。
【3月3日追記】更に後述の変更も加えて最終のものに更新しました。

/* 拍手ランキング */
#fc2clap_rank_table { /* 外枠 */
border-collapse: collapse;
width: 600px; /*表の横幅 */
color: #8E8E8E;
font-family: "Verdana","Impact","MS Pゴシック","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 { /* 各順位横1行 */
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の最後に貼り付けます。

3.サイドメニューにリンクを作成

私の場合プラグインのフリーエリアを使い、全記事リストとアクセスランキングのリンクをサイドメニューに置いていましたので、ここに拍手ランキングページへのリンクを追加しました。 下が、フリーエリアのHTMLに入力している内容です。

<li &align>
<a href="<%url>archives.html">全記事の目次一覧表示(日付順)</a>
</li>
<li &align>
<a href="http://11752544.ranking.fc2.com/?rtype=page" title="月間アクセスランキング" />月間アクセスランキング</a>
</li>
<li &align> 
<a href="http://e-farm.org/blog-entry-301.html" title="拍手ランキング">拍手ランキング</a>
</li>

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

4.ランキングページをカテゴリから隠す

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

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

私が使っている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. ページナビのうち、前後に移動ボタン

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

表の背景や上部の表示を改善 【2015.3.3追記】

表の背景を一行ごとに変える

一行ごとに背景色を変えて、見栄えをアクセスランキングと統一しました。
やり方は、スタイルシートの一行分指定の部分を以下のようにします。

#fc2clap_rank_table tr.fc2clap_rank_form { /* 各順位横1行 */
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に追加して消すことができました。 以上により、下のようなランキング表示ができました。

できたランキング表示

スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る