TA2OWeb.(たつおウェブドット)

CSSでリストマークの色をカスタマイズしました。【Stinger for FANS】

 

Stinger for FANSのちょっことカスタマイズです。

今回はliでおなじみのリストマーク。そんな頻繁に使わないんですが、だからこそちょっとこだわってみたいと思いました!では早速取りかかってみようと思います!


SPONSORED LINK


CSSをちょこっと書き換えるだけ

style cssを書き換える時に便利なのがコード検索機能。Macを使ってる方なら⌘+Fキーでカスタマズがうなります。上の方からニュっと出てくる窓に今回書き換える場所「ol li」 と入力してください。

Stinger3やStinger for FANSなど、Stinger familyを使用している方がリストマークを変更したい時はol liのようです。以下は僕が使ってるCSSコードです。


ol li { 
     list-style-type: disc;   
     font-size: 17px;
     font-weight: bold;
     color: #ffd700;/*ゴールド*/
}
ol li span {
     color:#000
}


これをそのまま上からかぶせる形でペーストしてください。もし太くしたくなければfont-weightを消せばいいし、サイズも文面と合わせたければfont-sizeを消してもらえれば本文と同じサイズに戻ります。

ただこの方法でめんどくさいのは、liのあとにspanを、/liの前に/spanを打たなければなりません。

<ol>
<li><span>サンプル的な</span></li>

<li><span>サンプル的な</span></li>
</ol>



  1. サンプル的な

  2. サンプル的な


僕はこのやり方以外わからないのですが、それでもちょっとリストマークのカラーを変えるだけでだいぶ雰囲気が変わります。


CSSのみでリストアイコンを変えてみる

<参考にしてるサイト>
[CSS] リスト


コチラのサイトがとても参考になりました。CSSのみとなるとやっぱり種類は少ないですが、それでも変化を加えるには充分ではないでしょうか^^


変更にあたってsmart.cssの方も忘れないでくださいね。好きな色に変えるだけで自分色を出していけるので、リストマークを頻繁に使う方や細かくこだわりたい人にオススメです!ちなみに下記は僕がよく使うカラーコード表です。

<よく使っているカラーコード表>
HTMLカラーコード


<オススメするカラーコード表>
今年流行のフラットデザインで使われているカラーコード – W3Q


カラーコード一つ取ってみても様々で、個性が出てくるポイントだと思いますのでこれを機に自分カラーを探す旅に出てみてはいかがでしょうか!

▼シェアしてもらえるとめっちゃ嬉しいです:)
  2014/08/17
       
SPONSORED LINK