落書き帖  古事記  いろは歌  日 記

firefox(palemoon)カスタマイズ

2017年07月29日
約一年ぶりの更新です
最近また相棒のオールドPCと戯れています。
そんな相棒ももう猫の年で換算してもかなり長生きしてまして…
化け猫になってもおかしくないような年齢になってしまってます…
それでもまだまだ元気な所は、さすが日本製と言うべきなのか…

くだらない話はさておき、本題です。
ブラウザの着せ替えで少々手間取ったので自分の為に、ここに書いとくか…みたいな…
CSSでブラウザのボタンやらアドレスバーやらカスタマイズするにも、DOMの構成が分からないと何分不便だったりします。
(簡単に済ますなら、firefoxのaddonでthemeインストールしたら終わりなんですが、なんか良く分からない物をインストールするのもなんなんで…)
実際、最初は盲滅法でネットで検索して適当にCSS書いてたんですが、中々上手く行きませんでした。
そこで漸く知ったのが、DOMの構成を見ることが出来るaddon…
(結局良く分からないaddonインストールしてます

DOM Inspector
https://addons.mozilla.org/en-US/firefox/addon/dom-inspector-6622/?src=search

これだけでも使えるんですが、同じページに置いてある別のaddonを使うとより使いやすくなります。

InspectorWidget
Element Inspector
Stacked Inspector

Element Inspectorが使いやすいかな?
目的のエレメント上でSHIT+右クリック

InspectorWidgetは、InspectorWidgetのアイコンをクリックした後に目的のエレメントをクリック

Stacked Inspectorは使ってないから分からない…

画面が立ち上がった後、中央上の方にあるウィンドウっぽいボタンを押すとcss rulesってのが選択肢にあるのでそれを押すと適用されてるcssを見ることが出来る。


立派なaddonを手に入れては見たんですが、最初なかなか…なかなかでして…
上手く思うようにCSSを適用出来ませんでした。
で、いごいごして、漸く分かったのが、-moz-appearance って言うのが邪魔してる(って言うかボタンなんかが上手く色付けできない…私の技量では…)って事でした。
-moz-appearance を全部無効にすると見た目が何だかな〜って感じになるので、邪魔な-moz-appearance だけポアしまして、出来上がったのが…

userChrome.css


因みに、ブラウザのウィジェットとかではなくてページ部分のCSSはこんなの使ってます。

userContent.css


最後の方のabout:logopageの部分はfirefoxならabout:blankになるんかな?
CSSの場所はfirefoxでもその派生のpalemoonでもほぼ同じディレクトリにあるはず…
人それぞれというかインストール方法やもしかしたらディストリビューションでもfirefoxのディレクトリ構成が違うかもしれないから、説明の仕方が難しいんだけど、firefoxやpalemoonやらの置いてあるディレクトリを潜って行ったら…、英数字の羅列.default みたいなディレクトリ名がありまして、その下にchromeディレクトリがなければ作って、そのchromeディレクトリにuserChrome.css やら userContent.css やら置けば適用されるはず…はず…
因みに、私の場合は自分のホームディレクトリの下にただ展開して使ってるだけだから、ちょっと普通とは違うんですが、こんな感じ…
~/.moonchild productions/pale moon/koe3z2ki.default/chrome/
で、chromeディレクトリの下にuserChrome.cssとuserContent.cssを置いてます。