Loading…

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

人気記事ランキング表示

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

本日の人気記事BEST10

所要時間目安:3

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

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

人気記事ランキング表示

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

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

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

スポンサーリンク

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

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

 

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

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

人気記事ランキング表示

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

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

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


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

おすすめの記事一部広告

    Multiplex 広告

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


関連記事

年賀状

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

年賀状準備と年賀状の書き方・方法って難しい。

今年になりもう10月も中旬です。2016年もあっという間に終わりそうですね…。 残すところ2ヶ月半程度です。誰に書こうか、どうやって書こうか。なんて挨拶分カイたら良いのか。などなどちょっとだけ悩む季節…

もっと読む

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

乙武洋匡さん

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

乙武洋匡さんもTwitter裏アカウント使ってたの…。「純愛エロメガネ」らしい

(アイキャッチ画像出典元:乙武洋匡さん公式Twitterより:https://twitter.com/h_ototake) 先日、おとといかな…。 Twitter(ツイッター)に裏アカウント(通称:裏…

もっと読む

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

パソコン

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

パソコンの異音原因はCPUファンかHDDが2大原因で解決方法

パソコンも長く使っていると、人間と同じように経年劣化してきます。 去年の年末くらいからパソコンからカラカラというのでしょうかブーンというのでしょうか…。 そんな異音が聞こてきていました。

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

ありがとう。感謝。

WordPress アップグレード カスタマイズ 不具合 伝えたいこと 備忘録 時事ネタ

WordPress4.7が12月6日にリリースされるけれど、不具合とか大丈夫かなぁ。

ついこの間WordPress自体のバージョンアップを新しい4.6.1が公開されてから行ったばかりなのに・・・・・・。 こう今月の12月6日には新しいWordPress4.7バージョンが公開されるようで…

もっと読む

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる

comment

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

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