読者です 読者をやめる 読者になる 読者になる

偏差値ふぉーてぃー

教科書捨ててブログしてる偏差値40台の高校に通う高校生のブログ。

人気記事ランキングを表示できる、「Ranklet」をはてなブログに設置してみた

ブログ ブログ-はてなブログ インターネット インターネット-Web

f:id:quoqlishkun:20160209200134j:plain

Rankletって何?

Ranklet [ランクレット] はGoogle アナリティクスのデータを活用し
人気ページのランキングをどんなサイトにも簡単に表示できる無料Webサービスです

公式ホームページより引用

要は、アナリティクスのデータを使って人気記事ランキングを自動的に作って、それを簡単なコード一つですぐに表示してしまうよ!という、サイドバーに設置したり、記事下に設置したりするのに超便利なものです。

そんな便利なランクレットをはてなブログにも設置してみましたので設置方法を紹介します。5分でできるよ!

すぐに設置できるよ

f:id:quoqlishkun:20160209193224j:plain

まずは公式ページからサインインをします。Googleのアカウントでログインすることを促されますので、ログインをします。

f:id:quoqlishkun:20160209194503j:plain

基本画面はこのようになっており、名前やどのアナリティクスビューを利用するかなど細かな設定ができます。ランキングの表示形式も色々決められます。

右にはプレビューまで表示されるので非常に便利です。

今回は標準の状態のままにしておきました。

f:id:quoqlishkun:20160209194542j:plain

そうしたら、基本情報タブからテンプレートタブに移動します。ここで以下のサイトに記載されているHTMLとCSSを上記画面のページへコピペします。

右にはプレビューが表示されます。見事変わっていれば問題なしです。

mbdb.jp

f:id:quoqlishkun:20160209194630j:plain

ランキングが出来上がったらサイトへの掲載タブを開き、表示されているコードをコピーします。次にこれをはてなブログに張り付けます。

はてなブログに設置する

f:id:quoqlishkun:20160209194758j:plain

はてなブログの管理画面から「デザイン」に移動し、設置したし場所に先ほどコピーしたコードを張り付けます。

問題なければ「変更を保存する」で保存をしておきましょう。

レポートを表示できる

f:id:quoqlishkun:20160209195424j:plain

さすがGoogleのサービスとでもいいましょうか、作ったランキングのレポートを確認することができるようです。

まだ設定したばかりなので、データが取れていませんが、実際にはランキングのクリック数やアナリティクスのデータを利用し直帰率なども表示してくれるようです。

※データが蓄積されたら追記します

くぉくんのまとめ

いかがでしたか?

はてなブログでは、おすすめの記事を紹介するためのツールが色々使われていますがこちらのツールはGoogle公式ですし、簡単に設定して利用することができるので誰にでもおすすめできます。

色々なやり方がありますが、迷ったらこちらを使ってみましょう!

追記:ツイッターにてグーグルのサービスではないという指摘がありました。誤解を招き申し訳ありません。