http://admin.blog.fc2.com/control.php?mode=design

人気ページランキングを設置

ブログをはじめてもうすぐ6年。
毎日書いてきたので記事も2,000over。

どんな記事が書かれているのかは
左フレームのカテゴリを参照いただければ
と思いますが
カテゴリも気づけば多くなりました。

そこで
どんな記事が読まれているのか
ページランキングの導入を考えてみました。

ページランキングの有名どころとしては「ACR WEB」。

20160813_1.jpg


少し使ってみての感想は
・シンプルでわかりやすい
反面、
・広告が入る
・RSSの更新タイミングか、古い記事だとタイトル置換がうまくできない
でしょうか。

そこで、ブログでFC2を使っているので
FC2」のページランキングを。

・広告が入らない
のが最大のメリット。
反面、
・表示が1行で折り返しができない
のが難点。

タイトル置換はページのtitleタグの内容に置換されるので
titleタグが
(ブログタイトル)(記事タイトル)」になっていると
ランキングのすべてが(ブログタイトル)になってしまいます。

そこで、ブログのテンプレートを編集して
(記事タイトル)(ブログタイトル)」に変更。
しかしながら、ページランキングにはうまく反映されないようです。
(スマホ用ページは反映されているみたい…)

20160813_2.jpg


困ったのでググってみると
以下のサイトを発見!

・人気ページランキングを設定する その2(Webのるて)
http://nemurusyura.blog46.fc2.com/blog-entry-160.html
・FC2 アクセスランキングのブログパーツでタイトルを折り返す方法(電脳スピーチ blog)
http://denspe.blog84.fc2.com/blog-entry-112.html
・FC2 アクセスランキングを見やすくカスタマイズする方法(投資家tmhiknのブログ)
http://tmhikn.blog.fc2.com/blog-entry-40.html


上記のページで紹介されている手順を早速試してみました。
まずは貼り付け用タグの前後を<div>タグで囲みます。

<div id="ranking-page">
(貼り付け用タグ)
</div>


そしてjavascriptで出力するHTMLを編集していきます。
まずは、1行表示から折り返し表示へ。

document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/white-space:\s?nowrap/ig,"white-space: normal");

次にブログタイトルを削除。

document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/- The Last Weekend/ig,"");

そして列幅の調整。

document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/width:\s?111px/ig,"width: 141px");
document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/width:\s?60px/ig,"width: 30px");


最後に、表示フォントを統一するために、上記ページにはない置換ルールを追加。

document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/'MS UI Gothic','Osaka-Mono'/ig,"Meiryo,verdana,sans-serif");


出来上がりはこんなかんじです。

20160813_3.jpg


今後微調整しつつ
とりあえずはこのページランキングで走り始めます。
たかがランキング、されどランキング。
参考にしていただければ幸いです。


スポンサーサイト

Comment

Leave a Reply


管理者にだけ表示を許可する