FC2拍手ランキングブログパーツのテーブルデザインをリストに変更
- 2010-08-10 火 00:57
- FC2ブログ
『powered by FC2 拍手』の広告部分を消さなければ、自己責任でカスタマイズしても構わないとの回答を問い合わせから確認済みです。FC2ブログやFC2ホームページなどのFC2サービスに拍手を設置する場合でも広告表示は必須とのことです。
FC2の広告はそのまま使います（テキストやアドレスに変更があったとしても継承）。一応、FC2側の不具合にも対処しています。
- 方法
- 拍手数後のテキスト clap を削除・変更する
- 拍手数を記事タイトルの前に表示する
- FC2拍手の利用手順 - FC2ブログ向け
- デザインについて
- デザインサンプル
- ご利用にあたって・更新履歴 2010 08-10
方法
（ブログパーツ作成より取得した）拍手ランキングのコードの直後に次のコードを貼り付けます。
<!-- FC2拍手ブログパーツここから -->
<script type="text/javascript" charset="utf-8" src="http://clap.fc2.com/parts/ranking?name=名前&url=アドレス&mode=形式&color=custom&width=幅&limit=件数&utf8&lang=ja"></script>
<!-- FC2拍手ブログパーツここまで -->
<script type="text/javascript">
function fclapRank(e,c) {
var _d=document,t=_d.getElementById('fc2clap_rank_table');if(!t){return;}
var a=t.getElementsByTagName('a'),ul=_d.createElement('ul');
for(var i=1,nb=' ';i<a.length-2;i++){
var s=a[i].parentNode.parentNode.nextSibling.getElementsByTagName('span')[0];
var ac=a[i],li=_d.createElement('li');ul.appendChild(li);
var w=ac.getElementsByTagName('wbr');
while(w[0]){ac.removeChild(w[0]);}
ac.innerHTML=ac.innerHTML.replace(/&/g,'&');li.appendChild(ac);
var sp=_d.createElement('span');sp.className='fc2clapNum';sp.appendChild(s);
sp.innerHTML=nb+sp.innerHTML+c+nb;
if(e===0){li.appendChild(sp);}else{li.insertBefore(sp,li.firstChild);}i--;
}
var p=_d.createElement('p'),td=t.getElementsByTagName('td'),
ps=td[td.length-1].getElementsByTagName('span')[0];p.appendChild(ps);
if(a[0].href.indexOf('clap.fc2.com')<0){a[0].href='http://clap.fc2.com/ranking';}
ps.appendChild(_d.createTextNode(' '));ps.appendChild(a[0]);
p.id='fcadClap';t.parentNode.insertBefore(p,t);
t.parentNode.insertBefore(ul,p);t.parentNode.removeChild(t);
ul.id='fc2clapRank';
}
fclapRank(0,'clap');
</script>
するとリスト表示されます。あとはテンプレートのスタイルシート欄に以下のコードを追加して、デザインを整えます。リストのマークなどは使用しているテンプレートに依存します。
ul#fc2clapRank {
margin-bottom: 0.5em;
}
ul#fc2clapRank li {
}
#fc2clapRank .fc2clapNum { /* 拍手部分 */
margin: 0 0px 0 3px;
color: #ee7000; background: #fff3d0;
font-family: arial; font-size: 11px;
white-space: nowrap;
}
#fc2clapRank .fc2clap_name { /* 拍手数 */
font-weight: bold; margin-right: 1px;
}
#fcadClap{ /* FC2広告 */
margin: 0.3em 0 0;
font-size: 10px; text-align: right;
}
■マークアップサンプル（見やすくするために改行などを入れています）
<ul id="fc2clapRank"> <li> <a href="URI" class="wordBreak">タイトル</a> <span class="fc2clapNum"> <span class="fc2clap_name">拍手数</span>clap </span> </li> <li> <a href="URI" class="wordBreak">タイトル</a> <span class="fc2clapNum"> <span class="fc2clap_name">拍手数</span>clap </span> </li> </ul> <p id="fcadClap"> <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> <a href="http://clap.fc2.com/ranking" target="_blank">ランキング</a> </span> </p>
赤字の広告部分はそのまま使うので、中身のテキストやアドレスに変更があったとしてもそのまま継承します。
JavaScriptのコードはできるかぎりjsファイル内に追加することを推奨します。
外部jsファイル内にコードを追加する場合は function fclapRank(e,c) { から 末尾の } までをコピー貼り付け。残りをFC2拍手ブログパーツの後に置きます（head要素内にjsファイルを設置している場合）。
<!-- FC2拍手ブログパーツここから --> <script type="text/javascript" charset="utf-8" src="http://clap.fc2.com/parts/ranking?name=名前&url=アドレス&mode=形式&color=custom&width=幅&limit=件数&utf8&lang=ja"></script> <!-- FC2拍手ブログパーツここまで --> <script type="text/javascript"> fclapRank(0,'clap'); </script>
拍手数後のテキスト clap を削除・変更する
追加したコードの最後にある clap に変更後のテキストを入れます。
■122clap
fclapRank(0,'clap');
■122拍手
fclapRank(0,'拍手');
■122（数値だけ）
fclapRank(0,'');
拍手数を記事タイトルの前に表示する
追加したコードの最後にある 0 を変更します。
■記事タイトル 122clap
fclapRank(0,'clap');
■122clap 記事タイトル （0を1に変更）
fclapRank(1,'clap');
拍手数を前に表示するときは、前後のスペースをスタイルシートで調整します。3px が右側の余白になります。
#fc2clapRank .fc2clapNum{
margin: 0 3px 0 0px;
color: #ee7000; background: #fff3d0;
font-family: arial,'ＭＳ Ｐゴシック'; font-size: 11px;
white-space: nowrap;
}
デザインについて
■拍手数が記事タイトルと重なるときは line-height を入れて調整します。1.2～2.0など。
ul#fc2clapRank li {
line-height: 1.5; /* 行間 */
}
変わらないときは !important を追加します。
line-height: 1.5 !important; /* 行間 */
■拍手数のフォントをテンプレートに合わせるときは font-family を削除します。
#fc2clapRank .fc2clapNum { /* 拍手部分 */
margin: 0 0px 0 3px;
color: #ee7000; background: #fff3d0;
font-size: 11px;
white-space: nowrap;
}
■拍手数の太字を変更するときは font-weight を bold から normal にします。
#fc2clapRank .fc2clap_name { /* 拍手数 */
font-weight: normal; margin-right: 1px;
}
■拍手数の左余白を増やすときは。拍手部分の margin を調整します。
#fc2clapRank .fc2clapNum { /* 拍手部分 */
margin: 0 0px 0 5px;
color: #ee7000; background: #fff3d0;
font-family: arial; font-size: 11px;
white-space: nowrap;
}
デザインサンプル
ul#fc2clapRank、ul#fc2clapRank li を適当に変更します。
【disc】● 記事タイトル clap （23pxで左余白調整）
【decimal】1. 記事タイトル clap （番号付き : 31pxで左余白調整）
【border-bottom】記事タイトル clap （6pxで上下余白調整）
FC2拍手の利用手順 - FC2ブログ向け
FC2拍手を登録していない場合は、FC2サービスのFC2拍手の追加します。
FC2拍手管理ページの『拍手管理設定』をクリック。[拍手ランキングの参加]を[参加する]に変更して、『設定する』をクリック。
FC2ブログ管理ページの公式プラグインの追加から、『FC2拍手ランキング』を追加します（下の方にあります）。
プラグインページの下にある『タグ選択ページを開く』をクリック。
テーマは『カスタム』を選択、ランキング形式はお好みのものを選択。拍手ランキングのカスタマイズ設定で『表示件数』を指定。横幅はそのままでも適当な幅を入れても構いません。そして、『タグ作成』をクリック。
『登録してブログに戻る』を選択。するとプラグインのHTMLに次のようなコードが入ります。
<!-- FC2拍手ブログパーツここから -->
<script type="text/javascript" charset="utf-8" src="http://clap.fc2.com/parts/ranking?name=名前&url=アドレス&mode=形式&color=custom&width=幅&limit=件数&utf8&lang=ja"></script>
<!-- FC2拍手ブログパーツここまで -->
この後にコードを貼り付けます。
履歴履歴など
利用は自己責任でお願いします。
広告が表示されない場合はご報告ください。また、スクリプト部分のみを外して通常のスタイルをご利用ください。
カスタマイズに対応したことから、マークアップの変更はないのではないかと思われますが（既存のデザインが崩れるため）、仕様の変更を確認した場合は、履歴やtwitterにて報告します。
リリースから時間が経っているため、使用されているクラス名の fc2clap_rank_namber すら変更できなくなっていそうです。
再配布はデリケートです。
- 【更新履歴】
- 2010 08-10 - 公開。
- 【関連項目】
- Paroday - FC2ブログインフォメーション / プラグイン関連記事
- FC2 - FC2拍手ヘルプ
- FC2総合インフォメーション - 拍手ブログパーツがカスタマイズに対応
- FC2総合インフォメーション - ブログ内の拍手数ランキングが、ブログパーツになりました！
- comment
コメント
トラックバック
https://paro2day.blog.fc2.com/tb.php/592-c23ea85b
- trackback