多くのサイトやブログにおいて人気のある記事は異なると思います。
また、
人気記事をサイトやブログに表示しておくだけで訪れてくれた人にこのブログやサイトでの人気のある記事ランキングが分かるようになります。
そして、
回遊率のアップ＝離脱率ダウンにつながります。
STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録
プロモーションを含みます
人気記事ランキングに順位を付けてCSSで丸く表示する方法
2025年8月26日 (火曜日)本日の人気記事トップ１０
This session is using IPv4 is established in
今日は2025年8月26日です。
この記事は2017年1月13日のものです。現在は状況が異なる可能性がありますのでご注意ください。
2025年8月26日 (火曜日)↓における週間月間人気記事トップ３は？↓
- 本日
- 週間
- 月間
計測データがありません。
-
Windows10でエラーコード0x800705b4の対処方法 3PV
Windows10で前回の記事でも紹介したWindows Updateができないくて、その対処方法を記載しました。 そしたら、 一応、sfc /scannowの実行でいくつかのWindo…
-
Windows10でエラーコード0x800705b4の対処方法 3PV
Windows10で前回の記事でも紹介したWindows Updateができないくて、その対処方法を記載しました。 そしたら、 一応、sfc /scannowの実行でいくつかのWindo…
そこで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/07/06 13:22時点 | Amazon調べ）
ポチップ
あなたが訪問してから
⏰ 0 秒経過 🎉入学入社まであと…入学入社祝いはどんなPresent（プレゼント）でどのように過ごされますか？
ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。
今週の人気記事トップ１０
- アイドリングストップシステム異常警告灯表示対処方法
- エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ
- 車のキーナンバー確認方法。キーレス紛失や壊れた時
- カーメイトのエンジンスターターでエラー15表示と対処方法
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく
- エクストレイルT32エアコンダクト内全LED化
- エクストレイルT32マイナーチェンジ後ステアリング外し方
- ステアリング交換とステアリングスイッチの増設と外し方後期型仕様に
- オカルトチューンと言われていたマグチューンを取り付け
- ハンドルスピンナーおすすめと世田谷ベース掲載ALEBANAハンドルスピンナー ハンドルスピナー軽自動車ハイエーストラック対応工具不要専用緩衝材入り (ブラック)
おすすめの記事一部広告
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法117
- アイドリングストップシステム異常警告灯表示対処方法109
- エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ104
- カーメイトのエンジンスターターでエラー15表示と対処方法81
- 車のキーナンバー確認方法。キーレス紛失や壊れた時80
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく69
- エクストレイルT32マイナーチェンジ後ステアリング外し方67
- TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号）46
- キーIDが正しくありません。エクストレイルT32インテリジェントキー電池交換CR203242
- シガーライターがない車にシガーライターソケットの付け方と増設方法40
Total708
よろしかったらシェアよろしくお願いします。
コメントを表示（0）
新着コメント