はぴすぷ

【WordPress】人気記事ランキングに「順位」をCSSだけでいい感じに表示させる【WordPress Popular Posts】

      2015/11/08

当サイトのサイドバーには「本日の人気記事」という見出しで「WordPress Popular Posts」を利用した、アクセス数ランキングを表示させています。

こういうやつです。

SS_3236

今回はこのランキングに表示されている順位を、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>タグの手前に、順位の数値が挿入され、表示されるようになります。(画像はスタイル適用済み)
SS_3237

カウンター変数の名称に「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】ショートコードでサクッと人気記事ランキングの固定ページを作る方法

それでは!

 - CSS, Webサイト構築, WordPress, プラグイン