ol要素をCSSで装飾(デザイン)する方法を実践したみたので備忘録

カテゴリー:WordPress    |    タグ:

ol要素をCSSで装飾(デザイン)する方法を実践したみたので備忘録

サイドバーの所に、WordPress Popular Postsを使ってランキングを表示させてみた際のol要素をCSSでデザインしてみた備忘録です。

ol要素をCSSで装飾(デザイン)する

コリスさんで紹介されていた記事を参照させていただいて


今回これを作成しました。

完成図

完成図

タブを使って、それぞれ月刊、週刊、日刊というかたちで表示させています。
※ WordPress Popular Postsを利用して、テンプレートに直に記述しています。

:before擬似要素を使用して、再度ナンバリングという方法をとっています。

詳細などは、コリスさんのところで紹介されておりますので、ここでは実際にわたしが作成したCSSを書いておこうと思います。


ol要素のCSS部分

このCSSはあくまでもわたしの環境の場合(タブ要素と絡んでいるため)なので参考程度でお願いします。実際に使ってみる場合は、ご自身の環境に合わせて変更してください。

ただ、:beforeはIE7以下はサポートされていないため表示できないので、CSSハックしておくといいかと思います。


ol要素をリセットして再度ナンバリングするメリット

数字の文字色や、背景に画像を差し込めたりとデザインの幅がひろがります。

位置も変更できるので、画像(サムネイル)の上にも設置することができるのでランキング形式のときはこの方法を使うとよりランキングっぽくなるかと思います。

位置変更のポイントとしては、ol要素にposition: relative;を設定し、liにposition: absolute;をしておくことです。


さいごに

すごくすごくざっくりな説明となってしまいました。タブと絡んでいなければもう少し汎用的に詳しくできたのに。。。(言い訳)精進したいと思います。

ちなみに、WordPress Popular Postsをウィジェットで利用しようと思ったら動作してないですね。(バージョン 2.3.7時点)どうしたのですかね?_(:3 」∠)_

ADVERTISEMENT

  • Pocket
  • このエントリーをはてなブックマークに追加

published:2013/11/10    Written by:
カテゴリー:WordPress,      タグ:

最後まで読んでくれた方へ。

閲覧頂きありがとうございました!
お気に召しましたら是非RSS登録やフォローをお願いします!

Twitter

関連記事

Wordpress1

コメント欄をカスタマイズしたので備忘録メモ(コメントとトラックバックを分ける)

現在このブログでのコメント欄はJetPackのコメントを使用しています。 これです! が、こ

記事を読む

wordpress_stickers_everywhere

手軽にできる!「WordPress Portable」を使ってWordPressのローカル環境を作る

ローカル環境でWordPressを触ってみたいという方向けに、お手軽で数分でできてしまうローカル環境

記事を読む

h2-i

ブログの悩みどころ見出しデザイン(h2)をすこし考えてみました。

ブログをやっていて見出しデザインというのは、結構悩みどころだと思います。 現在はとってもシンプルに

記事を読む

wordpress_stickers_everywhere

アイキャッチ(サムネイル)画像の大きさを変更する【Stinger3カスタマイズ】

いくつかお問い合わせを頂いたので、アイキャッチカスタマイズについてこの記事でお返事とさせて頂こうと思

記事を読む

カスタマイザー-i

新しくパワーアップされた「STINGER5」のテーマカスタマイザーを使ってみよう!

最近新しくリリースされた「STINGER5」html5でレスポンシブにされており内容も充実して更にパ

記事を読む

コメントを残す

ADVERTISEMENT
nijisan

Written by niji_sansan

生まれ落ちた地は神戸。
鉄成分入ってるものに興味あり!
キイロイトリが好き!
感動すると「ほぅ」と言いますw

  • 2017年7月
    « 12月    
     12
    3456789
    10111213141516
    17181920212223
    24252627282930
    31  
電子書籍ストア BookLive!
PAGE TOP ↑