FC2ブログに人気記事ランキング表示ツール Ranklet [ランクレット] を導入 - ブログ/カスタマイズ

mineoおすすめ契約方法

FC2ブログに人気記事ランキング表示ツール Ranklet [ランクレット] を導入
--

2016.10.21 | カテゴリ:ブログ/カスタマイズ

スマホ表示で先行で利用していた人気記事(ページ)ランキング表示ツールを、この度パソコン表示でも正式に導入する事にしました。

表示は個別記事下に表示させています。設置箇所は変更する可能性あり。

rgweef (1)

Ranklet [ランクレット]

今回新たに導入した人気記事ランキング表示ツールは、GoogleAnalyticsを利用して表示するRanklet [ランクレット]。

Ranklet [ランクレット]

この手のツールをブログで導入する上で、私が重視しているのは以下の三点。

①広告無しor少ない小さい
②表示が重くならない
③広告ブロックアプリに反応しない

①はランキングの最下部にRankletへのリンクが表示されるが、無料で利用できる(有料版もある)ので教養範囲。

②も体感的にも、そしてGoogleのサイト表示診断サイトの PageSpeed Insights で見ても遅くなってはいない。

③が3つの内でも一番重視する所で、現在パソコン表示で右プラグインに表示させているランキングより前に利用していた物は、拡張機能やスマホアプリの広告ブロックに反応して非表示になるからと、ランキングを見て手動で設置している。

画像と記事へのリンクを貼っているだけなので、広告ブロックで見れない何て事はないのだが、手動で入れ替えているのでこれが面倒&面倒。

という事で現在右プラグインに表示させているランキング自体は残しますが、入れ替えの手間をするために年間の数字でのデータにします。

記事下にあるRankletのランキングは当日と前日でのランキングになっています。

Ranklet導入効果

①~③をクリアしたとしても、やはり気になるのはその効果だと思います。

他のツールでは実際にその効果がどうなっているのかが分かりにくいのもありますが、Rankletはサイト内で導入効果を表示してくれます。

この効果が見やすいのはRankletのオススメする理由の一つ。

スマホ用のテンプレートだけのデータですが、導入した後と前の7日のデータは以下。
*導入したのは10月12日で前後の日数は自由に変更可。

セッション平均PVの改善:7%↑
直帰率の改善:4%↑

xsaxasx.png

このブログはアクセス流入が主なので日々のアクセス数に大きく変化は無い。それがRanklet導入で数%の効果がありました。たったこれだけ?と思う方もいるかもしれないが、これが1%あげるのも中々大変なんです。

また設置場所を変えると変化は出ると思うので、その際にもこのデータが気軽にチェックできるのはありがたい。上記に加え以下のデータもグラフ化や数値化で見やすくしている。

・順位別クリック数の推移
・ランキングクリック数
・ランキング表示回数
・よくクリックされているページ

Rankletのカスタマイズ性

Rankletはランキングにおいて何のデータで順位付けをするかを選択できます。今利用しているのは ページビューが多い順

これをユニークページビューや離脱率や直帰率の低い順など7つから選択可能となっている。また1~10位までで何位までを表示させるや、集計期間も選択できたりとカスタマイズの自由度は高い。

wfewe.png

上記に加えテンプレートの編集でデザインも弄くれます。

テンプレートの編集で凝ったデザインにするには知識が必要になりますが、右側にプレビュー画面を表示してくれるので素人の私にも優しい仕様になっています。

私が欲したのは順位とタイトルだけだったのでサムネイル画像は外しました。同じ様にサムネイル画像が不必要な方はHTMLの以下の部分を削除して下さい。

