ズボラ応援ブログ始めました

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

f:id:niketcha:20190707175344p:plain

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

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

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

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

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

display:tableの説明についてはfloatより簡単、きれいに横並びレイアウトできるdisplay:tableについてを参考にしてみてください。

WordPressで人気記事を出力する方法についてはWordPressプラグインなしで人気記事リストを表示する方法2パターンに書いています。

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;
}
タイトルとURLをコピーしました