人気記事ランキングに順位を付けてCSSで丸く表示する方法

まずは、以下のCSSを記述して初期化します。

/* カウンターの初期化 */
 .wpp-list {
 counter-reset: wpp-ranking;
 }
 /* カウンターの値を表示 */
 .wpp-list li:before {
 content: counter(wpp-ranking, decimal);
 counter-increment: wpp-ranking;
 }

※順位の表示には疑似要素の「:before」、数値の制御には「counter」を使用しています。

これだけでも記事の左側に算用数字の番号が割り振られて、
順位表示はされます。

ランキング表示などに用いる数字は今回は算用数字にしていますが、他にもギリシャ文字や黒丸や白丸やローマ字などに変えることもできます。

以下参照して適宜変更してみてください。

list-style-type－スタイルシートリファレンス

list-style-typeプロパティは、リストの先頭に表示するマーカー文字の種類を指定する際に使用します。 閲覧環境により、本来の仕様の通りに表示されない値もあるので注意してください。

HTMLクイックリファレンス

ですが、
見栄えがイマイチというか悪いのでスタイルを適用させて綺麗にします。

次に、表示した順位にスタイルを当てて綺麗に魅せるCSSです。

.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(107, 107, 107, 0.5);
 BORDER-RADIUS: 100%;
 color: #fff;
 font-size: 1px;
 line-height: 1;
 padding: 4px 8px;
 position: absolute;
 left: 0;
 /*top: 0;*/
 top: 8px;
 z-index: 1;
 }

上記CSSを記述すると、
人気記事のランキング左側の算用数字にスタイルが当てられてそれなりに綺麗に魅せることができます。（見えるようにすることができます。）

大文字の

BORDER-RADIUS: 100%;

はスタイルを丸くするものです。

以下記事と同様です。

トップページの記事のイメージキャプチャ画像を丸くする方法

えーっと…。カスタマイズというものは、 やってもやってもどこか抜け目があってしまうというものなのか…。(´～｀ヾ) ポリポリ・・・関連記事のイメージ画像を丸くする方

📅 2016.04.12 | 📂 WordPress, テーマ, 伝えたいこと, 備忘録

四角いままで良い方はコメントアウトするか削除してください。

四角いままですと以下のようになります。

top: 0;をコメントアウトしているのは、（/*top :0;*/の部分です。）
私の場合は真左にランキングを配置したい為です。

左上に表示させたい場合はコメントアウトを外してください。

次に、トップ3だけ色分けしてみます。

• 1位はピンク色、
• 2位は黄色、
• 3位はオレンジ色、

という感じです。

 

その1位から3位までの人気記事に上記の色を付けるCSSは以下になります。

 

.wpp-list li:nth-child(1):before {
 background: rgba(255, 88, 196, 0.9);
 BORDER-RADIUS: 100%;
 }
 .wpp-list li:nth-child(2):before {
 background: rgba(245, 171, 31, 0.9);
 BORDER-RADIUS: 100%;
 }
 .wpp-list li:nth-child(3):before {
 background: rgba(255, 121, 37, 0.9);
 BORDER-RADIUS: 100%;
 }

 

こちらも同じくBORDER-RADIUS: 100%;にて四角い角を丸くしています。

このままでも良いのですが、
記事のタイトルと重なってしまうのでタイトルがちょっと見えにくくなってしまいます。

なので、
人気記事のタイトルを少し右側によせてあげます。

人気記事のタイトルと被らない程度に以下のCSSを追記します。

.wpp-post-title {
 padding-left: 18px;
 }

padding-leftのpx数はご自分のサイトやブログに合わせて適宜変更してみてください。

これで以下のように丸くてタイトルと被らず左上でもないランキング表示が可能になります。

こんな感じになります。
よろしければ参考にして頂けると嬉しいです！(^-^)！

参考にさせていただいたサイト）

ナンバリングをCSS3の疑似要素と「counter」でol要素に頼らずにリストに実装する方法

先日、このブログの記事ごとのアクセス数を確認したく、「自分用」にランキングページを作成したのですが、その際ナンバリングを今まで知らなかった方法で実装できたので、今回はそれを紹介したいなと思います。

秋田県のWeb屋のブログ

あなたにおすすめ

AFFINGER4Pro WordPress テーマ 伝えたいこと 備忘録 時事ネタ

テーマ選びは何が最善策なのか？迷う時はどうした良いのか！？

人生において迷うことは多々あると思います。絶対にあります！！と言い切れますよね。 生まれてから義務教育を終えて高校受験からどの高校に行こうかなどの時が人生においての初めての最善策を選択するのに迷うこと...

伝えたいこと 時事ネタ 車

エクストレイル20Xtt特別仕様車ハリアー最大値引きはいくらなのか

ハリアーもエクストレイルも今年の来月６月には、マイナーチェンジをむかえます。両者ともに値引率、値引きしてもらうには絶好の時期でもあります。 そこで、ハリアーとエクストレイルについてディーラーにて値引き...

セキュリティ 伝えたいこと

Invoice#という迷惑メールはVVVウイルスと同じランサムウェア

 昨年に流行ったVVVウイルスというウイルスがありました。これは、PC内のファイルをすべて拡張子を.vvvという拡張子に変更してしまい、PC自体を起動不能にしてしまったりするランサムウェアで...

Stinger6 Stinger7 WordPress テーマ

Stinger7がもう公開予定…。Stinger6が公開されたばかりだと思っていたのに…。

 昨年末2015年12月に公開されたばかりのStinger6ですが、 おおよそ2ヶ月弱で、もうStinger7が期間限定で公開されました。現在はダウンロードできないようですが、Stinger...

伝えたいこと 備忘録 時事ネタ 治療

心臓の位置が左右で逆？内臓転位なのか？右心蔵なのか？

心臓の位置は通常は胸の真ん中辺りにありますが、若干左側にあるとも言えます。ただ、心臓の軸が左側に傾いているということが正確な表現でもあります。よく心電図（ECG）などをとる時に、アイントーベンの三角形...

PC Windows10 伝えたいこと 備忘録

Windows10サポート期間一覧表

Windows10がリリースされて早いものでもう2年と7ヶ月経ちます。そんなWindowsの最新バージョンであるWindows10ですがサポート期間があるのをご存知でしょうか。

年金倍増で日本経済は大復活する!デフレの終わり、第二の「高度成長」の始まり

¥1,980 （2025/07/06 13:22時点 | Amazon調べ）

Amazon

楽天市場

Yahooショッピング

メルカリ

ポチップ

エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー

すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイ

📅 2020.11.14 | 📂 メンテナンス, 車

バッテリー交換後の廃バッテリー処分方法3つ

バッテリー交換は、どの車においてもいずれは発生する事象です。新車で購入して3年で乗り換えなんて言う方は今ではそんなに多くはないと思います。（中に入ると思いますが、多くの方々はそれ

📅 2023.08.06 | 📂 メンテナンス, 車

あなたが訪問してから

⏰ 4 秒経過 🎉

924日 12時間 31分 55秒

ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。