多くのサイトやブログにおいて人気のある記事は異なると思います。
また、
人気記事をサイトやブログに表示しておくだけで訪れてくれた人にこのブログやサイトでの人気のある記事ランキングが分かるようになります。
そして、
回遊率のアップ＝離脱率ダウンにつながります。
メルカリ招待コード：
STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録
プロモーションを含みます
人気記事ランキングに順位を付けてCSSで丸く表示する方法
2025年6月23日 (月曜日)本日の人気記事トップ１０
This session is using IPv4 is established in
今日は2025年6月23日です。
この記事は2017年1月13日のものです。現在は状況が異なる可能性がありますのでご注意ください。
2025年6月23日 (月曜日)↓における週間月間人気記事トップ３は？↓
- 本日
- 週間
- 月間
-
カーメイトのエンジンスターターでエラー15表示と対処方法 1PV
夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…
-
初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
-
歯が痛いような鈍痛が続く意外な理由と対処方法かもしれない 1PV
人間何年も生きていれば、誰もが虫歯になったり噛み合わせがおかしくなったりしてくると思います。中には、虫歯がない人もいらっしゃいますがそういった方々は、幼い頃からの口腔内環境細菌（フローラ）が整っている…
-
初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
-
エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 30PV
車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…
-
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 15PV
過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。（メンテナンスしないのはもっと悪いですが…。） その記…
-
初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
-
エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 30PV
車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…
-
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 15PV
過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。（メンテナンスしないのはもっと悪いですが…。） その記…
そこで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」を使用しています。
これだけでも記事の左側に算用数字の番号が割り振られて、
順位表示はされます。
ランキング表示などに用いる数字は今回は算用数字にしていますが、他にもギリシャ文字や黒丸や白丸やローマ字などに変えることもできます。
以下参照して適宜変更してみてください。
ですが、
見栄えがイマイチというか悪いのでスタイルを適用させて綺麗にします。
次に、表示した順位にスタイルを当てて綺麗に魅せる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数はご自分のサイトやブログに合わせて適宜変更してみてください。
これで以下のように丸くてタイトルと被らず左上でもないランキング表示が可能になります。
こんな感じになります。
よろしければ参考にして頂けると嬉しいです！(^-^)！
参考にさせていただいたサイト）
あなたにおすすめ
¥1,980 （2025/06/22 12:34時点 | Amazon調べ）
ポチップ
あなたが訪問してから
⏰ 0 秒経過 🎉入学入社まであと…入学入社祝いはどんなPresent（プレゼント）でどのように過ごされますか？
ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。
今週の人気記事トップ１０
エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 
車のキーナンバー確認方法。キーレス紛失や壊れた時 
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 
エンジンオイル漏れ止めのおすすめはPlus91評価レ PV 
カーメイトのエンジンスターターでエラー15表示と対処方法 
キッチンシンク下がドブ臭い下水臭い原因と解決方法 
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 
エクストレイルリアワイパー交換方法と純正部品番号 
TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号） 
帯状疱疹かと思ったけれど蕁麻疹で治らない時にデルマクリン軟膏とアンテベート軟膏
おすすめの記事一部広告
- エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ92
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく88
- 車のキーナンバー確認方法。キーレス紛失や壊れた時82
- カーメイトのエンジンスターターでエラー15表示と対処方法48
- キッチンシンク下がドブ臭い下水臭い原因と解決方法44
- ステアリング交換とステアリングスイッチの増設と外し方後期型仕様に42
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法39
- アイドリングストップシステム異常警告灯表示対処方法35
- エンジンオイル漏れ止めのおすすめはPlus91評価レ PV32
- エアバック（タカタ製？）交換方法と後期型仕様に26
Total643
よろしかったらシェアよろしくお願いします。
コメントを表示（0）
新着コメント