Google Analytics連携でアクセスランキングを作れる「Ranklet」の汎用テンプレートを作ってみた件

Movable Typeをはじめとして、アクセスランキングを導入しにくいブログやウェブサイトに、簡単にそれを導入できる「Ranklet [ランクレット]」というのをご存知でしょうか?
Google Analyticsと連携させて、所定のコードをテーマファイルにコピペするだけというお手軽なウィジェットサービスです。

先日、ネタフルでも紹介されましたが、非常に簡単に導入できる上、効果測定もしっかりできるという、かなり利便性の高いサービスです。
詳細はネタフルの記事でどうぞ。

さて、この「Ranklet」のネタフルへの導入に関しては僕も噛んでいるわけですが、実は気になるポイントがひとつ。それは、

デフォルトテンプレートのコードが嫌

ってこと。なんか嫌だ。tableタグとか使わないで欲しい。

いや、まぁ基本的にはHTMLもCSSもよくわかんないという人が、自ら手をいれるときにわかりやすいほうがいいよね。っていう考え方によるものなんでしょうけど、ぶっちゃけわかんない人はどんなコードでもわからないです。

ってことで、自前でテンプレートをサクッと書きましたので公開したいと思います。汎用といえば汎用なのかなー。

「Ranklet」って一応ページビュー以外にも、総滞在時間やら平均ページ滞在時間、ページ価値の高い順、離脱率の低い順、直帰率の低い順でランキングを作れるようになっているのですが、まぁ単純に上から1、2、3と順位付けして見せる分には、今回公開するテンプレートでも十分なのではないかと思う次第。

なお、表示するのはアイキャッチ画像とタイトルのみ。ランクの数字はCSSでの実装としています。

こちらのコードを「Ranklet」の管理画面から、テンプレート編集のところにまるっと貼り付け、保存すればOK。

こんな感じに仕上がります。HTMLやSCSSがおわかりになるようでしたら、導入するブログやサイトのデザインに合わせて微調整しましょう。
一応レスポンシブに対応してるので、それ系のテンプレートにも入れやすいは入れやすいはず。まぁ、何かあればコメントでどうぞ。