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+コメント欄を開閉式スライドにする方法

あなたにおすすめ

: AdSense AFFINGER4Pro STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ伝えたいこと備忘録
関連記事内（途中）にインフィード広告を入れる挿入方法
先月いや先々月の7月初旬頃かと思います。Google Adsenseにおいて、インフィード広告や関連コンテンツ内広告そして記事内広告の3つが追加されてこれまでよりより使いやすくなりました。（…
もっと読む

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

: PC Windows10 伝えたいこと備忘録設定
Windows10スタートアッププログラムの登録方法
Windowsのバージョンが昨年7月29日に最新版のWindows10がリリースされました。その頃は、まだまだバグなどの不具合が多くWindows7やWindows8（8.1）からアップグレードする方…
もっと読む

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

: SNS WordPress インターネットカスタマイズ伝えたいこと備忘録
AMP化する方法プラグインなしで対応してみる
今年の初め頃にGoogleがスマホやモバイルユーザーに特化したサイト表示ができるようになるAMPというものを発表しました。その後もHTTPS everywhere（SSL化）などもありますが…。は…
もっと読む

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

: WordPress カスタマイズテーマ伝えたいこと備忘録時事ネタ
ブログやサイト運営はBloggerとWordPressどっちがいい?
ブログは今や庶民である私や普通の一般人でも見事にサイトとして運営できるようになってきます。ブログが出始めた頃はブログとホームページは明確に違いがあり検索ポータルサイトなどでも通常の検索とブログ用の検索…
もっと読む

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

: PC 伝えたいこと設定
おすすめプリンター複合機CANON・EPSONでもなくBROTHERかHP（ヒューレット・パッカード）
現在、多くの家電量販店や価格ドットコムなどで人気機種ランキングや売上数ランキングなどでじょういを占めているCANONとEPSONのインクジェットプリンター。しかし、よくランニングコストを考えると、長期…
もっと読む