リサーチに最適化したランキングビューア（5）/ Ameblo Rankings ViewerⅡ

ランキングビューアとは

アメブロにはテーマ枠だけで 140のブログジャンルがあります。 その中から自分の趣味に合うブログ（ユーザー）を探すには、アメブロのブログランキングを利用するのが効果的です。 ブログランキングは、その順位が気になるものですが、むしろブログリサーチの場所として有効だと思います。

ただ、デフォルトのランキングページは表示の無駄が多く、ランキングの広範囲なリサーチには向いていません。 そこで、出来る限り広くポイントを押さえたリサーチが出来る様に考えたアレンジスタイルが「Ameblo Rankings Viewer」です。 これには最初のバージョンが有りますが、「Ⅱ」はより表示を濃縮したアレンジです。

標準のリストデザイン

下は「カーデニング」のジャンル先頭ページです。

先頭ページはジャンル内上位記事の表示で、ここから複数のランキング方式の分岐が選べます。 上図の赤枠の「みんなが見ている注目記事をもっと見る」を選択すると、「ガーデニング」ジャンル内の「記事ランキング」の表示になります。

上図は標準のリストデザインの例で、個々のブログを横長のリボンに納め、ユーザーアイコンと記事画像を添えた形です。 ランキングビューアは、このページの必要な情報だけを圧縮して表示します。

上は、標準的な「記事ランキング」のリストです。 他にも「総合ブログランキング」「ハッシュタグランキング」のランキングが有り、アレンジ結果は似たものです。 ランキングビューアの最大の特徴は、ランキングの後方も簡単に見渡せる点です。 

画像タイルタイプのリストデザイン

一部のジャンルの「記事ランキング」には、画像サムネイルをタイル状に並べたリストデザインがあります。 全ジャンル中で 1/5程度がこのタイルタイプで、デフォルトは以下の様な2列のタイル表示です。

これは、記事の「画像」に重きを置いたリストデザインですが、今回このタイプも表示を濃縮して、以下の様に 4列にアレンジしました。

なお、ランキングビューアのもう少し詳しい情報は、以下のリンクを参照ください。

　　　　リサーチに最適化したランキングビューア（4）  

「Official Ranking Viewer」を統合しました

一般ユーザーのブログランキングは、管理画面の「アクセス解析」から見に行けますが、オフィシャルブログのブログランキングは全く別の所にあります。「ホーム」から「芸能人・有名人」のリンクを辿ると行けますが、オフィシャルブログに通い詰めのユーザーもいるかも知れません。

オフィシャルブログのランキングページも以前にアレンジしていますが、アレンジを拡充した上で「Ameblo Rankings ViewerⅡ」に組込みました。

このアレンジスタイルに関する詳細は、以下のリンクを参照ください。

　　オフィシャルブログのランキングを見渡す / Official Ranking Viewer  

「Ameblo Rankings Viewer Ⅱ」を利用するには

「Ameblo Rankings Viewer Ⅱ ver.2019.07.11」は、ユーザースタイル投稿サイトの「userstyles.org」にアップロードしています。 このスタイルは Chrome または Firefox のブラウザ拡張機能「Stylus」で使用出来ます。

●拡張機能「Stylus」を導入する手順は、以下のリンクを参照ください。 

　　ブラウザが Chrome の場合

　　ブラウザが Firefox の場合

「Stylus」はユーザースタイルシートを管理する優れた拡張機能です。「Stylus」を導入すると、このページで紹介したアレンジスタイルに限らず、様々なページやサイトをカスタマイズする、ユーザーの投稿したアレンジスタイルを利用出来ます。 またユーザーが必要なアレンジスタイルを「Stylus」を使って自分で作成出来ます。

●「Stylus」が導入された後は、以下のリンク先から簡単にこのスタイルをインストール・更新ができます。

インストールは、以下のページでサンプル画像の右下の Install Style を押します。 この際に、無関係な有料アプリの「Download」「開始する」などの紛らわしいボタンが同ページにあるので注意してください。

　　「userstyles.org」の「Ameblo Rankings Viewer Ⅱ」のページ

セクション（Code）構成

「Ameblo Rankings Viewer Ⅱ ver.2019.07.11」は 12セクションの構成です。

Code 1　ビューア共通設定

Code 2　公式ジャンル一覧ページ（公式ジャンル）

Code 3　全体ランキング （デイリー・月間）

Code 4　ジャンルTOP

Code 5　総合ランキング

Code 6　記事ランキング

Code 7　記事ランキング　画像タイルタイプのリスト

Code 8　公式ハッシュタグ記事ランキング

Code 9　新着記事

Code 10　Official Ranking Viewer

Code 11　配色指定

Code 12　チェックオプション

◎「Code 12」のチェックオプションで自分の「アメーバID」を記入すると、各ランキング上の自分のブログを見分けやすく出来ます。