【WordPress】人気記事ランキングに「順位」をCSSだけでいい感じに表示させる【WordPress Popular Posts】
2015/11/08
当サイトのサイドバーには「本日の人気記事」という見出しで「WordPress Popular Posts」を利用した、アクセス数ランキングを表示させています。
こういうやつです。
今回はこのランキングに表示されている順位を、CSSだけでいい感じに表示させてあげようというものです。
スタイルをこだわらなければ、数行コピペするだけで出来るので簡単です！
「WordPress Popular Posts」の導入の仕方やオプションなどの説明は、こっちで詳しく書いたので参考にして下さい。
人気記事ランキングを表示する必須のWordPressプラグイン【WordPress Popular Posts】の導入手順
スポンサーリンク
実装方法
順位をCSSだけで表示する
順位の表示には疑似要素の「:before」、数値の制御には「counter」を使用します。
/* カウンターの初期化 */
.wpp-list {
counter-reset: wpp-ranking;
}
/* カウンターの値を表示 */
.wpp-list li:before {
content: counter(wpp-ranking, decimal);
counter-increment: wpp-ranking;
}
これでリストの<li>タグの手前に、順位の数値が挿入され、表示されるようになります。（画像はスタイル適用済み）
カウンター変数の名称に「wpp-ranking」を使用していますが、他で使ってなさそうな名前なら何でも構いません。参考にしたサイトのものをそのまま流用しました(´・ω・`)
counterの第2引数は「list-style-type」でdecimalは算用数字。恐らくデフォルトだけど一応。
他にもローマ数字や、ローマ字、漢数字など色々あります。
list-style-type－スタイルシートリファレンス
この実装の方法は、こちらを参考にさせてもらいました。
ナンバリングをCSS3の疑似要素と「counter」でol要素に頼らずにリストに実装する方法
表示した順位にスタイルを当てる
そのままだと、ちょっと残念な表示になるので、スタイルをあてていい感じに表示させます。
サムネイルの左上にかぶさるように表示させたいので、1つのリストを基準（relative）にして、絶対座標（absolute）で置きました。
.wpp-list li {
position: relative;
list-style-type: none;
padding-top: 5px;
padding-left: 5px;
}
.wpp-list li:before {
content: counter(wpp-ranking, decimal);
counter-increment: wpp-ranking;
background: rgba(94, 185, 77, 0.9);
color: #fff;
font-size: 14px;
line-height: 1;
padding: 4px 8px;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
list-style-typeは、もう一つ上の<ul>（.wp-list）に付けた方が良いのかもしれないですが、めんどくさいので<li>に混ぜています。既にnoneが指定されていたら必要ありません。
サムネイルにピッタリ角が合うのが嫌だったので、上と左にpaddingを付けて、順位の方は上と左に隙間をなくす指定をしています。
ちょっと透明にしたかったのでopacityを使ってみたんですが、文字も薄くなるのが嫌だったので、背景にだけ透過色を指定しています。
色は当サイトのイメージが緑なので緑っぽい色になっています。お好きな色にしてお使い下さい！
z-indexを1に上げているのは、サムネのhover時に順位が隠れてしまうからです。
参考にしたのはこちらなんですが、うまくいかなかったので、だいぶ書き換えています。
【WordPress】CSSでナンバリング！人気記事のランキング順位を表示する方法
1位～3位だけ背景色を変える
別に色を変えるだけじゃなく、他に変化を付けてもいいと思いますが、一応背景色だけ各順位に指定する方法です。
.wpp-list li:nth-child(1):before {
background: rgba(255, 88, 196, 0.9);
}
.wpp-list li:nth-child(2):before {
background: rgba(245, 171, 31, 0.9);
}
.wpp-list li:nth-child(3):before {
background: rgba(255, 121, 37, 0.9);
}
これで1位～3位だけ特別なスタイルを当てることが出来ます。
他にも偶数時と奇数時で変えるとか、色んな条件で引っ掛けることが可能なので、気になる方は「CSS セレクター」等で検索してみて下さい。
終わりに
ランキングを表示しているのに、順位が書いていないので分かり辛いな～と思いつつも、そこまで優先度は高くないか…、と後回しにしてました。
別件で、ランキング周りで手を入れたいことがあったので、ついでにちゃちゃっとやってしまおうと手を入れた次第です(^q^)
その別件というのが、サイドバーで表示している「デイリーのランキング」を、もっと見れるようにしたり、「ウィークリー、マンスリー、トータル」それぞれを見れるようにしたいなぁという内容です。
これは明日にでも記事を書こうと思っています。お楽しみに！
→書きました。
【WordPress Popular Posts】ショートコードでサクッと人気記事ランキングの固定ページを作る方法
それでは！