Firefox の UI をカスタマイズしてみた

読了まで:約2分


結果と​して​こう​言う​感じに​なった​:

Firefox のスクリーンショット

使っている​拡張機能

  • Greasemonkey これは​今の​ところ主に​開発用に​入れてる
  • その​ため、​普段は​有効に​なっていない
  • ちなみに​開発時には​ CSS 置換スクリプトを​有効に​している
  • Instapaper 僕は​普段 後で​読む 系の​サービスは​ Instapaper を​使っている
  • ちょっと​でも​ 後で​読み返そう と​思った​ページは​片っ端から​ Instapaper へ​入れてる
  • その​ため、​Firefox でも​この​拡張は​必須
  • Stylish 今回、​ Firefox の​ UI を​カスタマイズする​ために​導入
  • 今現在の​ところ、browser.xul​ に​対する​スタイルしか​定義していない
  • な​お、browser.xul​ に​対する​スタイルは​次で​記載します
  • Vertical Tabs Reloaded タブを​縦に​置く​ための​拡張
  • 一時期 Vivaldi を​使っていたんですが、​その​時から​僕は​縦タブ派です (ブラウザは​)
  • その​ため、​個人的には​必須の​拡張

使ってる​ browser.xul に​対する​スタイルシート

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url("chrome://browser/content/browser.xul") {
#personal-bookmarks .bookmark-item .toolbarbutton-icon {
display: none ;
}
#personal-bookmarks {
padding: 2px 0 ;
}
#personal-bookmarks .bookmark-item .toolbarbutton-text {
padding: 0 4px ;
}
#reload-button,
#urlbar-go-button {
display: none ;
}
.urlbar-history-dropmarker {
padding: 0 9px ;
}
#TabsToolbar,
#PanelUI-menu-button {
display: none ;
}
}

この​ chrome://browser/content/browser.xul 向けの​ Stylesheet が​何を​しているか、と​いうと、​これは、

  • ブックマークツールバーの​フォルダアイコンを​隠す
  • ブックマークツールバーの​アイテム表示を​他の​ツールバーボタンと​馴染ませる
  • URL bar の​リロードボタンと​ Go ボタンを​隠す + 下三角マークの​調整
  • Vertical Tabs Reloaded で​隠される​ #TabsToolbar を​予め非​表示に
  • それと​横三本線の​アイコンも​非表示に

と​言った​感じ。

その​他解説

今回掲載した​スクリーンショットの​内、​アドレスバーの​右側に​六つの​ボタンが​有るのだけれども、​ これらの​内訳は、​下記の​様に​いなっていたりする​:

  • Save to Instapaper (Instapaper 拡張に​依る​モノ)
  • 履歴 (Firefox に​元々​有る​機能)
  • ダウンロード履歴 (同上)
  • 執筆系ダッシュボードへの​リンク (ブックマークツールバーに​よる​フォルダ)
  • 普段よく​使う​サービス等への​リンク (同上)
  • Firefox 内部の​ Preferences や​ Addons への​リンク (同上)

で、​ ブックマークツールバーに​よる​フォルダ と​書いた​部分は、​ 本当に​ブックマークツールバーの​フォルダ で、​ これらは​フォルダ名が​絵文字に​なっていて、​かつフォルダアイコンは​先の​ Stylesheet で​非表示に​してあったりするので、​ 絵文字アイコンを​使った​オレオレボタンが​気軽に​作れたりもします。​まぁ​活用するかは​不明だけども。

以上

とりあえず​今日​行った​ Firefox UI の​カスタマイズは​そんな​感じです。​はい。

にゃるら(カラクリスタ)

『輝かしい青春』なんて失かった人。
次に備えて待機中。

今は趣味でプログラミングをして
生活しています。