(cache) ブックマーク・メニューを操作する CSS のまとめ Firefox Hacks 翻訳日記/ウェブリブログ

ブックマーク・メニューを操作する CSS のまとめ

<< 作成日時： 2007/01/21 12:32 >>

ここと Another 朝顔日記さんの 2つのブログにまたがった話の上、
CSS そのものがどちらもコメント欄にあるので、とりあえずのまとめ。
読者数から考えると、ここではなく Another 朝顔日記さんのほうがいいような気もするけど、
言い出しっぺでもあることだし(^^;

Bookmarks Menu Mover （仮称）で提示した、メニューバーのブックマーク項目の移動は、
lxr さんのコメントから、拡張機能を振り回さなくても CSS で可能な事がわかった。

/* ブックマークメニューをファイルメニューの次に移動する */
#file-menu {-moz-box-ordinal-group:1 !important;}
#bookmarks-menu {-moz-box-ordinal-group:2 !important;}
#edit-menu {-moz-box-ordinal-group:3 !important;}
#view-menu {-moz-box-ordinal-group:4 !important;}
#go-menu {-moz-box-ordinal-group:5 !important;}
#tools-menu {-moz-box-ordinal-group:6 !important;}
#helpMenu {-moz-box-ordinal-group:7 !important;}

これを userChrome.css に追加すれば、拡張機能を入れたのと同じ効果を得ることができる。
（Firefox 3 の場合は、下の追記を参照）

なお、この CSS で省略可能なのは 1行目のファイルメニューの指定だけ。
ファイルメニューの左、すなわち一番左端に移動したい場合は、
-moz-box-ordinal-group のところの番号を変えて、7つ全部指定する必要がある。

さて、Another 朝顔日記さんのブックマークメニューの展開方向(何) で、

どうせ作るなら素直にブックマークのサブメニューを左右どちらかに固定する拡張機能にしたほうがいいと思います。

というレスポンスがあった。
コメント欄によると、どうやら、のりさんもサブメニューの開く方向が右と左で一定していない事を
うっとうしく思っていたようだ。
ScrapBook の Gomita さんから付いたコメントがヒントになって
メニューアイテムの横幅を規定している CSS をテーマファイルの browser.css から探してみた。
（危うく「教えて君」になる所だったが(^^;）

/* ::::: bookmark menus ::::: */

menu.bookmark-item,
menuitem.bookmark-item {
min-width: 0;
max-width: 26em;
}

これでわかるように、26em つまり全角 26文字相当という最大幅が指定されている。
英語環境だとある程度の横幅が必要かもしれないが、
表意文字である漢字を使用している日本語環境では、ここまでの横幅は必要ないだろう。
Favicon が表示されていれば、なおさらだ。
つうか、開発者側としては英語環境で 26em なのだから、
それをそのまま日本語環境に持ってくると、英語環境の 2倍の幅が指定されているわけで、
我々はむやみに横幅が広いまま使っていた、というオチではないのだろうか(^^;

というわけで、横幅自体を狭くする CSS。

/* ブックマーク・メニューの横幅を狭くする */
menu.bookmark-item, menuitem.bookmark-item {
max-width: 16em !important;
}

数字は画面の解像度などで微調整していただきたい。

この CSS を適用する前と後のスクリーンショット。
まず適用前だが、前のエントリで使った画像の再掲。

次に適用後。

なお、「userChrome.css って何？」という人（いるのか？）は、えむもじらさんの
ユーザスタイルシートによるカスタマイズ(1) を参照されたい。

＜2008年3月2日追記＞
Firefox 3 ベータ版ではメニュー項目の ID が変わっているので、次のようになる。

/* ブックマークメニューをファイルメニューの次に移動する */
#file-menu {-moz-box-ordinal-group:1 !important;}
#bookmarksMenu {-moz-box-ordinal-group:2 !important;}
#edit-menu {-moz-box-ordinal-group:3 !important;}
#view-menu {-moz-box-ordinal-group:4 !important;}
#history-menu {-moz-box-ordinal-group:5 !important;}
#tools-menu {-moz-box-ordinal-group:6 !important;}
#helpMenu {-moz-box-ordinal-group:7 !important;}

#bookmarks-menu → #bookmarksMenu の変更だけではなく、
#go-menu → #history-menu も変更されているので注意。
なお、横幅を狭くする、の方はそのまま適用できる。
＜追記おわり＞