ol要素をcssでランキング形式っぽくスタイリングする

人気記事にランキングのアイコンをつけてみました。それぞれにli id="rank●"とかつければ簡単だったと思うんですが、WordPress Popular Postsを使って自動生成しているので、どうにかシンプルなol要素で出来ないかと頑張ってみました。王冠のアイコン、たいしたものじゃないですがフリーでお使いください。

完成図

カウンタをリセットしたのち、li:beforeでカウンタの番号を生成し挿入するという方法を使っています。あとはフォント変えたり背景画像入れるだけ。全体像はサイドバーにありますのでご覧頂ければと思います。

順序付きリストol要素を視覚的に美しくスタイルするチュートリアル -coliss

コリスさんで紹介されていました。ただ、:beforeはIE7以下はサポートされていないため表示できないので、CSSハックでlist-style-type:decimal;するなどして数字を表示してあげたりするのが良いかもです。

私の場合、別に表示されなくてもいっかなーと思って何もしていませんが_(:3 」∠)_

マークアップ

html

至ってシンプルです。

<ol>
	<li><img src="http://placehold.it/220x150" /></li>
	<li><img src="http://placehold.it/220x150" /></li>
	<li><img src="http://placehold.it/220x150" /></li>
</ol>

ダミー画像を入れてみてます。ちょっとこの大きさのダミー画像入れたいなってときに超便利なWebサービス、PLACEHOLD.ITを使っています。かちびとさんで紹介されてたんですがこれが便利すぎてヤバい。

ダミー画像を超手軽に生成出来るWebサービス・PLACEHOLD.ITがやたら便利 -かちびと.net

ちなみに：WordPress Popular Postsでol要素を生成する場合

ウィジェットのこちらの設定をいじればol要素として吐き出してくれます！

追記：現在はバージョンアップされて画面の見た目が変わっておりますのでご注意ください。

css

ol {
	counter-reset:li; /*カウントリセット*/
	}
ol li {
	list-style:none; /*デフォルトナンバリングを消す*/
	position:relative;
	margin-top:25px;
	padding:0;
	line-height:15px; /*行間*/
	*list-style-type: decimal; /*IE7用ハック*/
	}
ol li:before {
	content:counter(li); /*カウンターのインデックスを挿入*/
	counter-increment:li; /*ナンバリングを生成*/
	/* ここから番号のスタイル */
	position:absolute;
	top:-15px; /*コンテンツの上へ*/
	width:20px; /*幅*/
	color:#fff; /*文字色*/
	background:url(images/ico_rank.png) no-repeat; /*背景*/
	font-family: 'Federo', sans-serif; /*webフォント*/
	font-size:80%;
	text-align:center;
	}

このCSSでは、画像の左上に番号が出るようになっていますが、もちろん普通に左にも出せます。目次のマークアップとか、もっと可愛くできそうですね。やってみようかな。。　2012/6/6追記→やってみました。

フォントは、Googleのwebフォントを使っています。

背景画像は20*13pxのpng。私が3分で作ったものなのでよろしければお好きにお持ち帰りください。個人商用改変なにもかもOKです。

ol要素の幅が広がりそう

目次くらいにしか使ったことがなかったのですが、こんな風にスタイリングできるならもっと色々できそうですね！