SSブログ

iPod nano pink [iPod]


新色[pink]が追加されました。

applestoreで24時間以内出荷だそうです。
8GBで¥23,800(税込み)。











W61*系のスレッドは「もうずっと人大杉」で昨日から見ることできません。^^;


nice!(2)  コメント(10)  トラックバック(1) 
共通テーマ:パソコン・インターネット

nice! 2

コメント 10

sknys

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

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

kovaio

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

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

sknys

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) 

kovaio

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) 

sknys

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) 

kovaio

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

こんな回答でよかったかしら?^^;
by kovaio (2008-02-01 20:22) 

sknys

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

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

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

kovaio

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) 

sknys

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

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

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

kovaio

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) 

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 1

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。