多くのサイトやブログにおいて人気のある記事は異なると思います。
また、
人気記事をサイトやブログに表示しておくだけで訪れてくれた人にこのブログやサイトでの人気のある記事ランキングが分かるようになります。
そして、
回遊率のアップ＝離脱率ダウンにつながります。
メルカリ招待コード：
STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録
プロモーションを含みます
人気記事ランキングに順位を付けてCSSで丸く表示する方法
This session is using IPv4 is established in
今日は2025年6月6日です。
この記事は2017年1月13日のものです。現在は状況が異なる可能性がありますのでご注意ください。
2025年6月6日 (金曜日)本日の人気記事トップ１０
2025年6月6日 (金曜日)↓における週間月間人気記事トップ３は？↓
- 本日
- 週間
- 月間
-
エクストレイルT32やエクストレイルT33などでは純正LEDヘッドライトが採用されているグレードや車種があります。メーカーオプションのLEDヘッドライトだと光軸調整が難しいと思われる方のいらっしゃるか…
-
米FTCアマゾンを独禁法違反疑いで提訴と日立家電品正規取扱店制度 1PV
具体的には、アマゾンが主力事業のネット通販で出店している小規模事業者に対して高額な手数料を請求したほか、事業者が他の競合サイトで安く販売した場合、アマゾンのサイトでは検索しづらくしたなどと指摘していま…
-
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 29PV
過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。（メンテナンスしないのはもっと悪いですが…。） その記…
-
初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
-
エクストレイルT32やエクストレイルT33などでは純正LEDヘッドライトが採用されているグレードや車種があります。メーカーオプションのLEDヘッドライトだと光軸調整が難しいと思われる方のいらっしゃるか…
-
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 22PV
過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。（メンテナンスしないのはもっと悪いですが…。） その記…
-
初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
-
エクストレイルT32やエクストレイルT33などでは純正LEDヘッドライトが採用されているグレードや車種があります。メーカーオプションのLEDヘッドライトだと光軸調整が難しいと思われる方のいらっしゃるか…
そこで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数はご自分のサイトやブログに合わせて適宜変更してみてください。
これで以下のように丸くてタイトルと被らず左上でもないランキング表示が可能になります。
こんな感じになります。
よろしければ参考にして頂けると嬉しいです！(^-^)！
参考にさせていただいたサイト）
あなたにおすすめ
¥2,463 （2025/05/22 19:48時点 | Amazon調べ）
ポチップ
あなたが訪問してから
⏰ 0 秒経過 🎉
入学入社まであと…入学入社祝いはどんなPresent（プレゼント）でどのように過ごされますか？
ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。
今週の人気記事トップ１０
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 
車のキーナンバー確認方法。キーレス紛失や壊れた時 
エクストレイルフォグランプが下を向きすぎている光軸調整方法 
カーメイトのエンジンスターターでエラー15表示と対処方法 
エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 
エクストレイルT32おすすめエアコンフィルター交換方法 
エクストレイルT32ヘッドライト光軸調整方法 
シガーライターがない車にシガーライターソケットの付け方と増設方法 
エクストレイルT32マイナーチェンジ後ステアリング外し方 
エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー
ブログサービスが始まってから:
おすすめの記事一部広告
- キッチンシンク下がドブ臭い下水臭い原因と解決方法173
- エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ87
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく83
- 車のキーナンバー確認方法。キーレス紛失や壊れた時73
- アイドリングストップシステム異常警告灯表示対処方法47
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法47
- カーメイトのエンジンスターターでエラー15表示と対処方法44
- エクストレイルT32で電動レカロをバッ直でなく車に取り付ける方法37
- ステアリング交換とステアリングスイッチの増設と外し方後期型仕様に35
- エクストレイルフォグランプが下を向きすぎている光軸調整方法30
Total628
よろしかったらシェアよろしくお願いします。
コメントを閉じる
comment
This site uses Akismet to reduce spam. Learn how your comment data is processed.
新着コメント