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

スポンサーリンク

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

Ranklet

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

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

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

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

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

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

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

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


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

テンプレート例

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

「Hacks」新着記事

カスタムブロックを追加するなら「Block Lab」プラグインを導入すると幸せかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

「Password Checkup」がChromeユーザーのセキュリティを守ってくれるかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

Facebookアプリで3D写真投稿機能をONにするには? 試してみたら本当にできた件

Avatar for ホシナ カズキ

ホシナ カズキ

Twitterアプリに搭載されたデータセーブ機能をONにする方法

Avatar for ホシナ カズキ

ホシナ カズキ

大規模・広範囲にわたるクラッキングによるWordPress改ざん事案が発生中

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビモバイルウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく