現在の接続環境は
です

記事内にプロモーションが含まれています。

プロモーションを含みます

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

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

所要時間目安：約3分

This session is using　 IPv4 　is established in

今日は2025年6月5日です。

この記事は2017年1月13日のものです。現在は状況が異なる可能性がありますのでご注意ください。

目次に行く･戻る

2025年6月5日 (木曜日)本日の人気記事トップ１０

カーメンテナンスWAKO'S

2025年6月5日 (木曜日)↓における週間月間人気記事トップ３は？↓

  • 本日
  • 週間
  • 月間
  1. シガーライターがない車にシガーライターソケット増設

    シガーライターがない車にシガーライターソケットの付け方と増設方法 5PV

    ここのところ最近の車にはシガーライターソケットもしくはシガーライター自体が付いていない車があります。 そんな時には、昨今ではスマホの充電などでも車のシガーライターソケット電源は必須とも言えます。 しか…

    もっと読む

  2. T32エクストレイルマイナーチェンジ後ステアリング外し方

    エクストレイルT32マイナーチェンジ後ステアリング外し方 4PV

    エクストレイルT32型（NT32も含め）がマイナーチェンジしてから早いもので、もうすぐ2年になります。エンジンなどの大きな変更などはなく、室内の内装デザインや外装のちょっとしたデザイン変化、そして、一…

    もっと読む

  3. ECUリセット

    ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 3PV

    過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。（メンテナンスしないのはもっと悪いですが…。） その記…

    もっと読む

  1. キーレスリモコン破損

    車のキーナンバー確認方法。キーレス紛失や壊れた時 30PV

    初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

    もっと読む

  2. ECUリセット

    ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 29PV

    過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。（メンテナンスしないのはもっと悪いですが…。） その記…

    もっと読む

  3. エクストレイルT32ヘッドライト光軸調整方法 22PV

    エクストレイルT32やエクストレイルT33などでは純正LEDヘッドライトが採用されているグレードや車種があります。メーカーオプションのLEDヘッドライトだと光軸調整が難しいと思われる方のいらっしゃるか…

    もっと読む

  1. ECUリセット

    ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 19PV

    過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。（メンテナンスしないのはもっと悪いですが…。） その記…

    もっと読む

  2. キーレスリモコン破損

    車のキーナンバー確認方法。キーレス紛失や壊れた時 16PV

    初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

    もっと読む

  3. エクストレイルT32ヘッドライト光軸調整方法 10PV

    エクストレイルT32やエクストレイルT33などでは純正LEDヘッドライトが採用されているグレードや車種があります。メーカーオプションのLEDヘッドライトだと光軸調整が難しいと思われる方のいらっしゃるか…

    もっと読む

多くのサイトやブログにおいて人気のある記事は異なると思います。

また、
人気記事をサイトやブログに表示しておくだけで訪れてくれた人にこのブログやサイトでの人気のある記事ランキングが分かるようになります。

そして、
回遊率のアップ＝離脱率ダウンにつながります。

アドセンス336pxPC閲覧記事下表示1つ目コード

この記事を読む方へのオススメ

メルカリ招待コード：

そこでCSSで人気記事ランキングに順位表示をつける方法です。

はじめに前提として、
「WordPress Popular Posts」というプラグインを導入していることとします。

 

私のサイト・ブログでも記事の一番上に「本日の人気記事」というものを設置しています。

これまでは、
ランキングの順位表示は要らないかなぁ。

なんて思っていましたが、重い腰を上げてやってみることにしました。

 

だって、
ただ単に「本日の人気記事」とあって10個（任意数）表示されていても、どれがいったい1番なのか分かりません。

普通は上から順番に1位、2位、3位・・・・・・。

と分かるかもしれませんが、
より分かりやすくする為です。

 

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

 

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

 

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

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

 

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

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

Thumbnail
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数はご自分のサイトやブログに合わせて適宜変更してみてください。

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

人気記事ランキング表示

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

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

Thumbnail
ナンバリングをCSS3の疑似要素と「counter」でol要素に頼らずにリストに実装する方法
先日、このブログの記事ごとのアクセス数を確認したく、「自分用」にランキングページを作成したのですが、その際ナンバリングを今まで知らなかった方法で実装できたので、今回はそれを紹介したいなと思います。
秋田県のWeb屋のブログ

あなたにおすすめ

WXR-1900DHP2
PC 伝えたいこと 備忘録 無線LANルーター

オススメの無線LANルーターはWXR-1900DHP2評価とレビュー

以前、以下のような記事を書きましたが、そ...

草取りを楽にする方法とコツ
伝えたいこと 備忘録 時事ネタ

草取りを楽にするコツと方法

また今年も春が来て夏に向かい草取りもしく...

テレビリモコンHUIS REMOTE CONTROLLERリモコンカスタマイズ
ツール 伝えたいこと 備忘録 時事ネタ

テレビリモコンが壊れたり無くしたり見つからない場合HUISで対処方法

テレビリモコンって、意外とというか結構な...

スマホファースト
Stinger6 Stinger7 WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録

WordPressアイキャッチ画像を自動で投稿記事に表示する方法

いまやブログにおいてアイキャッチ画像は無...

WordPress カスタマイズ 伝えたいこと 備忘録

プラグイン不要アイキャッチ画像自動生成コード

多くのサイトやブログなどの記事に、その記...

PC Windows10 Windows11 カスタマイズ メンテナンス 伝えたいこと 備忘録 時事ネタ 設定

CPU温度とGPU温度が高いのでおすすめCPUグリスを塗り直し温度を下げた。

パソコンに欠かせない中央演算装置CPUが...

Windows10サポート終了まで

Multiplex 広告

【AmazonタイムセールSALE車＆バイク】！

人気の商品が日替わりで登場。毎日お得なタイムセール「Amazonタイムセール全体」

出展：Amazonタイムセール

人気の商品が日替わりで登場。毎日お得なタイムセール

年金倍増で日本経済は大復活する!デフレの終わり、第二の「高度成長」の始まり
¥2,463 （2025/05/22 19:48時点 | Amazon調べ）
Amazon
＼楽天ポイント4倍セール！／
楽天市場
＼ポイント5%還元！／
Yahooショッピング
メルカリ

あなたが訪問してから

⏰ 0 秒経過 🎉

入学入社まであと…入学入社祝いはどんなPresent（プレゼント）でどのように過ごされますか？

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

ブログサービスが始まってから:


カウントダウンタイマー

おすすめの記事一部広告


Total626


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

よろしかったらシェアよろしくお願いします。

この記事タイトルとURLをコピー

-STINGER PLUS+, Stinger6, Stinger7, WordPress, カスタマイズ, 伝えたいこと, 備忘録

目次に戻る

目次に戻る

新着コメント

コメントを閉じる

comment

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です


This site uses Akismet to reduce spam. Learn how your comment data is processed.