SmallStyle

_ RSS Feed のアイコンを模様替え

IE7 での RSS のアイコンは Firefox で使われている オレンジの RSS アイコンを採用するそうで，このアイコンが次期標準となりそうです．Bloglines のアイコンも変更されているようですし，このサイトでも早速新しいものに差し替えてみました．

あと，このサイトの RSS Feed のアイコンについては，めんどくさがりなので audiofan.net で作成されたアイコンを利用させてもらいました．

_ Lightbox JS ちょこっとカスタマイズ

Lightbox JS を使って画像をかっこよく見せてみるの続編．このサイトでは Lightbox JS を使って画像をポップアップ表示させているのですが，知らずにクリックすると画像が表示されてどうしたものかと思われてしまうかもしれません．

というわけで，ポップアップで表示された画像の <a> タグ内の title 属性を設定し，tooltip が表示されるようにしてみました．lightbox.js のソース，278 行目あたりにあるコメント // create link のあたりで，アンカータグに title 属性をセットする記述を追記します．

// create link
var objLink = document.createElement("a");
objLink.setAttribute('href','#');
// アンカータグに title 属性をセットする
objLink.setAttribute('title','Click to close');
objLink.onclick = function () {hideLightbox(); return false;}
objLightbox.appendChild(objLink);

これでポップアップされた画像上で "Click to close" という tooltip が表示されます．Firefox と IE で動作確認済みです．

_ MacBook Pro & iMac

昨年から話題にあがっていた，Intel Mac ．ついに登場しましたね．iBook と Mac mini が発表されるのでは，とうわさされていましたが，PowerBook の後継となる，MacBook Pro．そして iMac の Intel 版が発表されました．ネット上では発表を受けていろいろコメントされていますが，私の場合，iBook が出たなら即 Switch を考えていたのですが，MacBook Pro はちょっと高いなぁ．2006 年中にはすべてのラインナップを Intel に移行するようなので，12inch の iBook 待ちかなぁ，でもその前に iMac を買ってしまいそうな気がします…

_ userChrome.css いじり

Stylish を使いながら tab 周りをできるだけすっきりさせるようにいろいろ調整．今日はとりあえず tab をフラットな感じにして，高さもできるだけおさえる感じに．最近はメニューやツールバーを Office XP のようなフラットな外観にする FlatStyle (日本語版)という拡張をインストールしているので，これに合わせた感じにしてみました．

/* アクティブなタブの文字も太字にしない */
tab[selected="true"] {
   font-weight:normal !important;
}

/* フラットスタイル */
.tabbrowser-tabs tab {
   margin: 0 1px 2px 0 !important;
   padding: 0 0 1px 1px !important;
   color: black !important;
   background-color: transparent !important;
   -moz-appearance:none !important;
   -moz-border-top-colors: none !important;
   -moz-border-right-colors: none !important;
   -moz-border-bottom-colors: none !important;
   -moz-border-left-colors: none !important;
   -moz-border-radious-topleft:none !important;
   -moz-border-radious-topright:none !important;
   -moz-border-radious-bottomleft:none !important;
   -moz-border-radious-bottomright:none !important;
   border: 1px solid transparent !important;
}

.tabbrowser-tabs tab:hover {
   border: 1px solid Highlight !important;
   border: solid ThreeDShadow 1px !important;
}

.tabbrowser-tabs tab[selected=true] {
   border: 1px solid Highlight !important;
   background: Highlight url('white-70.png') !important;
}

/* タブにフォーカスが当たっときの点線を消す */
tab:focus > .tab-middle {
   outline-width: 0 !important;
}

/* タブのテキストを少し下にする */
tab .tab-text {
   margin-top: 0 !important;
   padding-top: 1px !important;
}

white-xx.png なんかは FlatStyle の中にあるのを借用（というかコード周りもほとんどぱくってますが…）．とりあえずこの辺で完成ということで，あまり頻繁に変更するものではないものは，今までどおり userChrome.css で定義することにしよう．まぁ，この辺はひとそれぞれ管理の仕方があるだろうけど．

以前にも Office XP 風にする userChrome.css を書いたのですが，これはメニュー周りを中心にしたものだったので，1 年ぶりの続編ということで．