Mozilla Re-Mix: Firefoxのインターフェースを自分仕様にカスタマイズするためのuserChrome.cssコードリスト＜その２＞（More10Tip's）

　Top＞ Mozilla-Tip's ＞Firefoxのインターフェースを自分仕様にカスタマイズするためのuserChrome.cssコードリスト＜その２＞（More10Tip's）

<< 表示しているページのカラーパレットを保存してドローソフトで利用できるFirefoxアドオン「Palette Grabber」 | TOP | ページ内に記載されている企業やIT用語を簡単に調べることができるFirefox用アドオン「ClearForest Gnosis」 >>

2007年11月05日

Firefoxのインターフェースを自分仕様にカスタマイズするためのuserChrome.cssコードリスト＜その２＞（More10Tip's）

前回に続いて、FirefoxのインターフェースをカスタマイズすることができるuserChrome.cssコードについて書いてみたいと思います。

いろいろ追記して、Firefoxを理想のスタイルに近づけてみてください。

なお、コードの場所や適用の方法については前回の記事と同様ですのでそちらを参考にしてください。

１．タブ下部の境界線を隠す。

境界線をなくすことによってタブがくっきりと明確になります。

/* タブ下の境界線を隠す */
.tabbrowser-tabs {
border-bottom: none !important;
}

/* Firefox2のタブツールバー下部の2重線を隠す */
.tabs-bottom {
display: none !important;
}

２．タブのテキスト高を変更する。

/* タブのテキスト高を変更する */
.tabbrowser-tabs .tab-text {
padding-top: 4px !important;
}

３．アクティブでないタブを色あせた感じにする。

若干透明っぽくなります。

/* アクティブでないタブを色あせた感じにする */
#content tab:not([selected="true"]) {
-moz-opacity: 0.7 !important;
}

４．非アクティブタブのFaviconを隠す。

/* 非アクティブタブのFaviconを隠す */
tab:not([selected="true"]) .tab-icon {
display: none !important;
}

５．ブックマークツールバーのフォルダアイコンを変更する。

サーバーに（）内の.*****icoを置き、ファイル名を指定することによって置き換えます。

/* change all folder icons for bookmark toolbar folders */
.bookmark-item[container="true"] {
list-style-image: url('*****.ico') !important;
}

６．ブックマークツールバーを複数段表示する。

1列で足りないことが多いブックマークツールバーを多段表示することができます。

/* ブックマークツールバーの多段表示 */
#bookmarks-ptf {
display:block;
}
#bookmarks-ptf toolbarseparator {
display:inline;
}

７．ツールバーの境界線を隠す。

/* ツールバーの境界線を隠す。 */
menubar,
toolbox,
toolbar {
border-style: none !important;
}

８．Firefox各部のフォントを一括変更する。

最近Windows用でリリースされたIPAフォントなどに変更したらいい感じです。

/* Firefoxインターフェースのフォントを変更する */
menubar,
menubutton,
menulist,
menu,
menuitem,
textbox,
toolbar,
.tab-text,
tree,
tooltip,
sidebarheader,
statusbar {
font-size: 10pt !important;
font-family: フォント名 !important;
}

９．サイドバー内に表示されるフォントの変更。

/* サイドバーのフォントスタイル */
#historyTree, #bookmarks-view tree {
-moz-appearance: none !important;
font-size: 10pt !important;
font-family: Times New Roman !important;
}

１０．サイドバーを水平にして下部に移動する。

/* 水平サイドバーを下部に */
#browser {
-moz-box-orient: vertical;
-moz-box-direction: reverse;
}
#sidebar-box {
-moz-box-orient: horizontal;
-moz-box-direction: reverse;
}
#appcontent {
-moz-box-orient: horizontal;
}
#sidebar {
max-width: inherit !important;
min-height: inherit !important;
}
#sidebar-box > sidebarheader {
-moz-box-orient: vertical;
-moz-box-direction: reverse;
-moz-box-pack: end;
border-left: 1px solid ThreeDHighlight;
margin-left: 1px;
}