【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】ショートコードでサクッと人気記事ランキングの固定ページを作る方法
それでは!