2012
6
01

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

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


完成図

120601-1

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

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

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

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

マークアップ

html

至ってシンプルです。

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

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

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

120601-2

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

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

css

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

フォントは、Googleのwebフォントを使っています。そのへんの導入についてはこちらの記事をご参照ください。

ico_rank

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

ol要素の幅が広がりそう

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2012/06/01
更新日:2013/11/26


4件のコメント

  • パン
    2013年11月19日 5:26 PM

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

    • *you
      2013年11月19日 6:21 PM

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

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

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

  • パン
    2013年11月26日 2:11 PM

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

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

2件のトラックバック

コメントを残す




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


back to top