hail2u.net

FirefoxのuserChrome.cssネタ #11

Posted at 2006-10-31T17:57:00+09:00 in Software

Firefox 2のデフォルト・テーマは悪くは無い。けれども画像で作ったタブとか画像で作ったタブとか画像で作ったタブとか画像で作ったタブとか画像で作ったタブとかはなんだかなーと思ってしまう。というわけで以前書いたフラットなタブを実現するuserChrome.cssネタをFirefox 2に対応させたりとか他にもいくつか。

タブをフラットなボタンにする(Firefox 2向け)

.tabbrowser-tabs {
  background-image: none !important;
}

.tabbrowser-tab {
  margin-right: 3px !important;
}

.tabbrowser-tab[selected="true"] {
  font-weight: normal !important;
}

.tabbrowser-tab > .tab-image-left {
  border-top: 1px solid threedshadow !important;
  border-bottom: 1px solid threedhighlight !important;
  border-left: 1px solid threedshadow !important;
  width: 4px !important;
  color: infotext !important;
  background-color: infobackground !important;
  background-image: none !important;
  -moz-border-radius-topleft: 0px !important;
}

.tabbrowser-tab:not([selected="true"]) > .tab-image-left {
  margin: 0px !important;
  border-color: -moz-dialog !important;
  height: 24px !important;
  color: -moz-dialogtext !important;
  background-color: -moz-dialog !important;
  background-image: none !important;
}

.tabbrowser-tab:hover:not([selected="true"]) > .tab-image-left {
  margin: 0px !important;
  border-top: 1px solid threedhighlight !important;
  border-bottom: 1px solid threedshadow !important;
  border-left: 1px solid threedhighlight !important;
  height: 24px !important;
  background-image: none !important;
}

.tabbrowser-tab > .tab-image-middle {
  padding: 0px !important;
  border-top: 1px solid threedshadow !important;
  border-bottom: 1px solid threedhighlight !important;
  color: infotext !important;
  background-color: infobackground !important;
  background-image: none !important;
}

.tabbrowser-tab:not([selected="true"]) > .tab-image-middle {
  margin: 0px !important;
  border-color: -moz-dialog !important;
  height: 24px !important;
  color:  -moz-dialogtext !important;
  background-color: -moz-dialog !important;
  background-image: none !important;
}

.tabbrowser-tab:hover:not([selected="true"]) > .tab-image-middle {
  margin: 0px !important;
  border-top: 1px solid threedhighlight !important;
  border-bottom: 1px solid threedshadow !important;
  height: 24px !important;
  background-image: none !important;
}

.tabbrowser-tab > .tab-image-middle > .tab-icon > .tab-icon-image {
  margin-top: 0px !important;
}

.tabbrowser-tab > .tab-image-middle > .tab-text {
  margin-top: 0px !important;
  border: none !important;
}

.tabbrowser-tab > .tab-image-right {
  border-top: 1px solid threedshadow !important;
  border-bottom: 1px solid threedhighlight !important;
  border-right: 1px solid threedhighlight!important;
  width: 1px !important;
  color: infotext !important;
  background-color: infobackground !important;
  background-image: none !important;
  -moz-border-radius-topright: 0px !important;
}

.tabbrowser-tab:not([selected="true"]) > .tab-image-right {
  margin: 0px !important;
  border-color: -moz-dialog !important;
  height: 24px !important;
  color:  -moz-dialogtext !important;
  background-color: -moz-dialog !important;
  background-image: none !important;
}

.tabbrowser-tab:hover:not([selected="true"]) > .tab-image-right {
  margin: 0px !important;
  border-top: 1px solid threedhighlight !important;
  border-bottom: 1px solid threedshadow !important;
  border-right: 1px solid threedshadow !important;
  height: 24px !important;
  background-image: none !important;
}

.tabs-left,
.tabs-right,
.tabs-bottom {
  display: none !important;
}

長い。ちょっと詰めて無いので無駄なところが多いのかもしれない。

という感じの表示になる。左からアクティブなタブ・カーソルでポイントした非アクティブなタブ・非アクティブなタブのプレビュー。

タブを選択した時に表示される点線を消す

.tabbrowser-tab > .tab-image-middle > .tab-text {
  border: none !important;
}

何気にoutlineからborderになってる。

ロケーション・バーの枠線をへこませる

#urlbar {
  border: 2px solid !important;
  -moz-border-top-colors: threedshadow threeddarkshadow !important;
  -moz-border-right-colors: threedhighlight threedlightshadow !important;
  -moz-border-bottom-colors: threedhighlight threedlightshadow !important;
  -moz-border-left-colors: threedshadow threeddarkshadow !important;
}

なんでもフラットにすりゃー良いってモノではない。逆に何でもネイティブっぽくすりゃー良いってモノでもない。

ロケーション・バーのドロップダウン・ボタンを飛び出させる

.autocomplete-history-dropmarker {
  border: 2px solid !important;
  -moz-border-top-colors: threedlightshadow threedhighlight !important;
  -moz-border-right-colors: threeddarkshadow threedshadow !important;
  -moz-border-bottom-colors: threeddarkshadow threedshadow !important;
  -moz-border-left-colors: threedlightshadow threedhighlight !important;
}

.autocomplete-dropmarker-bkgnd-top,
.autocomplete-dropmarker-bkgnd-mid-top,
.autocomplete-dropmarker-bkgnd-mid-bottom,
.autocomplete-dropmarker-bkgnd-bottom {
  list-style-image: none !important;
  background-image: none !important;
}

上記変更によりURL履歴を出すドロップダウン・ボタンがちょっと微妙な感じになるので、Internet Explorerっぽく修正。

