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

スポンサーリンク

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

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

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

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

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

スポンサーリンク

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

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

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

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

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

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

スポンサーリンク

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さんに聞いてみました。

 

言われたとおり「opacity:0.999;」を指定すると見事サムネイルの上に重ねて表示できました!マウスオーバーすると消えちゃいますが、そんなの気にしない!

▼私のブログでもこんな感じで表示されるようになりました!なかなかイケてると思いません?

にしても、CSSってこんなプログラミングチックな使い方もできるんですねー。初めて知りました!

でもCSSはあくまで見た目を制御するものです。room9さんとこでも書かれていますが、ロジックというか複雑な処理はCSSに記述するべきではないでしょう。

スポンサーリンク

まとめ

というわけで、CSSでナンバリングする方法についてご紹介しました。

気になった方は試されてみてはいかがでしょうか?

<関連記事>

【WordPress】CSS修正したけど反映されないときに確認すべき3つのこと | love guava!

HTMLやCSS修正の確認はChromeの標準機能「デベロッパーツール」を使うと便利! | love guava!

【WordPress】Stinger3をインストールした人へ!私がStinger3インストール時にやったこと・注意点まとめ | love guava!