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

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

所要時間目安：約3分

This session is using　 IPv4 　is established in

SNSボタンCSSカスタマイズでクリック率上げて拡散してもらう方法

目次作成と設定方法Table of Contents Plus（TOC+）による

ブログに目次表示動画解説付きでTable of Contents Plus（TOC+）の設定方法

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

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

目次に行く･戻る

+本日の人気記事TOP10+

メルカリ招待コード：

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

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

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

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

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

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

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

記事の上に今日の人気記事を表示する方法

↑ のように、個別記事のタイトルの上に「本日の人気記事」というものを表示する方法です。WordPressにおいては、 WordPress Popula

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

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

だって、
ただ単に「本日の人気記事」とあって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%;にて四角い角を丸くしています。

このままでも良いのですが、
記事のタイトルと重なってしまうのでタイトルがちょっと見えにくくなってしまいます。

人気記事ランキング丸く表示

なので、
人気記事のタイトルを少し右側によせてあげます。

「STINGER PLUS+, Stinger6, Stinger7, WordPress, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧

: スマホやモバイル端末でサイドバー非表示・削除にする方法

: WordPressの文字コードはUTF-8で改行LFにて保存する方法

: スマホでピンチアウトできないStinger6、Stinger7、StingerPLUS+でのピンチアウト方法

: RSSフィードにアイキャッチ画像を表示させる方法Feedlyなど

: インフィード広告を記事一覧の間に表示させる方法

: Stinger6,Stinger5,StingerPLUS+コメント欄を開閉式スライドにする方法

あなたにおすすめ

: PC インターネットブラウザChrome 伝えたいこと備忘録
国産Webブラウザ「Kinza3.2.0」の最新版リリースでMacにも対応
2年くらい前に純国産ブラウザにとても安心できる「Kinza」というweb（ウェブ）ブラウザがあることを知りました。その後、順調に進化し続けて6月15日に最新版の「Kinza」がリリースされたようです。…
もっと読む

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

: 伝えたいこと備忘録
ニュースとは。NEWSとは？どういう意味なのか考察…。
ニュース…単語のみの意味を考察すると…。ニュースとは→新しい情報・事柄（etc）などタチ（達）の総称。であろうと考えています。

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

: AdSense SNS インターネットセキュリティ伝えたいこと備忘録時事ネタ
広告の削除や非表示について
広告というとなにかイメージが悪い感じがする方もいるのかと思います。たしかに中にはエセ広告や胡散臭い広告などもたぶんあります。広告という意味としては、企業などが世の中、社会に新しい商品やサービスなどを…
もっと読む

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

: 伝えたいこと備忘録
Amazonで間違った商品を注文してしまった返品方法
先日、Amazonにてプリンターのインクを注文しました。しかし、(・_・;インクの型番を間違えてしまい…。慌ててAmazonのサイトでキャンセルをしたのですが間に合わずでした。しかし、一応、キャ…
もっと読む

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

: Android iPhone スマホ伝えたいこと備忘録旅行
スマホの電波状態が悪い時に手っ取り早く改善する1つの方法
今では携帯電話の電波が悪いというよりスマホの電波状態が悪いということの方が多いと思われます。そんなスマホの電波が悪くて途切れ途切れになってしまったりした時に、電波が悪い状態を一発で改善するひとつの方…
もっと読む

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

: 伝えたいこと備忘録時事ネタ
新型コロナ騒動(パンデミック)で明らかになったことや問題点課題点など
2019年に中国において報告されたとされている現在パンデミックと言われている状況で、制度不備や行政不備、医療体制不備、など様々な体制不備が取りだたされ明らかになったことも多くあります。世界においても病…
もっと読む