はてなブログで注目記事の順位を表示する方法

はてなブログのサイドバーに設置できる
「注目記事」の一覧に順位を表示してみます。

完成のイメージは下のような形になります。

注目記事の順位表示

CSSの編集

今回設定が必要なのは、CSSのみです。

はてなブログでは、
「管理画面」→「デザイン」→「カスタマイズ」→「デザインCSS」で
CSSの編集ができます。

cssの編集

順位を表示するCSS

デザインCSSの欄に以下のコードを追記します。

/* ranking */
.entries-access-ranking{
  counter-reset: rank 0;
}

.entries-access-ranking-item:before{
  counter-increment: rank 1;
  content: counter(rank) " ";
  background: royalblue;
  padding: 1px 10px;
  color: white;
}

これで注目記事の一覧に順位が表示されます。

以下では、CSSで行なっていることの詳細を説明します。

順位のカウンタ

CSS ではカウンタという変数を利用できます。

counter-resetでカウンタをリセットし、
counter-incrementでカウンタの値をインクリメントします。

カウンタには自由に名前をつけることができて、
上のコードではrankという名前をつけています。

.entries-access-rankingは注目記事一覧全体を表す要素で、
ここで、カウンタの値を0にリセットしています。

以降では、各記事の要素.entries-access-ranking-itemが現れるたびに、
カウンタを1ずつ増やしてます。

順位の表示

順位は記事の手前に表示したいので、
.entries-access-ranking-item:beforeとして、
:before擬似要素を指定しています。

順位として表示する文字はcontent属性に指定します。
ここではカウンタの値をcounter(rank)で参照して、
順位を表示しています。

バッジ型の順位表示にする

単に数字だけを表示するのでは素っ気ないので、
箱の中に数字が表示されるように装飾します。

backgroudで箱を塗りつぶす色を設定して、
paddingで箱の大きさ（文字周りの余白）を指定します。

また、文字の色をcolorで指定します。 ここでは、箱の色のroyalblueとの相性を考えて、
白抜きの文字にしています。

まとめ

はてなブログのサイドバーに表示できる
注目記事一覧の中で順位を表示するCSSを紹介しました。

コードはシンプルなので、
何をやっているか理解しやすいと思います。
これをベースに色々カスタマイズしてみるのも楽しそうですね。