スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2008.04.27

Firefox のタブを Safari っぽくする CSS

2ch をみてたら「Firefox のタブを Safari っぽくするにはどうすればいい?」なんて質問が。具体的には、下記のような表示にする方法ですね。

  • 閉じるボタンを左側に表示
  • ファビコンは非表示
  • ロード中はスロバーをタブの右側に表示

以前同じような質問を見かけた時に作ったものの、全く使わなくて忘れていたのをこの機会に載せておきます。userChrome.css か Stylish で適用して下さい。

なお user_pref("browser.tabs.closeButtons", 0); を設定していると上手く CSS が適用されないようなのでご注意ください。

適用前
通常のタブ表示

適用後
Safari っぽいタブ表示

インストール

userstyles.org に登録しました。Stylish を使用している方は下記のリンク先から簡単にインストールできます。

コード

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

@-moz-document url(chrome://browser/content/browser.xul) {

.tabbrowser-tab > .tab-image-left {
  -moz-box-ordinal-group: 1 !important;
}
.tabbrowser-tab > .tab-close-button {
  -moz-box-ordinal-group: 2 !important;
}
.tabbrowser-tab > .tab-image-middle {
  -moz-box-ordinal-group: 3 !important;
}
.tabbrowser-tab > .tab-image-right {
  -moz-box-ordinal-group: 4 !important;
}

.tabbrowser-tab > .tab-image-middle > .tab-text-stack, /* Fx3 */
.tabbrowser-tab > .tab-image-middle > .tab-text {
  -moz-box-ordinal-group: 1 !important;
}
.tabbrowser-tab > .tab-image-middle > .tab-icon {
  -moz-box-ordinal-group: 2 !important;
}

/* always show the close button */
.tab-close-button {
  display: -moz-box !important;
}
/* Show Throbber only */ 
.tabbrowser-tabs tab:not([busy]) .tab-icon .tab-icon-image {
  visibility: hidden !important;
}

}

更新履歴

2008-04-28

  • 閉じるボタンが非表示になるとスタイルが適用されなくなるため、閉じるボタンを常に表示するようにした
関連記事

この記事へのトラックバックURL
http://wildlifesanctuary.blog38.fc2.com/tb.php/166-d4300cc4
この記事へのトラックバック
この記事へのコメント
safari風は気に入りました。
しかしtab mix plus 0.374とfirefox3.5の併用で閉じるボタンの位置がずれるのです。
何か対策ありますか?
尚、firefoxは最近導入したばかりの新米です。
今まではIE6,safari3(winxp)

Posted by takayuki at 2009.07.31 22:16 | 編集
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。