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

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

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


2018/2/13追記

この記事はだいぶ古いので、Webアイコンを利用したこちらのほうがおすすめです。

完成図

120601-1

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

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

コリスさんで紹介されていました。ただ、:beforeIE7以下はサポートされていないため表示できないので、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要素を生成する場合

120601-2

ウィジェットのこちらの設定をいじれば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フォントを使っています。

ico_rank

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

ol要素の幅が広がりそう

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

公開日:2012/06/01
更新日:2013/05/23

1件のピンバック

4件のコメント

  1. パン より:

    こんにちは。HP拝見させて頂きまして
    こちらの順位表示の方法で設置してみたところ、王冠と順位は表示されるのですが、順位が全て1位で5件とも表示されてしまいました。
    ウィジェット側のhtmlは、{thumb} {title} {stats}で表記しているのですが、何が異なっているのか上手く原因が把握できず、投稿させて頂きました。お忙しいところ申し訳御座いませんが、ご教授頂ければ幸いです。

    • *you より:

      パンさん、コメントありがとうございます。
      環境が分からないのでなんとも言えないのですが、吐き出されたhtmlはちゃんと

      <ol>
      	<li>・・・</li>
      	<li>・・・</li>
      	<li>・・・</li>
      </ol>
      

      のような形になっているでしょうか。私は現在WordPress Popular Postsを使っていないのですが、最新verではこの記事を書いた時とウィジェットの設定が異なっている可能性はあると思います。ひとつひとつのliにolがくっついてしまって、吐き出されたhtmlが

      <ol>
      	<li>・・・</li>
      </ol>
      <ol>
      	<li>・・・</li>
      </ol>
      <ol>
      	<li>・・・</li>
      </ol>
      

      のような形になってしまっていると、全て1位になる可能性はあるかな…と、思います。すみません、私の頭ではこれが限界かもですが、解決のヒントになれたら幸いです。

  2. パン より:

    ご返信有難う御座います。
    you様の言われる様に後者のliごとにolが吐き出されている状態です。

    バージョン 2.3.7 のプラグインを使用していますが、you様のバージョンは何になりますでしょうか?


コメントを残す

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

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

コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)