記事ランキングの順位マークをcssのみで実装する

@niketcha

サイドバーによく配置される人気記事ランキング。順位のマークを付けるとわかりやすく、見た目もよくなります。

下記の画像のような順位マークはcssのみで実装できるので、その方法を紹介します。

Sponsored Link

ランキングマークの実装方法

cssのcounterを使って順位をカウントし、順位マークを付けます。ランキングリストはulやolだけでなく、dlやdivなどでも大丈夫です。

まずはdisplay:tableを利用したdivでの例をとって紹介します。

display:tableの説明についてはこちらの記事を参考にしてみてください。

WordPressで人気記事を出力する方法についてはこちらの記事に書いています。

html
<div class="ranking">
    <div class="list">
        <div class="lcell">サムネイル</div>
        <div class="rcell">記事タイトル</div>
    </div>
    <div class="list">
        <div class="lcell">サムネイル</div>
        <div class="rcell">記事タイトル</div>
    </div>
        :
        :
</div>
css
.ranking{
    counter-reset: post-ranking;
}
.list{
    display:table;
    border-bottom: 1px dotted #e9e9e9;
    margin-bottom: 5px;
    padding-bottom:5px;
    position:relative;
}
.ranking .list::before{
    position:absolute;
    top:-5px;
    left:-5px;
    content: counter(post-ranking, decimal);
    counter-increment: post-ranking;
    width:20px;
    height:20px;
    border:1px solid #fff;
    border-radius:50%;
    text-align:center;
    background:#D193A0;
    color:#fff;
}
.list .lcell{
    display:table-cell;
    width:50px;
}
.list .lcell img{
    width:50px;
    height:50px;
    object-fit:cover;
}
.list .rcell{
    display:table-cell;
    padding-left:10px;
    vertical-align:top;
}

counter-resetプロパティ

リストを囲む要素にcounter-resetプロパティを指定します。counter-resetプロパティを指定した要素が現れる度にカウンターがリセットされます。

例ではpost-rankingという値を使いましたが、この値は好きなものに変えてOKです。

counter-incrementプロパティ

counter-incrementはカウンタを進める際に使うプロパティです。counter-incrementプロパティが指定された要素が出現する度にカウントアップされます。

例ではbefore要素を使って順位マークを付けています。マークのデザインを変えたい場合はbefore要素のcssをカスタマイズしてください。

ulやolを使う場合

ulやolの場合は下記のようになります。

html
<ul class="ranking">
    <li></li>
    <li></li>
<ul>
css
.ranking{
    counter-reset: post-ranking;
}
.ranking li::before{
    content: counter(post-ranking, decimal);
    counter-increment: post-ranking;
}

-ウェブサイト構築, css

コメントを残す

お名前もメールも入力は任意です。お気軽に指摘や質問などしていただけると嬉しいです。

Gravatarに登録すると、お好きな画像をアバターに設定できます。

Copyright© ニケッチャニッキ , 2017-2018 All Rights Reserved.