Loading…

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

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

本日の人気記事BEST10

所要時間目安:3


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

人気記事ランキング表示

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

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

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

スポンサーリンク

アドセンス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プロパティは、リストの先頭に表示するマーカー文字の種類を指定する際に使用します。 閲覧環境により、本来の仕様の通りに表示されない値もあるので注意してください。

ですが、
見栄えがイマイチというか悪いのでスタイルを適用させて綺麗にします。

 

次に、表示した順位にスタイルを当てて綺麗に魅せる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数はご自分のサイトやブログに合わせて適宜変更してみてください。

これで以下のように丸くてタイトルと被らず左上でもないランキング表示が可能になります。

人気記事ランキング表示

こんな感じになります。
よろしければ参考にして頂けると嬉しいです!(^-^)!

参考にさせていただいたサイト)

先日、このブログの記事ごとのアクセス数を確認したく、「自分用」にランキングページを作成したのですが、その際ナンバリングを今まで知らなかった方法で実装できたので、今回はそれを紹介したいなと思います。


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

同じカテゴリーの記事一覧


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

同じカテゴリ人気記事

おすすめの記事一部広告

関連記事

おすすめSSD

PC カスタマイズ 伝えたいこと

SSD換装におすすめSSDは1TBのCrucialのMX500

もう数年前にはSSDは結構な国内PCメーカーの上位機種パソコンには搭載され始めてきていました。私のパソコンはもう8年目なので、そこそこ古い部類かと思います。ですが、途中途中にメモリの増設(8GB×2枚…

もっと読む

除草剤除草王

伝えたいこと 備忘録 時事ネタ

除草剤使い方とおすすめは除草王かラウンドアップもしくはネコソギ

除草剤の安全な使い方をご存知ですか?除草剤はとても便利ですが、除草剤の効果には続く日数や、ネコソギ取れるタイプがあります。 日差しが強いこの季節、ご自宅にお庭や畑がある方は、止めどなく生えてくる生命力…

もっと読む

大統領令発令ウェブサイト

インターネット 伝えたいこと 備忘録 時事ネタ

トランプ大統領が大統領令を発令出来る!?アメリカンジョークなWebサービスIs Now Illegal

アメリカのトランプ大統領が就任して間もなく、移民政策やメキシコとの国境に壁を作るなどの大統領令を発令しました。 前大統領の元オバマ大統領も就任直後に大統領令にサインをしたのを覚えています。 そこで、ア…

もっと読む

新年の挨拶

備忘録

新年のご挨拶。明けてしまいました。あめでとうございます。

2015年も数時間前に終わってしまいました。 早いもので既に2016年になって約4時間程度過ぎ去りました。 今年も残すところあと364日と20時間あまり…。 (笑)m(__)m 2015年は皆さんかが…

もっと読む

目次に戻る

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

おすすめ!!

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

おすすめ2

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

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



この記事が良かったら
いいね!お願いします(#^.^#)

WordPressデビュー津々浦々の
最新情報をお届けします

言えないことはTwitterで!!



目次に戻る

目次に戻る


コメントを閉じる

comment

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

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