【応用編】リストマークの色と形を変更する

＝ お知らせ ＝
この内容は下記に移転しました。（2009.01.31）
オリジナルデザイン講座 for So-net blog

【基礎編】【準備編】【実践編】から続いています。

【お題】リストマークの色と形を変更する

【完成形】

【変更】
sidebar-body li を変更します。
サンプルではリストのスタイルを四角（■）から丸（●）にします。

（１）リストのスタイルを変更する
sidebar-body liのlist-styleをsquareからdiscに変更します。

.sidebar-body li {
padding:3px 0;
margin-left:15px;
list-style:disc;
}

list-styleに設定可能なのは、

　disc：丸（●）
　circle：円（○）
　square：四角（■）

です。
他にも10進数、ローマ数字、アルファベット等がありますが、それはブログ内では適当ではないと判断し紹介しません。

（２）色を変更する
sidebar-body liにcolorを追加します。
サンプルではmidnightblue（#191970）にします。

.sidebar-body li {
padding:3px 0;
margin-left:15px;
list-style:disc;
color:#191970;
}

これで完成です。

【注意事項】
リストマークの色を変更すると、リスト内のリンク文字以外の文字の色まで変更されますので、文字の色も合わせて確認しながら色を変更してください。

以上。

【目次】へ

コメント 14

そういえば私、幅を広くしようとしてやってみたんだけど結局、今のスタイルでよくなっちゃいました。あはっ。今回もまた可愛く変更できますね。かほりんさんのおかげでブログが可愛くなるのが楽しみです♪
by モコ (2007-03-09 18:27) 

こんにちわ、初めまして。
miacatといいます。記事を探すでやってきました。
yukiinuさんもこられているようでちょっと親近感♪
スキンに関する記事じっくり読ませていただきます。
まだまだ、ちんぷんかんぷんですけど勉強させていただきますね。
by miacat (2007-03-09 18:36) 

＊ モコさん ＊

ナイス＆コメントありがとうございます！
本文の幅は広くしなくていいなら、そのままの方が両端のチェックが目立ってかわいいと思いますよ。(^^)b
私も結局サンプルは元の幅に戻しましたし。

今回の変更はさらにステップアップ出来るので、次回お楽しみに〜。
by かほりん (2007-03-09 18:55) 

＊ miacatさん ＊

はじめまして♪ナイス＆コメントありがとうございます！
yukiinuさんのところでお名前存じております〜。(^^)/
にゃんこ戦隊の企画には笑わせていただきましたよ。
今は肉球をやってらっしゃるんですね。（笑）

お見受けしたところ、すでにオリジナルスキンが完成してらっしゃるようなので私の記事でお役に立てるかどうかはわかりませんが、良かったらご覧くださいね♪
by かほりん (2007-03-09 18:58) 

かほりんさん。こんばんは。
またまた新しい情報をありがとう☆
早速やってみますね！！うれしい〜♪
この間、本文の幅広げてみたんだけど、いまいちしっくり
こなくて元に戻しました。ごめんね。無理言って教えて
もらったのに！！でもとても勉強になりました。
やっぱり、見やすくレイアウトされているのね！！
by robinぱぱ (2007-03-09 21:26) 

かほりんさん～！またまた作成記事が続いているでは♪
お疲れ様ですっ！
スキン作成は大まかな形が出来てくると、きっと皆さん細かい所が気になったり、目に付いたりされると思うので、どんどん進化する「かほりんテキスト」は大いに役立ちますね。
私ね、気になる所がひとつあるんです。
サイドバータイトルのトップの高さを、記事タイトルのトップの高さに合わせたいんです。
高さを揃えたほうがキレイなので、ちょっと気になっているんです。
って、、またまたかほりんさんに続編を望んでいる私です♪

