ゲマステ!- 新作ゲームレビュー, マイクラ, ゲームMOD情報まとめ

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

機種別ハイスコア(80点~)タイトルを見る

機種別ハイスコア(80点~)タイトルを見る

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

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

2019年4月11日

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

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

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

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

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

職業ユーチューバーにオススメ!

会社員・個人事業主・法人代表者のいずれでも発行可能

アメリカン・エキスプレス®
・ビジネス・カード

当サイトからの入会で
初年度の年会費0円(無料)

20歳から入手可能な金属製ゴールドカード

会社員・個人事業主・法人代表者のいずれでも発行可能

アメリカン・エキスプレス®
・ビジネス・ゴールド・カード

当サイトからの入会で
初年度年会費0円(無料) 3万ポイント

サイト内ランキング生成サービス『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(ランクレット)』を無料プランで試してみて、気に入ったら有料プランに申し込んでみても良いでしょう!((´∀`))

この記事をシェアする

Amazon売上ランキング(毎時更新)
  • タブレット
  • ディスプレイ
  • デスクトップPC
  • ノートPC
  • PCアクセサリ
  1. タブレット
  2. タブレット
  3. タブレット
  4. タブレット
  5. タブレット
  6. タブレット
  7. タブレット
  8. タブレット
  9. タブレット
  10. タブレット
  11. タブレット
  12. タブレット
  13. タブレット
  14. タブレット
  15. タブレット
  16. 知育・学習玩具
  17. タブレット
  18. タブレット
  19. タブレット
  20. タブレット
    発売日 : 2019年03月28日
    価格 : ¥50,370
    新品最安値 :
    ¥45,078
  1. ディスプレイ
  2. ディスプレイ
  3. ディスプレイ
  4. ディスプレイ
  5. ディスプレイ
  6. ディスプレイ
  7. ディスプレイ
  8. ディスプレイ
  9. ディスプレイ
  10. ディスプレイ
  11. ディスプレイ
  12. ディスプレイ
  13. ディスプレイ
  14. ディスプレイ
  15. ディスプレイ
  16. ディスプレイ
  17. ディスプレイ
  18. ディスプレイ
  19. ディスプレイ
  20. ディスプレイ
  1. タワー
  2. タワー
  3. デスクトップ
    発売日 : 2020年11月17日
    価格 : ¥79,800
    新品最安値 :
    ¥79,800
  4. タワー
  5. タワー
  6. ミニ
  7. ミニ
  8. タワー
  9. 一体型
  10. 一体型
  11. タワー
  12. ミニ
  13. 一体型
  14. ミニ
  15. タワー
  16. タワー
  17. 一体型
  18. タワー
  19. タワー
  20. ミニ
  1. ノートパソコン
  2. ノートパソコン
  3. ノートパソコン
  4. ノートパソコン
  5. ノートパソコン
  6. ノートパソコン
  7. ノートパソコン
  8. ノートパソコン
  9. ノートパソコン
  10. ノートパソコン
  11. ノートパソコン
  12. ノートパソコン
  13. ノートパソコン
  14. ノートパソコン
  15. ノートパソコン
  16. ノートパソコン
  17. ノートパソコン
  18. ノートパソコン
  19. ノートパソコン
  20. ノートパソコン
  1. ライトニングケーブル
  2. microSDカード
  3. microSDカード
  4. 変換アダプタ
    発売日 : 2015年04月16日
    価格 : ¥5,671
    新品最安値 :
    ¥5,671
  5. AC式充電器
  6. タッチペン
    発売日 : 2018年11月07日
    価格 : ¥15,286
    新品最安値 :
    ¥15,286
  7. タッチペン
  8. USBケーブル
  9. HDMIケーブル
  10. インクカートリッジ
  11. SDカード
  12. ゲーミングマウスパッド
  13. 電源タップ
  14. microSDカード
  15. モニターアーム
  16. USBケーブル
  17. microSDカード
  18. タブレット用保護フィルム
  19. インクカートリッジ
  20. PCアクセサリ・サプライ

関連コンテンツ

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

Copyright© ゲマステ!- 新作ゲームレビュー, マイクラ, ゲームMOD情報まとめ , 2021 All Rights Reserved Powered by AFFINGER5.