Top Mozilla-Tip's >Firefoxのインターフェースを自分仕様にカスタマイズするためのuserChrome.cssコードリスト<その2>(More10Tip's)
2007年11月05日

Firefoxのインターフェースを自分仕様にカスタマイズするためのuserChrome.cssコードリスト<その2>(More10Tip's)

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

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

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


1.タブ下部の境界線を隠す。

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


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



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


2.タブのテキスト高を変更する。


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


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

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


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


4.非アクティブタブのFaviconを隠す。


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


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

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


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


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

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


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


7.ツールバーの境界線を隠す。


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


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

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


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


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


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


10.サイドバーを水平にして下部に移動する。


/* 水平サイドバーを下部に */
#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;
}


以上のようにかなり自由にスタイルを変更することが可能です。

userChrome.cssへの追記は比較的簡単な作業ですので、万一想像と違うことになった場合はその部分のコードを削除するだけですので、トライアンドエラーでいい感じに仕上げてください。

<関連記事>

■Firefoxのインターフェースを自分仕様にカスタマイズするためのuserChrome.cssコードリスト(とりあえず10個)

■「userChrome.css」を編集してFirefoxのツールバーをカスタマイズする方法。

■Firefoxのサイドバーを右側に表示させる方法。

■Firefoxの様々な設定ファイルにアクセスできる「Edit Config Files」

映画や音楽、ドラマなどイチオシ番組はここでチェック「GyaO」

ソニーのブログパーツ「FLO:Q」


posted by moziller at 22:54 | Comment(0) | TrackBack(0) | Mozilla-Tip's



この記事をはてなブックマークに登録 follow us in feedly このエントリを del.icio.us に登録 この記事をクリップ!Yahoo!ブックマークに登録
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック





×

この広告は180日以上新しい記事の投稿がないブログに表示されております。