デフォルト・テーマはそこそこキレイではあると思うのだけど、デザイン重視なわけでもなく、OSとの融合重視なわけでもない微妙な位置な出来という感想。その微妙さを良いとこ取りと思えるのなら好きになれるテーマだと思う。「Firefox 1.5のデフォルト・テーマの方が良かった！！！」という人はFirefox 2向けのWinstripeが出ているので、これをインストールすれば良さそう。

追記

タブをフラットなボタンにする(Firefox 2向け)を導入した時にどんな感じにタブが表示されるかのプレビュー画像を追加しておいた。

HTMLヘルプのソースを公開

Posted at 2006-10-17T14:24:00+09:00 in Software

HTMLヘルプはHTML Help Workshopで逆コンパイルできるのだけど、抜き出されたHTMLのファイル名がテキトウ極まりないものだったり(うろ覚え)とか色々アレだったと思うので、元にしたHTMLファイルにHTML Help Workshopのプロジェクト・ファイル群を加えてzipアーカイブにまとめ、公開しておくことにした。

• css2-src.zip
• html-4.01-src.zip
• perl-5.8.8-src.zip
• prototype.js-1.4.0-src.zip
• domref-src.zip

HTMLヘルプのプロジェクト・ファイルは単純な中身のものなので、目次やキーワードの追加などは容易にできる。また、CSS2とHTML 4.01のHTMLヘルプをマージして新しいHTMLヘルプにするとかも、プロジェクト・ファイルのソースがあればものの数分でできる。

「ここがおかしかったから直したよ！」とか「キーワード追加した！」とかメールってくれたら反映すると思う。

修正してまでHTMLヘルプを頑張って使うという人はかなり少数派な気がするけど、きっと誰かが喜ぶはず。

gdi++.dll

Posted at 2006-09-21T03:30:00+09:00 in Software

２ちゃんねるのWindowsのフォントスレッドでシコシコ作られていたgdi++.dllが使いやすい形になってリリースされていた。バイナリいじって適用する形のを少し前に試してみたりしていて「おー」とか「へぇー」とか驚いてたのだけど、このリリースからgdi++.exe経由でアプリケーションを起動するだけで良くなりとても使いやすくなった。すげい。

Firefoxで利用すると、

といった感じで、かなりボケボケになってくれる。これだけ見たら「何これMac OS Xでのスクリーンショット？」とか勘違いしそう(それは無い)。エディタとかではビットマップ派なので使う気にはならないのだけど、Firefoxでは常用しても良いかもとか思った。

Boldが識別しにくいという表示上での問題点や重いというパフォーマンス上での問題点などを考慮しても使う価値があると思う。

とりあえず書いとけみたいなエントリだ。

FirefoxでもドロップダウンなBookmarksメニュー

Posted at 2006-09-07T15:23:00+09:00 in Software

Firefoxのメニュー項目の中ではBookmarksメニューばかりを使うという人は多いと思う。そうなると、SeaMonkeyのようにBookmark Toolbarの左端にドロップダウン式のBookmarksメニューがある方が良い(と思う)。というわけでFirefoxでも擬似的にそれを実現してみようとか。

特に何かExtensionをインストールする必要も無く実現できる。やり方はBookmark Toolbar FolderにBookmarksという名前でフォルダを作り、既にBookmarks Toolbar Folderに登録しているブックマークを除いた全てのブックマークを作成したフォルダに放り込むだけ。すると、

といった具合にブックマークにアクセスできるようになる。位置的に視認しやすいので、操作性は向上するんではないかと思う。好みの問題ではあるけど。

ちなみに、ドロップダウンなBookmarksメニューのすぐ横にあるGmailやlivedoor Readerのアイコンのようにアイコンのみの表示にするには、各ブックマークのプロパティを開いてName(名前)の部分を空にするだけで良い。userChrome.cssとかをいじる必要はない。

また、上記のスクリーンショットではTiny MenuというExtensionでメニュー項目をコンパクトにまとめている。このExtensionはデフォルトではMenuというメニューに全てのメニュー項目がまとめられるが、設定によりあまり使わないメニュー項目だけ隠すことも出来るので、地味に便利。

というようにBookmarksメニューだけを表示をするとかも出来るので、上記のようにBookmarks Toolbar Folderに全てのブックマークを移動させなくてもかなり使いやすくなると思う。同様のExtensionにCompact Menuというのもあるけど、こっちのが安定してるっぽい。

Pandoras Box: Pandora in your tasktray

Posted at 2006-08-18T02:07:00+09:00 in Software

洋楽好きな人はほぼ間違いなくハマるPandora。聴く時はPandoraのページを開いたままにしておくのだけど、ちょっと邪魔かなと思うことは多い。Pandoras BoxはPandoraのインターフェイスを独自のウィンドウに取り込んで表示するWindows向けのアプリケーション。閉じるボタンを押すとタスクトレイに入ってくれるので、結構便利。

閉じるボタンを押すとタスクトレイに入る機能以外は、最前面に表示する機能くらい。他に独自の機能は特に無い。それだけで充分だけど。

FirefoxユーザーならMinimizeToTrayというExtensionを入れると、別ウィンドウでPandoraを開けば(PandoraのページでMinimizeをクリックする)そのウィンドウだけをタスクトレイに最小化できるので無用の長物。LastFM Firefox Extentionで曲情報をLast.fmに送ることも出来るので、明らかにこちらの方が利点が多い。

Internet Explorer(やIEコンポのブラウザ)のユーザーには便利かも。とは言うものの、IEコンポのブラウザならタブロックとか、あるタブを開きっぱなしにする時に便利な機能があったりするので、そういう人たちも使わなそう。

それなりに便利ではある。何だけど微妙。ならエントリにするなって感じだ。