現在の接続環境は
です

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

Windows10サポート終了まで
国民総株主
¥1,650 （2024/11/30 16:49時点 | Amazon調べ）
Amazon
楽天市場
Yahooショッピング
メルカリ

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

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

人気記事ランキング表示

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

所要時間目安：約3分

This session is using　 IPv4 　is established in

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

カーメンテナンスWAKO'S

2024年12月9日 (月曜日)↓における週間月間人気記事トップ３は？↓

  • 本日
  • 週間
  • 月間
  1. つぶつぶ入りのスクラブ洗顔料

    マイクロプラスチック・マイクロビーズがつぶつぶ入り洗顔料や歯磨き粉に…。環境汚染も 98PV

    画像出典元：5 Gyres今年に入ってから、 インターネットニュースサイトやテレビのニュースなどでも報道されているマイクロプラスチック（もしくは、マイクロビーズ）というものがあります。このマイクロプラ…

    もっと読む

  2. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 25PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  3. マイナ保険証なくても資格確認書で受診可能保険証は最長1年有効 24PV

    今年2024年12月2日に新規の紙のこれまでの保険証の発行を停止するとのことです。マイナンバーカードに保険証を登録してマイナ保険証としての利用を促しています。ですが、以下の記事のようにマイナ保険証はト…

    もっと読む

  1. マイナ保険証なくても資格確認書で受診可能保険証は最長1年有効 814PV

    今年2024年12月2日に新規の紙のこれまでの保険証の発行を停止するとのことです。マイナンバーカードに保険証を登録してマイナ保険証としての利用を促しています。ですが、以下の記事のようにマイナ保険証はト…

    もっと読む

  2. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 263PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  3. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 254PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

  1. マイナ保険証なくても資格確認書で受診可能保険証は最長1年有効 814PV

    今年2024年12月2日に新規の紙のこれまでの保険証の発行を停止するとのことです。マイナンバーカードに保険証を登録してマイナ保険証としての利用を促しています。ですが、以下の記事のようにマイナ保険証はト…

    もっと読む

  2. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 263PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  3. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 254PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

今日は2024年12月9日です。

目次に行く･戻る

2024年12月9日 (月曜日)本日の人気記事トップ１０

メルカリ招待コード：

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

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

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

アドセンス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」を使用しています。

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

 

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

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

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

クリスマスまであと…プレゼントは用意されましたか？

おすすめ！！

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

詳細ページへ

No.1シェアAmazon

おすすめ2

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

詳細ページへ

楽天市場

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

0

カウントダウンタイマー

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

🎉 Counting Up! 🎉
Loading...
歯医者・歯科医院選びの参考サイト口コミサイト

伝えたいこと 備忘録 噛みあわせ 治療

いい歯医者の選び方は口コミ評判サイトで良い歯医者を探す方法

歯医者さんは、多くの場合が大学病院などの総合病院以外は個人での開業医の歯科医院がほとんどです。 そして、現在ではその数がなんとコンビニの全国の数よりもかなり多い（約65000件以上）歯科医院があります…

もっと読む

インフィード広告アドセンス

invoice迷惑メール

セキュリティ 伝えたいこと

Invoice#という迷惑メールはVVVウイルスと同じランサムウェア

 昨年に流行ったVVVウイルスというウイルスがありました。これは、PC内のファイルをすべて拡張子を.vvvという拡張子に変更してしまい、PC自体を起動不能にしてしまったりするランサムウェアで…

もっと読む

インフィード広告アドセンス

パブリックDNSサーバーでマルウェアブロックとアダルトサイトブロック設定方法IPv6

Android iPhone PC Windows10 インターネット スマホ セキュリティ ツール 伝えたいこと 備忘録 設定

iPhone、Androidでもフィッシング対策などDNSサーバー子供や家族を海外サイトやマルウェアから守る

プロバイダによっては、時々DNSサーバーの不具合でインターネットにつながらない時が生じることがあります。その他にもフリーWi-Fiスポットなどではセキュリティーの問題もあります。セキュリティーを気にし…

もっと読む

インフィード広告アドセンス

ブログカード

Stinger6 Stinger7 WordPress カスタマイズ 備忘録

プラグインなしでブログカードを新規タブで開く方法とコード

先日、 WordPressにおいてブログカード（内部リンク用）を作成するショートコードのphp関数コードを紹介しました。   https://infovarious.com/post-852…

もっと読む

インフィード広告アドセンス

Windows10 update Assistant is already running

PC Windows10 伝えたいこと 備忘録

Windows10サポート期間一覧表

Windows10がリリースされて早いものでもう2年と7ヶ月経ちます。そんなWindowsの最新バージョンであるWindows10ですがサポート期間があるのをご存知でしょうか。

インフィード広告アドセンス

紅葉

php WordPress テーマ

WordPressテーマカスタマイズしてみた。

WordPressのテーマをカスタマイズしてみました。 カスタマイズしてみた内容は、 ちょっと試行錯誤し過ぎて明確には覚えていないのですが…。バックグラウンドの色の変更。新しい記事の表示件数の変更。（…

もっと読む

あなたが訪問してから

⏰ 0 秒経過 🎉

あなたが訪問してから

0 秒

おすすめの記事一部広告


お小遣い稼ぎにアンケート。

Multiplex 広告

Total403


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

目次に戻る

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

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

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

目次に戻る

目次に戻る

コメントを閉じる

comment

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


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

あと5秒で記事が閲覧できます。

Protected by AFFINGER