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]
↓
- サンプル的な
- サンプル的な
僕はこのやり方以外わからないのですが、それでもちょっとリストマークのカラーを変えるだけでだいぶ雰囲気が変わります。
CSSのみでリストアイコンを変えてみる
<参考にしてるサイト>
 |
[CSS] リスト
 |
コチラのサイトがとても参考になりました。CSSのみとなるとやっぱり種類は少ないですが、それでも変化を加えるには充分ではないでしょうか^^
変更にあたってsmart.cssの方も忘れないでくださいね。好きな色に変えるだけで自分色を出していけるので、リストマークを頻繁に使う方や細かくこだわりたい人にオススメです！ちなみに下記は僕がよく使うカラーコード表です。
<よく使っているカラーコード表>
|
HTMLカラーコード |
<オススメするカラーコード表>
|
今年流行のフラットデザインで使われているカラーコード - W3Q |
カラーコード一つ取ってみても様々で、個性が出てくるポイントだと思いますのでこれを機に自分カラーを探す旅に出てみてはいかがでしょうか！
