Firefox：メニューバーに配置したアドオンアイコンを右寄せにする

Firefox（たまにニコ動）

2018.04.232023.05.11

この記事は約4分で読めます。

記事内に広告が含まれています

こんにちは、さちです。

今回は Firefox Quantum（バージョン57以降）で、メニューバーに配置したアドオンアイコンを右寄せにする方法について書いていきます。

ということで、メニューは左寄せにしつつ、アドオンアイコンだけを右寄せにしてみましょう。

メニューバーに置いたアイコンを右寄せにしたい
期待通りの動きをしない「伸縮自在のスペース」
「userChrome.css」を使って解決する

メニューバーに置いたアイコンを右寄せにしたい

Firefox 56 以前では、アドオン関連のアイコンを「アドオンバー（ステータスバー）」に置いていたのですが、Firefox Quantum にはその場所がなくなってしまいました。

そこで、メニューバーの空きスペースに置くことにしました。しかし、通常の状態ではすべてのメニュー，アイコンが左寄せになります。

私的には下図のように、「メニュー」は左寄せ、「アドオンアイコン」を右寄せに配置したいのです。

期待通りの動きをしない「伸縮自在のスペース」

アドオンアイコンだけが右寄せになるよう「カスタマイズ」から「伸縮自在のスペース」を入れてみます。

昔は、1つ入れれば最大幅まで広がった気がするんですが、そうではないようで、複数個挿入してみました。

しかし、Firefox のウィンドウ幅が狭くなった時に、「メニュー」と「アドオンアイコン」の間にスペースが残ってしまいます。

「伸縮自在」とは何だったのか……。伸び方も縮み方も期待してたのと違う……。

「userChrome.css」を使って解決する

「userChrome.css」ファイルを作成、これを Firefox に適用することで、アドオンアイコンの右寄せを実現させます。

下記の手順を行う前に、Firefox を終了しておいて下さい。

テキストエディター（「メモ帳」など）を開いて、このように記述。（Firefox 68 以前の場合は、「browser.xhtml」の部分を「browser.xul」に変更する）

@charset "UTF-8";

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

  #toolbar-menubar {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  #toolbar-menubar spacer {
    order: 0 !important;
  }
  #menubar-items {
    margin-right: auto !important;
    flex-shrink: 0 !important;
  }

}