FC2拍手ブログパーツの人気記事ランキングの表示をカスタマイズする方法

2013/03/022013/11/10

code

FC拍手の設置方法

・BloggerにFC2拍手を導入する方法【拍手ランキングブログパーツ】
・WordPressにFC2拍手を設置する｜某氏の戯言

FC拍手は、敷居が低いのでアクセスの少ないところでも設置すると反応があるので、個人的にはお勧めです。
また、拍手順で記事ランキングを表示するブログパーツも配布されているのでそれも設置すると良いかもしれません。

FC2拍手ブログパーツの設置方法

表示をカスタマイズしたい場合は、「カスタム」を選択してください。
あと、拍手の設定のところで、「拍手ランキングの参加」を「参加する」に設定してないと、このブログパーツで記事一覧は表示されません。

カスタム例　その１

はてブウィジェット風にしてみました。
赤線の部分は、消しては不味いんじゃないかな？という部分です。

<style>
.fc2clap_rank{
 font-size:10px;
}
.fc2clap_rank_items{
 padding: 8px 10px!important;
}

#fc2clap_rank_table { 
  border-spacing:0px 3px; 
  border-collapse:collapse;
}
.fc2clap_rank_main2 { display:none; }
.fc2clap_rank_item { display:none; }
.fc2clap_rank_items1 { display:none;}
.fc2clap_rank_form { vertical-align:top;}
.fc2clap_rank_clap { text-align:right; width:4em; }
.fc2clap_rank_form{
  border-top: dashed 1px #ccc;
  border-top: dashed 1px rgba(128, 128, 128, .5);
}

.fc2_rank_div{
width:300px;
margin-top:10px;
margin-bottom:10px;
}

.fc2_rank_h2{
 display:block!important;
 padding:10px 10px!important;
 font-size:10px!important;
 background:#ffa340!important;
 color:#6d6d6d!important;

 border-top-left-radius:8px!important; 
 border-top-right-radius:8px!important;
 -webkit-border-top-left-radius: 8px!important; 
 -webkit-border-top-right-radius: 8px!important; 
 -moz-border-radius-topleft: 8px!important;
 -moz-border-radius-topright: 8px!important;

}
.fc2_rank_content{
 margin-top:-20px;
 padding:0 15px;
 background:#f6f6f6;
 font-size:12px;
}
</style>

カスタム例その２

FC2拍手ランキングブログパーツのテーブルデザインをリストに変更 : FC2ブログ - Paroday

FC2拍手ランキングブログパーツは、カスタムにしてもテーブルタグを使った構造なのですが、それをリスト形式にかえてしまうという方法です。この方が、ブログに埋め込むにもベンチな場合も多いでしょうし、最近の流行のような気もします。

詳細は、上記サイトで確認してください。

<script type="text/javascript">
// <![CDATA[
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>

ブログパーツの下に上記の様なJavascriptを追加する。この部分がテーブルタグを取り除いて、リストタグに置き換えている部分です。

<style>
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;
}
</style>