Stylishアドオンを使って、メニューパネルを変更する

Stylishアドオンは、Firefoxの見た目やWebサイトのCSSを変更することができるアドオンである(図11)。

そして、さらにスタイルをインストールすることで、その効果が得られる。スタイルは、Stylishの公式サイトからダウンロードする(図12)。

左上の検索ボックスからスタイルの検索を行う。かなり数があるので、うまく絞り込んでいかないとほしいスタイルを探すのが大変である。スタイルについては、実際に見てもらったほうがわかりやすいであろう。まず、Firefoxの見た目を変更するAero Transparent v1.8.3である。

アドレスバーのあたりも透明になっているのがわかるだろう(背後に、FirefoxやThuderbirdのアイコンが透けて見える)。そして、WebサイトごとにCSSを変更するスタイル例である。たとえば、Youtube Black & Red (-CyberationMicro-) CSS3である(図14)

スタイルを導入すると、文字が赤となり、黒地に赤い文様の背景が使われる。全体的に赤と黒で統一されたデザインとなる。デフォルトでは、白が背景である。このように、Webサイトごとに独自のCSSを使うことで、本来のWebサイトとはまったく異なった見た目となる。ブログやSNSサイトなども、スタイルによって大きく変えることができる。もちろん、本来のWebサイトも、Webデザイナによってきちんとデザインされているが、このようにスタイルを変えてみるのも楽しい。

では、本題のメニューパネルの変更を行ってみよう。まず、紹介したいのは、Firefox Australis menu reskinである。

図15は、カスタマイズメニューを表示したところであるが、メニューパネル以外にもカスタマイズメニューやポップアップメニューなどもメタリックなグラデーションで覆われる。次に紹介したいのは、Firefox Australis menu panel fixである。インストール前にダウンロードページですべきことがある。

このページの右上の方に、4つのプルダウンメニューがある。まず、Spacingであるが、カラム数を変更する。

  • 3カラム
  • 4カラム
  • 6カラムでテキストなし
  • 3カラムでスキン変更
  • 4カラムでスキン変更
  • 6カラムでスキン変更

Sync buttonでは、Syncボタンの表示/非表示が選択できる。次のPanel Heightでは、パネルの高さを変更する。選択肢は、以下の通り。

  • 固定しない
  • 300px
  • 400px
  • 500px
  • 600px

最後に、Icon sizeでアイコンの大きさを調整する。選択肢は、次の3つである。

  • 変更なし
  • 85%縮小
  • 75%縮小

これらを、このページで選択してからインストールする。では、実例をお見せしよう。まずは、カラムを4、Syncボタンなし、高さを300px、アイコンを85%に縮小した(図17)。

図17 メニューパネルの変更例1

メニューパネルの高さを300pxにしたので、スライドバーが表示される。こうして、メニューパネルの高さを固定することができる。さらに変更をしたい場合には、図16のダウンロードページを再度表示させる(もしくはリロード)。選択肢を選び直し[Update with Stylish]をクリックする。スタイル更新の確認が行われる(図18)。

図18 スタイル更新の確認

[更新]をクリックする。変更後のメニューパネルは、図19のようになる。

図19 メニューパネルの変更例2

ここでは、6列テキストなし、75%縮小にしてみた。アイコンのみで判断する必要があるが、コンパクトにまとまったメニューパネルも使いやすい。メニューパネルは、タッチ操作でも使いやすいようにと設計されたものだ。デスクトップPCなどでは、これくらいの方が使いやすいこともあるだろう。Firefox Australis menu panel fixは、このようにメニューパネルをカスタマイズできる。

なお、カラム変更メニューでの「スキン変更」であるが、筆者の環境ではうまく動作しなかった。ダウンロードページのサンプルでは、図15のFirefox Australis menu reskinのようになる。スキンを変更したければ、両方のスタイルをインストールすればよいであろう。

新UIのAustralisにも、カスタマイズの幅が広がってきた。今後も期待したい。