【WordPress】CSSでナンバリング！人気記事のランキング順位を表示する方法

本ブログは右サイドバーに人気記事を表示させています（スマホの場合は個別記事の下）。

人気記事は「WordPress Popular Posts」プラグインを使用しています。有名ですよね。

今は20記事表示させているのですが、そのくらい数が並ぶと「それが何位なのか？」というのがちょっとわかりにくいんですよね。別になくてもいいかもしれませんが、まあ自己満足です、ハイ。

なので前々から順位を表示させたいなーと思っていたのですが、なかなかきっかけがなくずっと放置していました。

最近、ようやくきっかけができてCSSでナンバリングすることができたので、備忘録も兼ねて記事にしておきたいと思います。

きっかけはとあるブロガーさんの記事
CSSでナンバリングする方法
まとめ

きっかけはとあるブロガーさんの記事

なぜ重い腰を上げて順位表示させようと思ったのかと言うと、Qtaro（＠Daisuke_9taro）さんのブログ記事を拝見したからです。

CSS3さすがやで！！疑似要素と「counter」でol要素に頼らないリストのナンバリングを実装してみた！！ | room9

記事を読むと、CSSでこんなナンバリングができると言うではないですか！

※CSS3さすがやで！！疑似要素と「counter」でol要素に頼らないリストのナンバリングを実装してみた！！ | room9から引用

これは！！まさに私がやりたかった順位表示だ！

ということでさっそくやってみることにしました。

CSSでナンバリングする方法

CSSはほとんど上記記事のコピペなのですが、一応記載しときます。

#popular-post {
	counter-reset: wpp-ranking;
}

#popular-post ul li:before {
	color:#FFF;
	content: counter(wpp-ranking, decimal);
	counter-increment: wpp-ranking;
	text-align:center;
	opacity:0.999;
	float:left;
	line-height:30px;
	width: 30px;
	height: 30px;
	background-color:#3E454C;
	border-radius: 2px;
	-moz-border-radius: 2px;
}

私の場合、人気記事部分は「#popular-post」というid名にしています。

順位を意味する変数「wpp-ranking」をcounter-resetで初期化し、counter-incrementで数字をカウントアップしながら表示させています。

あと、順位をサムネイルに被せる形で表示していますが、この制御に難儀しました。。。「z-index」ではうまくサムネイルの上に出てくれなかったんですよねー。

自分ではわからなかったので助言をあおぐことに。。。@Daisuke_9taroさんに聞いてみました。

@loveguava さん、今見てみました！暫定対応なんですが。。こんな感じで「opacity」を与えてあげると前面に表示されます。ただこれだとimgにhoverしたときにまた上いかれちゃうので。。もうちょっとうまいやり方あるはずですね。。
— Qtaro (@Daisuke_9taro) 2014, 1月 30