人気記事ランキングに順位を付けて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%;

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

以下記事と同様です。

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

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

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

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

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屋のブログ

【AmazonスマイルSALE】！

3/28(金)9時から4月1日（火）23時59分まで、「AmazonスマイルSALE」開催予定

あなたにおすすめな関連記事

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

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

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

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

あなたが訪問してから

⏰ 0 秒経過 🎉

「STINGER PLUS+, Stinger6, Stinger7, WordPress, カスタマイズ, 伝えたいこと, 備忘録」の人気記事

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

おすすめ！！

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう！！ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ！！

詳細ページへ

No.1シェアAmazon

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に！！楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

詳細ページへ

楽天市場