注目記事にランキング番号を付ける｜はてなブログカスタマイズ

出来上がりイメージ

いろんなサイトで、人気記事に順番が振ってあるのを見るので、はてなブログの人気記事にも番号がつけられないかやってみました。

CSSのカウンターを利用して番号をつける

CSSには番号をカウントするカウンターを利用して番号をつけることができるようです。

利用するのはこの3つのプロパティです。

• counter-reset
• counter-increment
• content: counter

counter-resetでカウンターを０にします。
counter-incrementでいくつずつ増やすのか減らすのか設定し
content: counterでカウントした数を表示します。

人気記事ランキングに番号を付ける サンプルCSS

/* アクセスランキングに番号をつける　*/
ul.entries-access-ranking.hatena-urllist.urllist-with-thumbnails {
    counter-reset: rank 0;
}

.urllist-with-thumbnails li {
    position: relative;
}

ul.entries-access-ranking.hatena-urllist.urllist-with-thumbnails li.urllist-item.entries-access-ranking-item::before {
    counter-increment: rank;
    content: counter(rank);
    position: absolute;
    background-color: rgba(132,177,201,100%);/* 背景色 */
    padding: 2px 8px;/* ラベルの大きさ */
    top: 1em;/* 位置微調整用 */
    left: 0;/* 位置微調整用 */
    color: #fff;/* 文字色 */
    font-size: 7px;/* 文字サイズ  */
}

サムネイルなしのランキングも確認して何も表示されていないことを確認。

多分これでいいと思うんですけど、一応表示されました。

画像のサイズによってランキングの数字の大きさを変更できるようにしたいので、テーマのCSSに入れずに個別に設定することにします。

他のテーマで検証していないのでこのコードが利用できるかどうかはわかりませんが、もしお試しされるのであれば、

「管理画面」→「 デザイン」→「 カスタマイズ」 →「 デザインCSS」に追記していただければいいかと思います。

デザインCSSに何か記述があれば、絶対に消さずに、追記してください。

【参考サイト】

• CSSだけで要素に番号（カウント）を振る方法【counter】 | PisukeCode - Web開発まとめ  
• CSS カウンターの使用 - CSS: カスケーディングスタイルシート | MDN