投資家tmhiknのブログ

記事一覧
アクセスランキング

FC2 アクセスランキングを見やすくカスタマイズする方法

2013.03.09 (Sat)
 FC2には以下のブログパーツがあります。

 人気ページランキング (人気ページブログパーツ)
 リンク元ランキング (移動先(OUT)ブログパーツ)
 移動先ランキング (リンク元(IN)ブログパーツ)

 ところがタイトルが折り返されず、1行に表示されるために幅の狭いサイドバーに張り付けたい場合困る。またタイトルの右のカウント数を表示するセルの幅が広い状態で固定されているのが無駄にスペースを消費している。これをカスタマイズして見やすくしたい。

 ACR WEBのブログパーツを使用するという手もあるが、広告が表示されているので使いたくない。しかもURLではなくページタイトルを表示させたい場合は手動で設定しないといけないみたいだ(人気ページランキングの場合はRSSを設定すれば、以後の新着記事に関しては自動でタイトルを設定してくれるらしい)。

 いろいろ検索したところカスタマイズする方法が見つかった。

 FC2 アクセスランキングのブログパーツでタイトルを折り返す方法

 上記ブログを参考にしてみたのだが一つだけ困ったことに。ブログタイトルを消したいと思い

document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/tmhiknのファンドマネージャーを目指すブログ/ig,"");

としたが、「 | 」がページタイトルの後ろについておりこれが消せない。これを消すために次の行を追加した。

document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/ \| '/ig,"");

この行を先ほどのタイトルを消す行の直下にでも追加しておけば消えます。

 また上記ブログではアクセス数は消してしまっていましたが、私は表示をさせたかったので以下のように2行変更しました。

document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/width:\s?111px/ig,"width: 171px");
↓20px減
document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/width:\s?111px/ig,"width: 151px");

document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/width:\s?60px/ig,"width: 0px");
↓20px増
document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/width:\s?60px/ig,"width: 20px");

20pxで2桁分の幅を確保できます。

ちなみに3種類のアクセスランキングのタグはすべて
<div id="ranking-page">
ここ
</div>
に挟むだけでいいですがブログタイトルを消す行でiオプションの後にgオプションをつけるのを忘れないでください。先ほどの私の例を参考にしてください。

 しかしたかがアクセスランキングを張り付けるだけなのに無駄に苦労した感が半端ない。最初から使いやすいブログパーツを提供してくれればこんな苦労も必要なかっただろうし、私もとっととあきらめればよかったのに・・。

コメント


管理者のみに表示

トラックバック