■自分で調節する楽しみ
category: skin：John
Johnをダウンロードしてくださったみなさまありがとうございます。
このスキン*1自分で言うのもなんですが、やたらとシンプルです。
画像無し*2で、デザイン自体もまるでカスタマイズ前のサンプルに近いほどの潔さ（笑）。
そのため、色に依存する部分が多く、シンプルであるがゆえに、飽きが早いかもしれない。*3
そんな時、ぜひお勧めしたいのが色変え*4です（オリジナルの色がやだなぁ、という方もぜひｗ）。
改造なんてやったことない、という人もご安心あれ。*5
色変えでいじるのは『スタイルシートの編集』のみで、要は色を表している部分（#XXXXXX）を、それぞれ好きな色に置き換えてしまうというだけ。
■方法（もなにもないけど
上の色（#d9d98cとか#221100とか）を変えたい色と総取替えしてしまいましょう。
winだとメモ帳にコピペして、置換キー（Ctrl＋H）の「すべて置換」を使うととってもラクチン！
サンプルとして、こんな色変え方をやってみました。
（m：main、t：text、a：accent、l：link、v：vlinkの略）
※上の設定ではさらにスクロールバーの装飾のために↓をスタイルシートに追加してます。
ただ、mainやtext、accentの色を入れ替えるだけでもまたずいぶん変わるはず。
改造初の人も、これを機にアレコレ試してみるのも面白いかも。
自分のお気に入りカラーを見つけて色々遊びましょ〜。
オススメカラーの報告もお待ちしてマッスル。
■色の参考サイト
・色のみじん切り --色見本をダウンロードできます
http://members.at.infoseek.co.jp/color_onion/
・COLORSTROLOGY --誕生日ごとに色があったってご存知でした？
http://www.colorstrology.com/colorstrology_sniffer.html
・色にょろのページ --色名がついたものには何がある
http://www.asahi-net.or.jp/~QD7K-SD/
・Color Slider --オンラインだけど便利やのぉ〜
http://report.s22.xrea.com/
・ColorMatch 5K http://colormatch.dk/
・ColorBlender http://colorblender.com/
・THE RETURN OF DESIGN http://returnofdesign.com/colors/
続きはどうでもいいつぶやき･･ 公開して早く書こうと思ったのが、1ヶ月後になってしまいましたが･･･まぁいいや。
*1 本来はテンプレートなんだろうけど、何かの名残でスキンと時々書いちゃってます。テンプレとほぼ同じ意味です。混同するけどまぁ許してください；
*2 ごめんなさい；ツリー化で使ってます。
*3 作った本人がそうだった（爆）。
*4 Johnは使う人それぞれが自分で調節できたらいいなと思って作っておりました（って大それたデザインじゃ全くないけれど；）。カスタマイズはもちろん自由。
*5 いや、テンプレとかって大体自分でやりたいように調節するのが大前提なものですよね。手を出せないような完成品も中にはあるけれど。
このスキン*1自分で言うのもなんですが、やたらとシンプルです。
画像無し*2で、デザイン自体もまるでカスタマイズ前のサンプルに近いほどの潔さ（笑）。
そのため、色に依存する部分が多く、シンプルであるがゆえに、飽きが早いかもしれない。*3
そんな時、ぜひお勧めしたいのが色変え*4です（オリジナルの色がやだなぁ、という方もぜひｗ）。
改造なんてやったことない、という人もご安心あれ。*5
色変えでいじるのは『スタイルシートの編集』のみで、要は色を表している部分（#XXXXXX）を、それぞれ好きな色に置き換えてしまうというだけ。
■オリジナルの色はこうなってます
main ■#e1e1ac ※旧■#d9d98c（背景色）
color：.sttl / .cal_month
bg-color：body / td
text ■#000000 (文字色)
color ：td / a:active / a:hover / .e_ttl / .r_ttl / .e_ttl a:linkなど
accent ■#695924 ※旧■#221100 (アクセント色)
color ：.intro / .stxt / .ttl /.ttl a:link,a:visited
bg-color：.cal_month
border-top：.e_ttl
link ■#8C7B2B ※旧■#b3b34d (リンク色)
color :a:link / .ttl a:hover / .ttl a:active
vlink ■#cc3300 ※旧■#8C7B2B (リンク済色)
color :a:visited
※main,text,accent,link,vlinkは、ここでわかりやすいように名前をつけてみただけです。
一応上の書き方の説明をすると、
mainの色#d9d98cは、color（文字の色）としての指定先に.sttlや.cal_monthがある。
bg-color（背景の色）としての指定先にbody や tdがある。
みたいな感じ。bg-color（背景の色）としての指定先にbody や tdがある。
■方法（もなにもないけど
上の色（#d9d98cとか#221100とか）を変えたい色と総取替えしてしまいましょう。
winだとメモ帳にコピペして、置換キー（Ctrl＋H）の「すべて置換」を使うととってもラクチン！
サンプルとして、こんな色変え方をやってみました。
（m：main、t：text、a：accent、l：link、v：vlinkの略）
|
| ||||||||||||
|
| ||||||||||||
|
| ||||||||||||
|
| ||||||||||||
|
| ||||||||||||
|
| ||||||||||||
|
| ||||||||||||
|
| ||||||||||||
*{scrollbar-arrow-color : #330000;
scrollbar-face-color : #main色;
scrollbar-highlight-color : #f5f5e7;}
scrollbar-face-color : #main色;
scrollbar-highlight-color : #f5f5e7;}
ただ、mainやtext、accentの色を入れ替えるだけでもまたずいぶん変わるはず。
改造初の人も、これを機にアレコレ試してみるのも面白いかも。
自分のお気に入りカラーを見つけて色々遊びましょ〜。
オススメカラーの報告もお待ちしてマッスル。
■色の参考サイト
・色のみじん切り --色見本をダウンロードできます
http://members.at.infoseek.co.jp/color_onion/
・COLORSTROLOGY --誕生日ごとに色があったってご存知でした？
http://www.colorstrology.com/colorstrology_sniffer.html
・色にょろのページ --色名がついたものには何がある
http://www.asahi-net.or.jp/~QD7K-SD/
・Color Slider --オンラインだけど便利やのぉ〜
http://report.s22.xrea.com/
・ColorMatch 5K http://colormatch.dk/
・ColorBlender http://colorblender.com/
・THE RETURN OF DESIGN http://returnofdesign.com/colors/
続きはどうでもいいつぶやき･･ 公開して早く書こうと思ったのが、1ヶ月後になってしまいましたが･･･まぁいいや。
*1 本来はテンプレートなんだろうけど、何かの名残でスキンと時々書いちゃってます。テンプレとほぼ同じ意味です。混同するけどまぁ許してください；
*2 ごめんなさい；ツリー化で使ってます。
*3 作った本人がそうだった（爆）。
*4 Johnは使う人それぞれが自分で調節できたらいいなと思って作っておりました（って大それたデザインじゃ全くないけれど；）。カスタマイズはもちろん自由。
*5 いや、テンプレとかって大体自分でやりたいように調節するのが大前提なものですよね。手を出せないような完成品も中にはあるけれど。
2005/09/10 09:38 Sat | edit? | trackback(0) | comment(7)
Comment
はじめまして、イシコロです。
シンプルなデザインに魅せられて、Johnを使わせていただいてます。
それで、いきなり質問で申し訳ないのですが…。
当記事のスクリーンショットにもあります、「スクロールバー」の変更方法を教えていただけますでしょうか？
具体的に、『scrollbar-face-color:#000000;』などの書式を、cssのどの部分に挿入したらよいかを教えていただけると助かります。
こちらでもいろいろと試したのですが、単純にbodyタグに挿入してもスクロールバーは変更されず、それっぽいクラスの中に挿入してもダメでした。
初歩的な質問で申し訳ありませんが、よろしくお願いします。。。
シンプルなデザインに魅せられて、Johnを使わせていただいてます。
それで、いきなり質問で申し訳ないのですが…。
当記事のスクリーンショットにもあります、「スクロールバー」の変更方法を教えていただけますでしょうか？
具体的に、『scrollbar-face-color:#000000;』などの書式を、cssのどの部分に挿入したらよいかを教えていただけると助かります。
こちらでもいろいろと試したのですが、単純にbodyタグに挿入してもスクロールバーは変更されず、それっぽいクラスの中に挿入してもダメでした。
初歩的な質問で申し訳ありませんが、よろしくお願いします。。。
イシコロ URL #4R2EFUJ2 | 2005.09.10 22:59 | edit?
連続投稿すみません…。
以前の投稿記事を読み返していましたらスクロールバーに関しての内容を発見しまして、無事に変更することができました。
*{scrollbar-arrow-color : #000000;}
のように、ワイルドカードを書式とすることもできるのですね…。
やはり、cssやxmlは奥が深くて面白いです。。。（ただ私が知識不足なだけですが;
それでは、お騒がせして申し訳ありませんでした。
テンプレート関係の作業も含め、いろいろと頑張ってくださいっ。
以前の投稿記事を読み返していましたらスクロールバーに関しての内容を発見しまして、無事に変更することができました。
*{scrollbar-arrow-color : #000000;}
のように、ワイルドカードを書式とすることもできるのですね…。
やはり、cssやxmlは奥が深くて面白いです。。。（ただ私が知識不足なだけですが;
それでは、お騒がせして申し訳ありませんでした。
テンプレート関係の作業も含め、いろいろと頑張ってくださいっ。
イシコロ URL #4R2EFUJ2 | 2005.09.10 23:13 | edit?
イシコロさん、こんばんは〜。はじめまして。
上の画像は色以外も多少いじったので、スクロールバーについても一緒に書いてしまえば良かったのですが、追記が遅れ混乱させてしまいすみません；；
でも無事？変更ができてなによりです。
独学で好き勝手いじってきたタイプなので、基礎的なことでも内容によってはサッパリわからない事が多いです･･。*もどこかで見て覚えてたので時々使ってます。（いいのかそれで）
JohnがイシコロさんのCSS理解の実験場として、少しでも手助けになれば嬉しいです（XMLは私も不勉強で記述も間違えてるかも･･･/爆）。ぜひアレコレ試してみてください＾＾
コメントありがとうございました♪
上の画像は色以外も多少いじったので、スクロールバーについても一緒に書いてしまえば良かったのですが、追記が遅れ混乱させてしまいすみません；；
でも無事？変更ができてなによりです。
独学で好き勝手いじってきたタイプなので、基礎的なことでも内容によってはサッパリわからない事が多いです･･。*もどこかで見て覚えてたので時々使ってます。（いいのかそれで）
JohnがイシコロさんのCSS理解の実験場として、少しでも手助けになれば嬉しいです（XMLは私も不勉強で記述も間違えてるかも･･･/爆）。ぜひアレコレ試してみてください＾＾
コメントありがとうございました♪
クスノキ URL #XmHeyEnw | 2005.09.12 04:16 | edit?
はじめまして。
Johnダウンロードして使わせていただいております。
シンプルかつ渋い配色がいいですね。
しかし、スタイルシートとかカスタマイズとか、
ぜんぜんわかっていない自分^^；
Johnダウンロードして使わせていただいております。
シンプルかつ渋い配色がいいですね。
しかし、スタイルシートとかカスタマイズとか、
ぜんぜんわかっていない自分^^；
ｱﾜﾜ･･･レスが遅くなって申し訳ありません･･･orz
本日のラーメンさんこんにちは。はじめまして！
John気に入っていただいて、どうもありがとうございます＾＾
誰かに使っていただくのはどこか恥ずかしいけれどやはり素直に嬉しいです。
カスタマイズ･･･というのは、テンプレートでも何でも最初は「こうするといいなぁ」と思うところから始まってると思います。例えばブログを使っていて、もうちょっと字が大きいといいなとか、配色を季節に合わせて変えたいとか、コメントの日時の位置ちょっと左にずらしたいとか、そんなちょっとした所から。
なのでブログを使っていてもし完全に満足しているのであれば、手を加える必要は全くないのですよね。
というわけでこの先、本日のラメーンさんが（美味しそうなハンドルですねｗ）こうしたい！という熱が我慢できなくなってから、カスタマイズについてスタイルシートなりHTMLなりを勉強されても遅くないと思います。
ただ、勉強といってももちろんはじめは誰しもサッパリｗですが、検索かければ分かりやすく教えてくれるサイトは沢山ありますよね。そこを見て意味を理解するだけでも、ずいぶん違うはずです。面白い世界なので時間が空いたときにでもちょっと手をつっこんでみるといいかもしれませんｗ
また、カスタマイズでも何でもわからなくなったらお気軽にどうぞ〜
わかる範囲でお答えしマッス（私も勉強中なのでまだまだなのですがorz）
コメントもありがとうございました＾＾
本日のラーメンさんこんにちは。はじめまして！
John気に入っていただいて、どうもありがとうございます＾＾
誰かに使っていただくのはどこか恥ずかしいけれどやはり素直に嬉しいです。
カスタマイズ･･･というのは、テンプレートでも何でも最初は「こうするといいなぁ」と思うところから始まってると思います。例えばブログを使っていて、もうちょっと字が大きいといいなとか、配色を季節に合わせて変えたいとか、コメントの日時の位置ちょっと左にずらしたいとか、そんなちょっとした所から。
なのでブログを使っていてもし完全に満足しているのであれば、手を加える必要は全くないのですよね。
というわけでこの先、本日のラメーンさんが（美味しそうなハンドルですねｗ）こうしたい！という熱が我慢できなくなってから、カスタマイズについてスタイルシートなりHTMLなりを勉強されても遅くないと思います。
ただ、勉強といってももちろんはじめは誰しもサッパリｗですが、検索かければ分かりやすく教えてくれるサイトは沢山ありますよね。そこを見て意味を理解するだけでも、ずいぶん違うはずです。面白い世界なので時間が空いたときにでもちょっと手をつっこんでみるといいかもしれませんｗ
また、カスタマイズでも何でもわからなくなったらお気軽にどうぞ〜
わかる範囲でお答えしマッス（私も勉強中なのでまだまだなのですがorz）
コメントもありがとうございました＾＾
クスノキ URL #XmHeyEnw | 2005.09.18 23:14 | edit?
わー楽しい！
はじめまして。「FC2ブログの歩き方」管理人です(^^ゞ Johnはdanielさんに教えていただいて知ったのですが、魅力的です。そして、これ。
色が変えられますよーというのは分かってはいても、実際に
こういう風に見せていただけるとイメージがつくりやすいですよね。
見ていて楽しいスクリーンショット群です〜。
はじめまして。「FC2ブログの歩き方」管理人です(^^ゞ Johnはdanielさんに教えていただいて知ったのですが、魅力的です。そして、これ。
色が変えられますよーというのは分かってはいても、実際に
こういう風に見せていただけるとイメージがつくりやすいですよね。
見ていて楽しいスクリーンショット群です〜。
おおぉ！（ドキドキｗ
sugarさんこんばんは。はじめまして！
色変え体験版としてちょっと設置してみたのですが、楽しんでいただけて幸いです＾＾
色次第で印象もガラリと変わるので、多くの人に気軽にカラーリング挑戦して欲しいなと思いつつ、自分でも楽しんじゃいましたｗ
ただ、問題なのが、読み込みに時間がかかるのと、
それ以前の、組み合わせのセンスに限界が･･･orz
楽しいけれど、悲しいところです；
sugarさんこんばんは。はじめまして！
色変え体験版としてちょっと設置してみたのですが、楽しんでいただけて幸いです＾＾
色次第で印象もガラリと変わるので、多くの人に気軽にカラーリング挑戦して欲しいなと思いつつ、自分でも楽しんじゃいましたｗ
ただ、問題なのが、読み込みに時間がかかるのと、
それ以前の、組み合わせのセンスに限界が･･･orz
楽しいけれど、悲しいところです；
クスノキ URL #XmHeyEnw | 2005.09.20 21:53 | edit?
Trackback
URL : http://seraq.blog19.fc2.com/tb.php/7-6f279beb
