ta2oweb

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

 

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

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

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

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

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

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

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

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

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

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

  1. サンプル的な
  2. サンプル的な

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

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

<参考にしてるサイト>

[CSS] リスト

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

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

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

HTMLカラーコード

<オススメするカラーコード表>

今年流行のフラットデザインで使われているカラーコード – W3Q

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

▼シェアしてもらえるとめっちゃ嬉しいです:)
  2018/09/06