画像タイル型のリストのジャンル
現在のジャンル数を調べると、「テーマ分類」143、「日記分類」19、「店舗・企業分類」27、で全部で189のジャンルがあります。 ランキングには数種のランキング様式がありますが、約1/3のジャンルでは画像タイル型のリストを採用しています。（「記事ランキング」様式に限ります）
タイル型リストをアレンジするため、これを使用するジャンルとそれ以外のジャンルとを区別する必要がありました。 全ジャンルを調べ、該当するジャンルを抽出した結果が以下です。
| ジャンル名 | リスト先頭ページのURL |
| 教育・お受験 | https://blogger.ameba.jp/genres/education-exam/entries/ranking |
| 毎日のレシピ・料理・献立 | https://blogger.ameba.jp/genres/recipe/entries/ranking |
| スイーツ・デザートマニア | https://blogger.ameba.jp/genres/sweets/entries/ranking |
| パンづくり | https://blogger.ameba.jp/genres/bread-making/entries/ranking |
| お酒（飲み歩き・家飲み） | https://blogger.ameba.jp/genres/alcohol-houseparty/entries/ranking |
| 食通・グルメ | https://blogger.ameba.jp/genres/gourmet/entries/ranking |
| 10〜20代ファッション | https://blogger.ameba.jp/genres/fashion-young/entries/ranking |
| 30代〜ファッション | https://blogger.ameba.jp/genres/fashion-adult/entries/ranking |
| ヘアアレンジHOWTO | https://blogger.ameba.jp/genres/hair/entries/ranking |
| コスメ・メイクレビュー | https://blogger.ameba.jp/genres/cosme/entries/ranking |
| ネイル | https://blogger.ameba.jp/genres/nail/entries/ranking |
| 美容・スキンケア | https://blogger.ameba.jp/genres/beauty-skincare/entries/ranking |
| キッズ・ティーンファッション | https://blogger.ameba.jp/genres/kids-teens-fashion/entries/ranking |
| インテリア・暮らし | https://blogger.ameba.jp/genres/interior/entries/ranking |
| DIY | https://blogger.ameba.jp/genres/diy/entries/ranking |
| 整理整頓・ミニマルライフ | https://blogger.ameba.jp/genres/minimalist/entries/ranking |
| キャンプ | https://blogger.ameba.jp/genres/camping/entries/ranking |
| 登山・トレッキング | https://blogger.ameba.jp/genres/mountain-climbing/entries/ranking |
| マリンスポーツ | https://blogger.ameba.jp/genres/marine-sports/entries/ranking |
| スキー・スノボ | https://blogger.ameba.jp/genres/ski-snowboard/entries/ranking |
| 自転車・ロードバイク | https://blogger.ameba.jp/genres/road-bike/entries/ranking |
| ランニング・マラソン | https://blogger.ameba.jp/genres/running/entries/ranking |
| 筋トレ・ジム | https://blogger.ameba.jp/genres/training/entries/ranking |
| ダンス・バレエ | https://blogger.ameba.jp/genres/dance-ballet/entries/ranking |
| カメラ・写真 | https://blogger.ameba.jp/genres/camera-photo/entries/ranking |
| イラスト・アート・デザイン | https://blogger.ameba.jp/genres/drawing-art-design/entries/ranking |
| ディズニーレポ | https://blogger.ameba.jp/genres/disney/entries/ranking |
| プロレス観戦 | https://blogger.ameba.jp/genres/pro-wrestling/entries/ranking |
| 格闘技観戦 | https://blogger.ameba.jp/genres/martial-arts/entries/ranking |
| スポーツ(その他) | https://blogger.ameba.jp/genres/sports-other/entries/ranking |
| 音楽活動・楽器 | https://blogger.ameba.jp/genres/music-activity/entries/ranking |
| コスプレイヤー | https://blogger.ameba.jp/genres/cosplay/entries/ranking |
| ラジコン・プラモデル | https://blogger.ameba.jp/genres/radiocontrol-model/entries/ranking |
| 麻雀・将棋・囲碁 | https://blogger.ameba.jp/genres/mahjong-shogi-go/entries/ranking |
| ヨガ・フィットネス | https://blogger.ameba.jp/genres/yoga-fitness/entries/ranking |
| 懸賞生活・モニター | https://blogger.ameba.jp/genres/prize-trial/entries/ranking |
| 健康・ヘルスケア | https://blogger.ameba.jp/genres/health-healthcare/entries/ranking |
| 通販・お取り寄せマニア | https://blogger.ameba.jp/genres/teleshopping/entries/ranking |
| eスポーツ | https://blogger.ameba.jp/genres/e-sports/entries/ranking |
| 温泉・国内旅行 | https://blogger.ameba.jp/genres/hot-spring/entries/ranking |
| 神社・仏閣巡り | https://blogger.ameba.jp/genres/temple-shrine/entries/ranking |
| 海外旅行 | https://blogger.ameba.jp/genres/overseas-trip/entries/ranking |
| 北海道の暮らし | https://blogger.ameba.jp/genres/hokkaido-life/entries/ranking |
| 東北の暮らし | https://blogger.ameba.jp/genres/tohoku-life/entries/ranking |
| 関東の暮らし | https://blogger.ameba.jp/genres/kanto-life/entries/ranking |
| 東京の暮らし | https://blogger.ameba.jp/genres/tokyo-life/entries/ranking |
| 甲信越の暮らし | https://blogger.ameba.jp/genres/koushinetsu-life/entries/ranking |
| 北陸の暮らし | https://blogger.ameba.jp/genres/hokuriku-life/entries/ranking |
| 東海の暮らし | https://blogger.ameba.jp/genres/tokai-life/entries/ranking |
| 大阪の暮らし | https://blogger.ameba.jp/genres/osaka-life/entries/ranking |
| 京都の暮らし | https://blogger.ameba.jp/genres/kyoto-life/entries/ranking |
| 関西の暮らし | https://blogger.ameba.jp/genres/kansai-life/entries/ranking |
| 中国地方の暮らし | https://blogger.ameba.jp/genres/chugoku-life/entries/ranking |
| 四国の暮らし | https://blogger.ameba.jp/genres/shikoku-life/entries/ranking |
| 九州の暮らし | https://blogger.ameba.jp/genres/kyushu-life/entries/ranking |
| 沖縄の暮らし | https://blogger.ameba.jp/genres/okinawa-life/entries/ranking |
| 田舎暮らし | https://blogger.ameba.jp/genres/countryside-life/entries/ranking |
| 恋愛・恋活 | https://blogger.ameba.jp/genres/love-koikatu/entries/ranking |
| 鳥との生活 | https://blogger.ameba.jp/genres/bird/entries/ranking |
| 仮想通貨・暗号通貨 | https://blogger.ameba.jp/genres/virtual-currency/entries/ranking |
| 不動産投資 | https://blogger.ameba.jp/genres/realestate-invest/entries/ranking |
| 資産運用・投資 | https://blogger.ameba.jp/genres/asset-management/entries/ranking |
| 声優ファン | https://blogger.ameba.jp/genres/voice-actor/entries/ranking |
| 音楽・アーティストファン | https://blogger.ameba.jp/genres/music-musician/entries/ranking |
| お笑い・バラエティーファン | https://blogger.ameba.jp/genres/comedian-comedyshow/entries/ranking |
| 国内・海外ドラマファン | https://blogger.ameba.jp/genres/drama/entries/ranking |
| 舞台・演劇ファン | https://blogger.ameba.jp/genres/stage-play/entries/ranking |
このデータに従って適用先を指定するコードは、下の様なものになります。
これだけ適用先が並ぶと、CSSの適用チェックに時間がかかりそうな気がしますが、テストして見ると全くそんな印象はありません。 という事で、画像タイル型のランキングリストのアレンジを、更新実装する事にしました。
5列化したタイル型リスト
これまでの4列デザインは、他のランキングページの画面幅「980px」のデザインをベースにしていたので、5列デザインに変更するとサムネイル画像が小さくなります。 画像タイル型リストは、ブログを画像で選別する事が主目的で、肝心のサムネイルが貧弱では嬉しくありません。
そこで、サムネイル画像のサイズがウインドウ幅に応じて伸縮するデザインを採用しました。 5列・4行のタイル配置は変化しないので、ウインドウ幅を調節すれば、縦スクロールなしで全タイルが確認できる、最大のサムネイルサイズを得られます。
下は、ウインドウ幅を調節して、サムネイル画像を最大に調節する様子です。
◎ウインドウ幅が狭い時
◎ウインドウ幅を適切に拡げ、サムネイル画像を最大にした時
以前のデザインでは、1ページのサムネイルを全て見るのにスクロールが必要でしたが、このデザインはその必要がありません。 リストを広範囲に速くチェックするのにスクロール排除は欠かせません。
リスト小型化の工夫
画像はなるべく大きく表示するために、他の表示要素をなるべくコンパクトにしています。 画像以外は「記事タイトル」のみ表示し、画像下の「ブログ名」や「共感されています」などの表示は、画像にマウスを乗せた時だけに表示されます。
ハイライト機能
スタイルの一番最後の「セクション12」で特定ユーザーのIDを記入すると、そのユーザーをランキングのリスト中でハイライト表示できます。 これは通常のリストを対象にした機能ですが、画像タイル型のリストでも下の様にすぐに判断できます。
「Ameblo Rankings ViewerⅡ」を利用するには
利用可能なブラウザは Chrome / Edge / Firefox のいずれかです。
「Ameblo Rankings ViewerⅡ」は、主配布元を「UserStyles.world」に移動しています。「UserCSS」に携わる有志によって新設されたこのサイトは、アクセス環境に優れている上に、不良な「AD」が無く安全です。
「Rankings ViewerⅡ」の旧バージョンを使用されている場合は、旧バージョンを削除し、以下の手順で新しい「ver.202109.06.01」をインストールしてください。
手順 ❶
このスタイルを利用するには、使用されているブラウザに拡張機能「Stylus」を導入する必要があります。 既に「Stylus」を導入している場合は、手順 ❶ は不要です。
拡張機能「Stylus」を導入する手順は、以下のリンクを参照ください。
（EdgeはChrome版が使えます）
手順 ❷
「Ameblo Rankings ViewerⅡ」は、以下のページから入手できます。
このリンク先は、下の様なページです。
サンプル画像の下の install ボタンを押します。
この操作で「Stylus」のインストール画面が表示されます。 下の画面の左上にある「インストール {S}」のボタンをもう一度押します。
「スタイルがインストールされています」と表示されたら、この画面を閉じます。 以上で「Ameblo Rankings ViewerⅡ」のインストールが完了です。
旧バージョンを使用していた場合は
スタイルの配布元の「UesrStyles.world」への移行に伴い、従来の「userstyle.org」の配布バージョンと、同じスタイルが重複してインストールされる場合があります。
下は、新しい「Ameblo Rankings ViewerⅡ」をインストールした直後の管理画面の状態で、「Ameblo Rankings ViewerⅡ」の登録が 2つ出来ています。
バージョン表示が無い方が旧配布元のバージョンです。 これは、置いておく意味はないので削除してください。
セクション構成
「Ameblo Rankings ViewerⅡ」ver.202109.06.01 は 12セクションの構成です。
1： ビューア共通設定
2： 公式ジャンル一覧ページ（公式ジャンル）
3： 全体ランキング （デイリー・月間）
4： ジャンルTOP
5： 総合ランキング
6： 記事ランキング
7： 記事ランキング 画像タイルタイプのリスト
8： 公式ハッシュタグ記事ランキング
9： 新着記事
10： Official Ranking Viewer
11： 配色指定
12： チェックオプション
◎「セクション12」のチェックオプションで、自分の「アメーバID」を記入すると、各ランキング上の自分のブログを見分け易く出来ます。