■COLOR CHOICES
category: blog
また記述が遅れてしまいましたが＿|￣|○|||
色変えの体験版として→にちょっと設置してみました。
スタイルシートの切り替えスクリプトを使って、
以前の記事で考えてみたものとあわせて12色分の変更が可能です。
読み込みが重くなってしまいホント、申し訳ないのですが、
コレ、楽しいですよね〜！！アッハハ。
一応スキン『JOHN』の公開分まで使ってようと思うのだけど、
この切り替えスクリプトはこんな色変えだけじゃなく、スタイルも大幅ーに変更したりと、
まだまだ使い勝手のある優れもの。色々考えが浮かんだりと楽しいです。
作った人ありがとうございます（人）かなり、便利です。
参考にさせていただいたサイトさん（ここでの説明は面倒なので省きますね；あしからず）
■スタイルシート 切り替え スクリプト
Zakimi::Blog、7-oceans、Weblog Sweetplum
色変えの体験版として→にちょっと設置してみました。
スタイルシートの切り替えスクリプトを使って、
以前の記事で考えてみたものとあわせて12色分の変更が可能です。
読み込みが重くなってしまいホント、申し訳ないのですが、
コレ、楽しいですよね〜！！アッハハ。
一応スキン『JOHN』の公開分まで使ってようと思うのだけど、
この切り替えスクリプトはこんな色変えだけじゃなく、スタイルも大幅ーに変更したりと、
まだまだ使い勝手のある優れもの。色々考えが浮かんだりと楽しいです。
作った人ありがとうございます（人）かなり、便利です。
参考にさせていただいたサイトさん（ここでの説明は面倒なので省きますね；あしからず）
■スタイルシート 切り替え スクリプト
Zakimi::Blog、7-oceans、Weblog Sweetplum
2005/09/21 10:23 Wed | edit? | trackback(0) | comment(0)
■自分で調節する楽しみ 続
category: skin：John
前回の続きで色の追加分をば。
※オリジナルからの変更点
・サイドメニューのタイトルを左ラインに
※ツリー化用の画像(なるべくダウンロードをおすすめ）
・従来の末端が切れてしまうのを直した分
・黒背景用に作った分
こんなところですが･･説明下手で何やらわかりづらいかも。申し訳ありませぬ･･。
スペルcornerだしね･･orz
|  | ||||||||||||
|  | ||||||||||||
※オリジナルからの変更点
・サイドメニューのタイトルを左ラインに
.sttl{ }中にある、background:#xxxxxx;を削除し(もしくはメイン色と同じに書き換え)、
color: #xxxxxx ;border-left: 5px #xxxxxx solid; を追加する。
・引用（blockquote）の色をアクセント色と同じにcolor: #xxxxxx ;border-left: 5px #xxxxxx solid; を追加する。
blockquote{ }中に、color: #アクセント色; を追加する。
・記事のタイトル色をアクセント色と同じに.e_ttl { }と.e_ttl a:link,.e_ttl a:visited,.e_ttl a:hover,.e_ttl a:active{ }中にある
color: #テキスト色;をcolor: #アクセント色;に書き換える。
・ツリーの装飾color: #テキスト色;をcolor: #アクセント色;に書き換える。
*{scrollbar-arrow-color : #330000;
scrollbar-face-color : #main色;
scrollbar-highlight-color : #f5f5e7;}を追加する。
scrollbar-face-color : #main色;
scrollbar-highlight-color : #f5f5e7;}を追加する。
※ツリー化用の画像(なるべくダウンロードをおすすめ）
・従来の末端が切れてしまうのを直した分
末端画像→
【末端用の編集】スタイルシート編集の一番最後
#side ul.tree li.end {
background-image: url(http://blog19.fc2.com/s/seraq/file/coner.gif);
}
のURLを「http://blog19.fc2.com/s/seraq/file/coner1.gif」と書き換えるか、ダウンロードして自分の鯖にアップした画像URLに書き換えてください。
【末端用の編集】スタイルシート編集の一番最後
#side ul.tree li.end {
background-image: url(http://blog19.fc2.com/s/seraq/file/coner.gif);
}
のURLを「http://blog19.fc2.com/s/seraq/file/coner1.gif」と書き換えるか、ダウンロードして自分の鯖にアップした画像URLに書き換えてください。
・黒背景用に作った分
通常画像・白→
末端画像・白→
【通常用の編集】スタイルシート編集の一番最後から2番目にある
#side ul.tree li {
margin: 0px;
padding: 0px 0px 0px 16px;
background-image: url(http://blog19.fc2.com/s/seraq/file/coner2.gif);
background-repeat: no-repeat;
}
のURLを「http://blog19.fc2.com/s/seraq/file/wconer2.gif」と書き換えるか、ダウンロードして自分の鯖にアップした画像URLに書き換えてください。末端は上の末端用の編集を参考に。URLは「http://blog19.fc2.com/s/seraq/file/wconer.gif」です。
末端画像・白→【通常用の編集】スタイルシート編集の一番最後から2番目にある
#side ul.tree li {
margin: 0px;
padding: 0px 0px 0px 16px;
background-image: url(http://blog19.fc2.com/s/seraq/file/coner2.gif);
background-repeat: no-repeat;
}
のURLを「http://blog19.fc2.com/s/seraq/file/wconer2.gif」と書き換えるか、ダウンロードして自分の鯖にアップした画像URLに書き換えてください。末端は上の末端用の編集を参考に。URLは「http://blog19.fc2.com/s/seraq/file/wconer.gif」です。
こんなところですが･･説明下手で何やらわかりづらいかも。申し訳ありませぬ･･。
スペルcornerだしね･･orz
2005/09/13 02:04 Tue | edit? | trackback(0) | comment(2)
■自分で調節する楽しみ
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自分で言うのもなんですが、やたらとシンプルです。
画像無し*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/
続きはどうでもいいつぶやき･･ 続きを読む ...
2005/09/10 09:38 Sat | edit? | trackback(0) | comment(7)
■オマガッ！（混乱気味のアメリカ人のように
category: skin：John
タイトルだけ見ると、なんじゃこりゃ？ですが；
私の最初の驚きを表現。
なんと、Johnがソムリエ版テンプレートコンテストで推薦されていました。
ｴｴｴーｯ･･･！！オマガオマガオーマイガッ！ですよ奥さん。
（だめだ、こんなｱﾌｫな文章はコンテストに相応しくない）
はじめ、テンプレダウンロードのコメントで気付いて、リンクから飛んだ先をみて卒倒してしまいました。ちょっとその前におさらい（何せ新参者ですのでよく分かってない部分が；）
ソムリエ版テンプレートコンテストとは？
ふむふむ。FC2ブログに登録されているテンプレート（公式・共有）について、ユーザが評価し投票するというもので、今回は9/1〜14まで作品を推薦で募って9/15〜投票ということのようです。すごい、テンプレ関心度がすごいよ･･･FC2！
ところで、Johnは2番目の推薦番号で（白目）、Fcafeの（こっそりリンク張ってたので余計ビックリしました；）danielさんによる身に余るほどの推薦文によって紹介されていました。
もう、どうしましょうか･･･掛け軸にして飾っておきたいぐらいです（やめなはれ）
こんな素晴らしい推薦文をいただけただけで本当に満足です。感謝してます（T人T）
FC2にやって来て間もなく、よく分からん状態からとりあえずスキン公開だけして、このままこっそりちまちまやっていくんだろうというところに、････こっそり嬉し泣きばっかりだな（笑）
コンテストには、他に素敵なテンプレが続々と紹介されつつあります。
皆さんもお好きな1品、紹介してテンプレ話に興じてみてはいかがでしょう。私はとりあえず陰ながら応援ｗ（え？だってまだ勝手もわかってないのです；）
John、不出来なヤツですがよろしく可愛がっていただければ幸いです。
danielさん、推薦ホンマにありがとうございました。
関連サイト
・FC2ブログの歩き方
http://sugar.squares.net/fc2/
・FC2ブログの歩き方 blog branch
http://fc2blogwalker.blog21.fc2.com/
私の最初の驚きを表現。
なんと、Johnがソムリエ版テンプレートコンテストで推薦されていました。
ｴｴｴーｯ･･･！！オマガオマガオーマイガッ！ですよ奥さん。
（だめだ、こんなｱﾌｫな文章はコンテストに相応しくない）
はじめ、テンプレダウンロードのコメントで気付いて、リンクから飛んだ先をみて卒倒してしまいました。ちょっとその前におさらい（何せ新参者ですのでよく分かってない部分が；）
ソムリエ版テンプレートコンテストとは？
テンプレートソムリエは、テンプレートにかんして関心の高いFC2ブログユーザの集まりです。オフィシャルのテンプレートコンテストではない、自分たちの手作りのテンプレートコンテストができないか。公式・共有の別なく、「ユーザの視点に立って」テンプレートを見てみよう。
それが「ソムリエ版テンプレートコンテスト」です。
ふむふむ。FC2ブログに登録されているテンプレート（公式・共有）について、ユーザが評価し投票するというもので、今回は9/1〜14まで作品を推薦で募って9/15〜投票ということのようです。すごい、テンプレ関心度がすごいよ･･･FC2！
ところで、Johnは2番目の推薦番号で（白目）、Fcafeの（こっそりリンク張ってたので余計ビックリしました；）danielさんによる身に余るほどの推薦文によって紹介されていました。
【 推薦理由 】：
無画像テンプレートの一究極。
（ 私が「色」に覚醒させられた一品です ）
【磐石のレイアウト】
○（エントリ）タイトルの文字列長を選ばない柔軟性
○ 必要且つ十分な記事領域
○ 計算を尽くされた余白設定
【絶妙の配色】
○ 強烈な個性を発揮しつつも目に優しいコントラスト
○ カレンダー部の設定は小憎らしい程
たった２（３）色でもここまで出来るんですね。
普通の２カラムなのに、この個性はどうですか。
しかも「読み易さ」はこの上ないと来ています。
また、配色変更で様々なイメージを演出できそうです
もう、どうしましょうか･･･掛け軸にして飾っておきたいぐらいです（やめなはれ）
こんな素晴らしい推薦文をいただけただけで本当に満足です。感謝してます（T人T）
FC2にやって来て間もなく、よく分からん状態からとりあえずスキン公開だけして、このままこっそりちまちまやっていくんだろうというところに、････こっそり嬉し泣きばっかりだな（笑）
コンテストには、他に素敵なテンプレが続々と紹介されつつあります。
皆さんもお好きな1品、紹介してテンプレ話に興じてみてはいかがでしょう。私はとりあえず陰ながら応援ｗ（え？だってまだ勝手もわかってないのです；）
John、不出来なヤツですがよろしく可愛がっていただければ幸いです。
danielさん、推薦ホンマにありがとうございました。
関連サイト
・FC2ブログの歩き方
http://sugar.squares.net/fc2/
・FC2ブログの歩き方 blog branch
http://fc2blogwalker.blog21.fc2.com/
2005/09/04 23:48 Sun | edit? | trackback(0) | comment(5)
■JOHN修正
category: skin：John
ダウンロードされた皆様、本当にありがとうございます。
Johnは実はちょこちょこ修正してまして、特に8月31日の最終更新の際には
記事タイトルで飛べるようにして、またいらないタグを消したり、メニューからコメントを押して投稿する時にCOMMENT？〜TRACKBACK部分のレイアウトが左に崩れてしまうのも見つけたので、修正しました（確認まだ取れてないですが、大丈夫そうかな；）
何だかんだとあちこち変わってしまいましたので（滝汗）、8月31日のお昼？か夕方以前にダウンロードされた方で（記事タイトルがリンクされてる場合は修正後なので大丈夫です）不具合が出た方は最新版を再ダウンロードするようお願いいたします。
ご迷惑おかけして申し訳ありませんｍ（_ _；）ｍ
Johnは実はちょこちょこ修正してまして、特に8月31日の最終更新の際には
記事タイトルで飛べるようにして、またいらないタグを消したり、メニューからコメントを押して投稿する時にCOMMENT？〜TRACKBACK部分のレイアウトが左に崩れてしまうのも見つけたので、修正しました（確認まだ取れてないですが、大丈夫そうかな；）
何だかんだとあちこち変わってしまいましたので（滝汗）、8月31日のお昼？か夕方以前にダウンロードされた方で（記事タイトルがリンクされてる場合は修正後なので大丈夫です）不具合が出た方は最新版を再ダウンロードするようお願いいたします。
ご迷惑おかけして申し訳ありませんｍ（_ _；）ｍ
2005/09/02 16:26 Fri | edit? | trackback(0) | comment(0)
