デジモノ大好き

kovaioさん、こんばんは。
2008年冬の新色「ピンク・スキン」に変えたくなっちゃった＾＾
「SkinSwitcher」はデザインを変更するよりも、
スキン・カラーを変える方がスッキリしますね。

Appleサイト→iPod nano→Featuresの右上にあるカラーボタン●を
「SkinSwitcher」に流用出来ないでしょうか＾＾;
２セット画像の下の●は縦位置をズラして指定しているのかな？
by sknys (2008-01-26 19:43) 

sknysさんこんにちはっ。＾＾
サンプル作ってみました。
右メニューの一番下にあります。
通常のマウスオーバー＋スキンチェンジャーでやってみました。

いかがでしょ？
by kovaio (2008-01-28 10:47) 

kovaioさんとは違う方法ですが、
縦位置をズラすCSS技でカスタマイズしてみました＾＾
a:hover{background-p osition:0px 17px}

サイドに入れると画像（ボタン）が欠けてしまうので、
{padding:0px 7px 5px 0px}で調整しています。
IEでも正しく表示されているでしょうか。

Appleの「SkinSwitcher」ボタンは一体どういう仕組みなのかな？
a:hoverと同じように、a:linkで縦位置を指定出来ると簡単なんですが。
by sknys (2008-01-28 20:46) 

sknysさん　こんにちはっ＾＾
appleと同じ方法ですね。

動作確認してみました。
kovaioの環境は、winXP　ie6.0.2　FireFox2.0.0
こんな感じに見えます。
http://www002.upp.so-net.ne.jp/b_chboy2/blog/imgs/ie_ff.jpg
上の赤バージョンが、ie。下の緑バージョンがFireFox。
ちょっと左に寄っちゃってます。
paddingで修正可能かな。

とappleのSkinSwitcherはCSSを切り替えてる訳ではなく、読み込む画像を変えてるのではないかと。

詳しく見てないんですけど、
colorpicker.js
features.js
ここらがその働きをしてるのんではないかなぁ～なんて。＾＾；
by kovaio (2008-01-28 22:06) 

kovaioさん、FirefoxとIEの動作確認ありがとう。
同じFirefoxでもMacとWinでは見え方が違うんですね。
Mac OS X（10.1.5）＋ Firefox（1.0.7）ではバッチリなんですが。

iPodのカラーボタン風にカスタマイズ出来ました＾＾
この方がhover指定していないので、CSSもシンプルです。
後は画像が正しく表示されればなぁ。

スタイルシートの本には「ボタンサイズの透過GIF画像を配置しておく」
と書いてあります。
「透過GIF画像」が良く分からない＾＾;
by sknys (2008-02-01 19:38) 

sknysさん　こんばんはっ。＾＾
「透過GIF画像」は、透明gifのことです。
テーブル組むときにスペーサーの役割でよく使われます。
テーブルが崩れるのを防いだりしてくれます。
kovaioもたまに使ったりします。
最近のでは
「W61S Cyber-shotケータイ その3 ・・・」の
「自動レンズカバー」の右側に透明gifを入れてます。

こんな回答でよかったかしら？＾＾；
by kovaio (2008-02-01 20:22) 

「透過GIF画像」についての説明ありがとうございます。
絶対に必要というものじゃないのね。
いずれにしても字数制限で、画像を５つも貼れませんが＾＾;

a:link{background-po siton:0px 17px}はno-repeatにすると、
何故か画像が表示されないんですよ。
repeat-yにして横並びの画像が表示されないように工夫しました。

Win環境でも正しく表示されているかしら？＾＾
by sknys (2008-02-02 14:00) 

sknysさん　こんばんはっ。＾＾

「Choose a color:」はie、FireFox共に見えるようになりました。
さすがです。

比較キャプチャーアップしました。
http://www002.upp.so-net.ne.jp/b_chboy2/blog/imgs/ie_ff2.jpg

上の青がfirefox
したの赤がie

ボールに破線が入っていますが、その中がリンクエリアです。
もうちょいスペース取れれば、完璧かと。＾＾；
by kovaio (2008-02-04 21:44) 

paddingを弄るのは止めて、ちょっと複雑ですが正攻法で修正しました。
a要素をblockレヴェルに変換して、floatで回り込ませる方法です。
ボタン１個分のサイズを指定すればpaddingに頼る必要はないかと。

a{display:block; float:left; width:17px; height:17px; margin-right:1px}

でも、どうしてIEだとリンクエリアが限定されちゃうのかな？
‥‥やっぱり、おバカさんなのでしょうか＾＾
by sknys (2008-02-05 23:00) 

sknysさん　こんにちはっ。＾＾
いやー、さすがですね。
こういう微調整を確認せずにできちゃうところがさすがです。＾＾

比較キャプチャーアップしました。
http://www002.upp.so-net.ne.jp/b_chboy2/blog/imgs/ie_ff3.jpg

上の緑がie。下の赤がFireFox。
ieの方はカラーボールの下にアクティブのグレー枠が出ちゃってます。
sknysさんの設定で間違ってないんで、ieがおバカなのかも。＾＾；

win-ieのシェア率は75％くらいはあるのと思うので対応ですのであれば、
height:16px;
で設定してみるのもありかと。。。＾＾；
by kovaio (2008-02-08 15:50)