Firefox Hacks 翻訳日記

アクセスカウンタ

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

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

トラックバック 0 / コメント 0

ここと 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 の場合は、下の追記を参照)

画像1

なお、この 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 を適用する前と後のスクリーンショット。
まず適用前だが、前のエントリで使った画像の再掲。

画像2


次に適用後。

画像3


なお、「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 も変更されているので注意。
なお、横幅を狭くする、の方はそのまま適用できる。
<追記おわり>

テーマ

関連テーマ 一覧


月別リンク

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
ブックマーク・メニューを操作する CSS のまとめ Firefox Hacks 翻訳日記/BIGLOBEウェブリブログ
文字サイズ:       閉じる