どうも！L.E.oR.E.oです！

少し前、YØUTA CHANNELの@youtachannel_meさんから
Wordpress Popular Postsの人気ランキングに順位表示をつける
CSSを描いて欲しいと頼まれまして、ちょこっと時間がかかってしまいましたが。

先日、ようやくよーたさんに最終的なCSSを渡すことができたのですが、
そのデザインが異様に僕が気に入ってしまい、当サイトのサイドバー人気記事欄に
早速反映させてもらっていますｗ

てなわけでこのようなことを開設しているところは結構多いのですが、
今回はWordpress Popular Postsの人気ランキングにランバリングで
順位をつける方法を独自に考えてみた結果できた方法をご紹介しようかなと思います！

ようするにこういうことがしたい

言葉で物を説明するのが異常なほどに苦手な私、当然今回の件も
到底うまく説明できそうにないので画像でパパッと説明します。

ようするに、サイドバーに人気記事を表示させることができる
Wordpress Popular Postsプラグインでその人気記事を数字
をつけランキング方式にしたいというわけ。

え、簡単じゃね？と思うかもですが標準のolタグではこれは実現できないので
olによる数字のカウントを停止してまた別に数字を一からカウントさせる要素を
加えた上でいかに画像の上にその数字を載せるか。

これがまだまだ半人前の僕にとっては至難の技なのでした。

人気ランキングにランバリングで順位をつける方法はいたって簡単。コピペするだけ。

えー、これから色々じっくりと説明してみたいところなのですが、
するとブログ記事は当然長くなります。記事が長くなると僕も書くのが面倒な上、
読者さんもそれほど得はしませんので解説はほどほどにして早速方法を説明したいと思います。

方法はいたって簡単。以下のコードをお使いのテーマにあるstyle.cssに貼り付けてください。

.wpp-list {
    counter-reset: number;/*ここは自分の好きな名前でOK*/
    list-style: none;
}

.wpp-list li:before {
    color: /*ここに数字の文字色*/;
    content: counter(number);/*()内はcounter-resetで指定したものをそのまま書く*/
    counter-increment: number;/*ここはcounter-resetで指定したものをそのまま書く*/
    text-align: center;
    opacity: .999;
    float: left;
    line-height: 30px;
    width: 30px;
    height: 30px;
    background-color: /*ここに数字の背景色*/;
    border-radius: 2px;
    -moz-border-radius: 2px;
    margin-right: -25px;
}

数字部分の文字色・背景色（color,background-color）や
角丸あり・なし（border-radius）などは
ご自身のサイトに合うようにカスタマイズしてください。

また、このコード内の「margin-right: -25px」は
ご自身のサイトで数字がサムネイル画像の上にこない場合に変更してください。

-30だと少し右寄りに。-20だと少し左寄りになります。

また、このコードはWordpress Popular Postsが
デフォルト状態になっている時専用に作成したものなので
liタグなどのクラス名を変更している場合は動作しませんのでご了承ください。

仕組みとしては最初に.wpp-list {}でnumberというカウンタの動作を停止させ、
その後、.wpp-list li:before {}でまた別口でnumberカウンタをスタートさせ、
そのスタイルを指定している感じです。

本来は「margin-right: -25px;」はいらないはずなのですが、
僕の環境だと数字がサムネイルからずれてしまうので一応付けてあります。
ご自身の環境に合わせて変更してください。

というわけでちょっと忘備録がわりに書いてみました。
よかったら使ってくださいな！

また次回！