ゲマステ!- Gamers Station

ゲーマーズステーション | ゲームを中心に、動画・ブログ制作などのネットコンテンツ全般からレビュー情報まで分かりやすく紹介

HP・ブログ関連 ガジェット・ツール レビュー記事

サイト内の人気記事ランキングを超簡単に自動生成できる便利なサービス『Ranklet』

2019年4月11日

訪問者のホームページ内の巡回率を高める方法として、効果が高いのはサイト内記事ランキングを設置することです。

サイト内記事ランキングは、訪問者がおすすめのコンテンツを探すのに役立つと共に、サイトの管理人が、自身のサイトでどのような記事が注目を集めているかの傾向を掴むのにも役立ちます。

▼サイト内記事ランキングの例

Word PressFC2等のブログサービスではウィジェットやプラグインが用意されており、このようなサイト内ランキングを設置するのは簡単ですが、それ以外の通常のウェブサイトでランキングを設置しようとすると、JavaScriptなどのプログラミングの知識を要求される為ちとめんどくさいです(´・ω・`)

しかし、今回紹介するウェブサービスを利用すれば、Google Analyticsの解析データを自動で取得し、PV数やユニークユーザー数のサイト内ランキングをいとも簡単に設置することができるのです!

サイト内ランキング生成サービス『Ranklet』

サイト内ランキング生成サービス『Ranklet(ランクレット)』を利用すれば、1つのランキングまでは無料で作成することができます!(2つ目以降は有料登録必要)

https://ranklet.com/

Rankletにアクセスし、自身のサイトをトラッキングしているGoogle Analyticsアカウントでログインしてください。するとランキングの生成画面が表示され、ランキングのレイアウトや構成など、各設定をいじることができます。

基本情報の設定

『基本情報』タブではランキング情報を取得したいサイトを選択できる他、ランキングの作成順、集計間隔、絞り込み条件等を設定できます。

▼ランキングを取得したいサイトを選択できない場合は、Google Analyticsのトラッキングが正常に設定されているかを再確認してください。

テキストの置換

『テキストの置換』ではランキングに表示される文字列を、任意の文字列に置き換えることができます。末尾に自身のサイト名などが付いている場合は、ここで取り除くこともできます。

テンプレートの編集

『テンプレート』タブでは、ランキングのHTMLとCSSを自由に編集し、カスタマイズすることができます。なお編集後、ページ下の『設定を更新』をクリックすることをお忘れなく!

設置URLのコピー

すべての設定が完了したら、『サイトへの掲載』タブに記載されているコードをコピーし、ランキングを設置したいページの、設置したい箇所に貼り付けてください。

※ちなみに各ランキングにはそれぞれ異なったIDが割り振られており、1ページに設置できるランキングは、1つのIDにつき1つです。

ページを更新し、生成したランキングがページに設置されていれば作業は完了です!ランキングの更新は自動で行われ、無料プランでは数時間に1回の頻度で更新されます。

自作テンプレートを紹介!

デフォルトのテンプレートを使用すると、ランキングは下の画像のように、不格好な形になってしまいます。

▼デフォルトの状態

そこで、自分でテンプレートをカスタマイズし、以下のようにスッキリとした見栄えにしてみました!

▼自作テンプレート

上レイアウトのカスタムコードを公開します。『テンプレート』タブ内に以下のHTMLとCSSコードを貼り換えることで適用されます(細部は自由に変更してみてください)。

▼HTMLコード

<aside class="ranklet ranklet-reset">
<div class="ranklet-wrapper">
{{#context.pages}}
<div class="ranklet-item">
<a href="{{url}}" class="ranklet-link">
{{#image}}
<figure class="ranklet-image"><img src="{{image}}" alt="{{psvr}}"></figure>
{{/image}}
<p class="ranklet-title">{{title}}</p>
<!-- /.ranklet-link --></a>
</div>
{{/context.pages}}
</div>
</aside>

▼CSSコード

#ranklet-{{context.id}} {
.ranklet-wrapper { counter-reset:ranklet-item; }
.ranklet-item {
position:relative;
margin:0 0 12px;
overflow:hidden;
cursor:pointer;
&:first-child:before {
width:40px;
height:40px;
font-size:16px;
line-height:2.5;
background:#ffd700;
content:counter(ranklet-item);
counter-increment:ranklet-item;
}
&:nth-child(2):before {
background:#c0c0c0;
content:counter(ranklet-item);
counter-increment:ranklet-item;
}
&:nth-child(3):before {
background:#c47222;
content:counter(ranklet-item);
counter-increment:ranklet-item;
}
&:before {
position:absolute;
top:0;
left:0;
width:30px;
height:30px;
font-family:sans-serif;
font-size:13px;
font-weight:700;
line-height:2.5;
color:#ffffff;
background:#ff2400;
text-align:center;
content:counter(ranklet-item);
counter-increment:ranklet-item;
z-index:10;
}
}
.ranklet-link {
display:block;
color:#4682b4;
overflow:hidden;
font-size:13px;
}
.ranklet-image {
float:left;
width:30%;
height:80px;
img {
width:100%;
height:auto;
}
}
.ranklet-title {
margin:0 0 0 18%;
padding-bottom:10px;
border-bottom:1px solid #ddd;
}
}
.ranklet-link a:link{color:#4682b4;}
.ranklet-link a:visited{color:#4682b4;}
.ranklet-link a:hover{text-decoration:none;color:#ff0000;}

2つ以上のランキングの作成は有料版を!

前述した通り、作成した同じIDのランキングを、1つのページに複数設置することはできません。

そのため、同じページに複数ランキングを設置したい場合や、無料版では表示されるクレジットの記載を消したい場合は、有料プランを申し込む必要があります。

▼ちなみに私は月980円の『サイトオーナープラン』に加入しています。ランキングが5個まで作成でき、更新頻度が1時間に1回と高頻度なのでおすすめです!

Ranklet(ランクレット)』を無料プランで試してみて、気に入ったら有料プランに申し込んでみても良いでしょう!((´∀`))

-HP・ブログ関連, ガジェット・ツール, レビュー記事
-, , , , , , , , , , , ,

Copyright© ゲマステ!- Gamers Station , 2019 All Rights Reserved.