WordPressの人気ランキングなどにスタイルシートでランキング画像表示

WordPressのプラグインやphpプログラムでは自動でランキングの入れ替えを行なってくれる方法が沢山あると思います。このランキング形式にランキング画像をスタイルシートで表示する方法を紹介します。スタイルシートを使った方法なのでもちろんWordPress以外でもランキング画像を表示できると思います。

スタイルシートでランキング画像表示

下記のランキングはWP-PostViewsを使いランキングを自動表示させ、スタイルシートによってランキング画像を変えて表示させています。
ランキング画像は下記のような画像のような形で表示され又中身は下記の画像に書いてあるタグが使われています。下記のランキングは５位までをランキングしていて、そこに使われているタグはliタグを5回使っています。

liタグを5回使っているのを利用してスタイルシートで1位〜5位までの画像をスタイルシートで変えてみます。

セレクタ＋セレクタを利用してランキング画像を変える

スタイルシートのセレクタ＋セレクタでランキング画像を変えれば簡単に表示できます。

※但しul liに書いてあるタグの前にはサイトによって必要なidやクラスをつけて使う必要があります。

/*人気ランキングスタイル
----------------------------------------------- */
ul li {
	list-style: none;
	line-height:1.7;
	padding-left: 30px;
}
li:first-child {/*1番目のli*/
	background-image: url(images/ranking11_1.png);
	background-repeat: no-repeat;
	background-position: left center;
}
li + li {/*2番目のli。nth-child擬似クラスはIE8以下では使えないため+により子リストの表示を変えています。IE6は非対応*/
	background-image: url(images/ranking11_2.png);
	background-repeat: no-repeat;
	background-position: left center;
}
li + li + li {/*3番目のli*/
	background-image: url(images/ranking11_3.png);
	background-repeat: no-repeat;
	background-position: left center;
}
li + li + li + li {/*4番目のli*/
	background-image: url(images/ranking06-06004.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
li + li + li + li + li {/*5番目のli*/
	background-image: url(images/ranking06-06005.gif);
	background-repeat: no-repeat;
	background-position: left center;
}

このように1位の場所はli:first-childになり5位の場所はli + li + li + li + liの場所になるのでここにランキング画像を設定しておけば順位にあったランキング画像が表示されます。

ランキング画像はアイコン・イラストフリー素材の無料素材倶楽部｜商用利用・加工可ホームページ画像集にオシャレなランキング画像があります。