<td class="ranklet-image">
{{#image}}
<a href="{{url}}" class="ranklet-link">
<img class="ranklet-img" src="{{image}}" />
</a>
{{/image}}
</td>


画像に加えて、記事冒頭の文章も不必要な方は以下もカットで。

{{#description}}
<div class="ranklet-description">
<a href="{{url}}" class="ranklet-link">
{{description}}
</a>
</div>
{{/description}}


上記の変更を行うことで以下のようになります。

sfwaedwa.png

デフォルトに戻すも簡単に出来るので間違っても安心して編集できます。

ここで一つ私が陥った注意点なのですが、変更したらサイト下部にある 設定を更新ボタン を押さないと、変更が反映されません。

プレビューで反映されていて、且つ更新ボタンが下の方過ぎてこれに気付かなかった。これが前々から知っていたRankletの導入を見送っていた原因の一つ。

FC2ブログとRanklet

前項でも言及しましたが、私がRankletの導入に中々踏み出せなかった問題がある。

①デザイン変更が反映されない
②ブログのデザインが崩れる
③同じ記事がランクインされる

①に関しては前項通り私の確認不足。

②はパソコン用のテンプレートに設置すると、記事部分の枠と右プラグインがくっついてしまう不具合が起きていた。これについては私のテンプレートの問題。

今まで放置していたHTML素人の私が弄りまくって問題は山積だろうと放置していたHTMLの問題の修正に取り組みました。

HTMLの修正は先日書いた以下のツールを使って修正を行いました。

素人にもわかりやすいHTMLチェックツール3選

上記のツールのおかげで一応表示は崩れなくなった。←何が原因だったかは不明。また全部の指摘箇所を対処できていない。

③は恐らくだがFC2ブログはスマホ用とパソコン用でURLが違う事で発生する問題。

FC2ブログではスマホ表示用のURLの末尾には ?sp が付く。この仕様で同じ記事タイトルでURLが違う記事が出てくる。

そしてAnalyticsもスマホ用とパソコン用に解析タグを設置しているから、両方のデータを収集するようになっていた。

これに気付いたのはスマホ用の記事に、 -スマホ版 ヒビコレと入れるようにした。このお陰でAnalyticsでデータを見た時に同じ記事だが、パソコン用とスマホ用でデータが分かれているのに気が付いた。

スマホ用のテンプレートの表示を許可していない方はこの問題は起きていないかもしれないが、昨今Googleはモバイルページを重視していると聞くので表示は用意しておきたい。

これに対処するためにRankletの設定の ページの絞り込み条件 に手を加える事で記事が二重に出ないようにした。

rweff.png

上記の設定だとスマホ用のアクセスデータのみのデータになっていると思うが、パソコン用と殆ど変わらないので取りあえずこれで。

この考察が間違っている可能性も大いにあるが、一応上記の項目を変更することで記事の被りは収まった。記事が被っている方は上記項目の変更をお試し下さい。

まとめ

正式導入までの道のりは色々あった(←私の問題)が何とか導入する事が出来ました。

HTMLの修正も若干行えたのでそれも併せていい機会になりました。今まではデザイン的なスペースを作るのに平気で改行タグの <br> をぶっ込んだりしてましたから。

ちなにみHTML内に <br> を使うのは何故ダメなのかと、その影響力は未だによく分からず。

私は暫くは無料版で様子を見ますが、サービスクレジット 表示なしやランキングを複数可能な有料プランもあるようです。取りあえず現在導入しているRankletは人気記事の把握もし易いので、ランキングページを設置したい方にオススメしたいツール。

Ranklet [ランクレット]

スポンサードリンク


ブログ/カスタマイズ』カテゴリの関連記事

FC2ブログでスクロールしてもサイドバー(プラグイン)を固定化させる
スマホ用テンプレートの不備を修正!SNSボタン等をカスタマイズ
FC2ブログ タグ別の関連エントリー記事一覧設置修正
YouTubeの登録したリストの中からランダムに一つ動画を表示するブログパーツ

関連タグ:

 ☑FC2ブログ  ☑ブログ  ☑カスタマイズ  ☑Ranklet  ☑人気記事ランキング

Fire7hklk.png   Fire7HD8300x250.jpg  

この記事へコメントする・コメントを見る (0)

今日の人気ページ

fire600.jpg

新着記事

全裸待機禁止Tシャツ企画進行中!? NifMoのTwitterが面白い [08月20日]
iPhoneのバッテリー診断アプリ「Battery Doc」と「Battery Care」 を紹介!AppStoreから削除される前に入手を [08月19日]
iPhoneのバッテリー診断アプリの決定版 「Battery Life」【悲報 再削除】 [08月18日]
Googleが警告を出すので早期のFC2ブログのSSL化を求む [08月18日]
セブンスター仕様1935レプリカZippoが当たるQRコードキャンペーンに挑戦[2017年8月1日-10月31日] [08月15日]
JTが電気加熱型たばこ『Ploom TECH』の抽選販売受付を開始【第5回目】 [08月11日]

mineo紹介キャンペーン
最新記事
2016年人気記事ランキング
Apple公式のiPhoneのバッテリー診断方法 [2017年最新版] dsgre.jpg
iPhoneのバッテリー診断アプリの決定版 「Battery Life」 rank20160605 (3)
iPhoneのホーム画面のアイコンの位置を自由に変更する裏ワザthdth.jpg
クリックポストの配達日数を実際に体験した日数と目安の調べ方を紹介rank20160605 (10)
iPhoneのバッテリーの劣化を調べるiOSアプリ 「coconutBattery」hjkh.jpg
PHILIPS(フィリップス) ソニックケアーを修理に出す60409121432820.jpg
FREETEL Simple2はまさかの3種類展開と1年間無料キャンペーン開始FREETE.jpg
iPhoneのバッテリー診断アプリ「Battery Doc」と「Battery Care」を紹介dndeth.jpg
あのiPhoneのバッテリー診断アプリ「coconutbattery」がAppStoreに復活!→【再削除】→iOS10でアプリも起動せずhjkh.jpg
ドコモ「Xiパケ・ホーダイ for iPhone」を解約(廃止)rank20160605 (6)
Amazonのタブレット Kindle Fire HDで自炊漫画を読むblog-entry-1037.jpg
iPhone最強の広告ブロックアプリ 「AdBlock」 がiOS10で復活yfyfghjv.png
docomo契約SIMカードは差し替え注意201620.jpg
メルカリ 返金までの流れを実体験 その5 「返金(取引キャンセル)編」23131.jpg
ドコモ Xiパケ・ホーダイ for iPhoneを解約(廃止)の注意点201615.jpg
mineo紹介キャンペーンの甘い罠→【再延長】2017年1月31日まで→【仕様変更】一部条件で特典がEJOICAセレクトギフトに201616.jpg
ドコモのパケットサービスを解約しようとするが問題発生201617.jpg
iPhoneバッテリー診断アプリの信憑性gufddcrt.jpg
メルカリ 返金までの流れを実体験 その1 「商品破損編」rank20160605 (9)
docomo iPhone契約SIMをガラケーに挿す201613.jpg
記事を探す
サイト内検索
  • iPhone/全般(50)
  • iPhone/アプリ(53)
  • iPhone/アイテム(39)
  • MVNO(54)
  • MVNO/mineo(124)
  • MVNO/NifMo(19)
  • MVNO/0SIM(10)
  • FREETEL/Simple/Simple2(43)
  • タブレット(29)
  • ケータイ/スマホ雑記(29)
  • ケータイ/スマホNEWS(233)
  • NM705i/6120c(2)
  • 705NK/N73(94)
  • Nokia E51(42)
  • 雑記(95)
  • ブログ記事録(105)
  • ブログ/アクセス数公開(30)
  • ブログ/カスタマイズ(34)
  • プリペイド/プリモバイル(13)
  • デジカメ(4)
  • LINE(14)
  • IQOS/PloomTECH/Zippo(23)
  • アンケート(3)
  • MVNO2台持ち用 通話専用機種(30)
  • NOKIA その他(3)

  • 月別一覧を開く

    関連ワード一覧を開く

    全記事一覧表示
    Author
    ペンギンのアイコン素材管理人:705んk
    @musiatui | Twitter

    iNoWBh.png

    管理人利用中アイテム
    カテゴリ別記事一覧