早速↑実践させていただきました（＾＾）
両サイドがドット柄なので、ディスクのほうが馴染みそうですが、馴染みすぎて同化しすぎてしまいます。スクエアのほうがメリハリが効いてしまりますのでスクエアにしました。
揃えて、お友達リンクのところもスクエアに変えました。ありがとうございました！
最後に、ＮＥＷは赤じゃなくても目立つので、色をそろえました。
by yukarin (2007-03-10 01:56) 

勉強になります～(o-´ω｀-)ｳﾑｳﾑ

今度時間のある時にじっくりやってみたいです♪
by nyoro (2007-03-10 07:17) 

かほりんさん、いつもながらありがとうデス。
『リストマークの色と形を変更』実践させてもらいましたョ。
加えてサイドバーの文字の色等も変更してみちゃいました。
（かほりんさんのカラーサンプルも使わせていただきましたよ♪）
壁紙の変更はうまくできなかったんです。ただ、今の状態で全体的にまとまっているかな？と思いそのままにするかもです。
ブログ教室ちらっと見ましたが、文字の羅列が多く
変更前後のスキンの変化が載ってないので、わかりにくそう～でした。
かほりん教室がわかりやすくてイチバン！
by バウムクーヘン＠ (2007-03-10 11:22) 

＊ robinぱぱさん ＊

ナイス＆コメントありがとうございます！
本文広げてみたんですね。
しっくりこないのなら、元のままがいいと思いますよ。
全然無理なお願いではなかったので、お気になさらずにネ。(^^)
今回のは簡単にオリジナル感が出せる感じかしら？
by かほりん (2007-03-10 20:39) 

＊ yukarinさん ＊

ナイス＆コメントありがとうございます！
このシリーズ、今後も進化・・・するかも・・・ね？
どこで終わりとするかが難しいところです。(^^;;
yukarinさんはご自分でも先に進めそうですよね。すごいすご〜い！

質問（要望？）の件ですが、これは実は意外と難しいことなのです。
テキスト（文字）は見ているPC（ブラウザ）によって見え方が違ってくるので、誰でも同じようにキレイに揃えて見えるか、数値で実証できるかどうかがカギになります。
時間があるときに検討してみますね。

yukarinさんが選んだスタンダード１のスキンだと、確かにタイトルの上部が揃ってないのが目立ちますよね。うんうん。
by かほりん (2007-03-10 20:50) 

＊ nyoroさん ＊

ナイス＆コメントありがとうございます！
もうすでにnyoroさんはオリジナルスキンにされてますよね〜。(^^)b
お役に立てることがあるかどうかわかりませんが、良かったらこのシリーズを見守ってください♪
by かほりん (2007-03-10 20:54) 

＊ バウムクーヘン＠さん ＊

ナイス＆コメントありがとうございます！
見ました見ました〜♪
リストマークの形や色が変わっただけでも、なんか違いますよね。(^^)b
壁紙はなくてもかわいらしいから、全然おっけ〜じゃないですか？
でもうまく出来なかったっていうのがちょっと気になります。どうなっちゃったんだろ？？？

ブログ教室よりかほりん教室って言っていただけて、ウレシー♪♪♪
調子に乗っちゃうよ？（笑）
by かほりん (2007-03-10 21:02) 

再びおじゃまします♪
壁紙がうまくできなかった、というところ、かえって気になっちゃうようなことを書いてしまった様でスミマセン。
もともとかほりんさんの記事が始まる前から自己流で始めていたし、
たしかスタンダード１を基にしているのでかほりんさんの記事とは少し違いますよね。
背景の色もあちこち試行錯誤していろんなところをいじってみて
今の形になった覚えがあるので、１ヶ所の変更ではできないのかもしれません。
なのであまり気にしないでくださいね。
それより続きがまだあるようで、（気長に）楽しみにしてますヨ！
by バウムクーヘン＠ (2007-03-10 21:59) 

＊ バウムクーヘン＠さん ＊

了解で〜す♪(^^)/
by かほりん (2007-03-10 22:20)