webruaryと黒猫のウィズ

webruaryの記事一覧 webruaryのRSS

通常のブログ。http://webruary.net/


スポンサーサイト

Category:スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加

Sponsored Links

Comment : -

Comment Form

Track Back : -

この記事のトラックバックURL
http://webruary.blog37.fc2.com/tb.php/108-0a4fa502

トラックバック一覧

FirefoxのテーマをMETROっぽくしてみた。

Category:雑記

FirefoxのMETRO UI化

Microsoftが新メールサービス『Outlook.com』をスタートし、初日に100万人の登録があった様ですが、そのうちの一人は自分です。

わりかしこのMETROスタイル(←なにげにMETROは仮名称で正式名称はまだ決まってないとか。)が好きな自分ですが、ふとFirefoxのテーマをそれっぽくしたくなり、FirefoxのテーマサイトとかdeviantARTあたりを見たところ、それっぽいテーマはあるけど最新版には対応してない模様。

悔しいんで他になんかないかとイロイロ調べてたら、userstyles.orgにたどり着き、そこにMETROっぽいのがあったのでアドオンの『Stylish』をインストールし適用してみましたが…う~ん…イマイチ。
イロイロさまよった挙句、最終的に『Firefox 10+: transparent tabs, toolbars, addonbar』なるものを適用。

まっ、しばらくこれでイイかと思ってましたが「そぉいやぁ、これってCSSだよな…ゴクリ…。」とコーディング心をくすぐられユーザースタイルの編集にチャレンジ。

ちなみに、自分はOS自体のVisual Stylesを変更してたりするので、今回のMETROスタイルはFirefoxのみで表現してるわけじゃないのであしからず。

ここから続き

早速開始といきたいところでしたが、どこになんのタグとかクラスが使われてるのかまったくわからず、ゼロからチャレンジするのは無謀すぎるので、先に適用してた『Firefox 10+: transparent tabs, toolbars, addonbar』を元に修正。
あと、細かい部分とかのidとかclassを調べるのには『DOM Inspector』を使用。

METROスタイルがシンプル設計な関係上、とりあえず「border:0 !important;」とか「background:#20a2c7 !important;」とかやってれば、パッと見はそれっぽくなっていきます。
OSのスタイルをキャンセルする「-moz-appearance:none !important;」ってやつがなかなか活躍。
ただ、ツールバーのボタンとポップアップメニュー、コンテキストメニューは結構苦労しました…。

なんとか通常の見た目は完了し、普段見ないとこは妥協する方向で終了。
とおもいきや、いつものごとく問題発生。

先月出てたFirefoxのアップデートを、理由は忘れましたがその時更新せず、今になって更新したところツールバーのボタンがおかしくなったorz...
具体的にはマウスオーバーで背景画像が出てくるようになり、ついでに一部のアイコンのスペースがおかしくなってもぉた(´・ω・`)

ついでに、今回のStylishでの変更にかかわらず、どぉやら14.0.1にするとツールバーからScrapBookのアイコンが消えるらしい。ってか、消えた。
自分の環境ではFirefoxを標準テーマじゃないのにすればちゃんと見えるようになりましたが、標準以外だとStylish側で設定する内容が余計に増え面倒になるためそれは避けたいところ。

なんとかならんかとDOM Inspectorでイロイロ見てたら、ScrapBookのアイコンには『#scrapbook-button』ってidが割り当てられてるっぽい。
そこで、他のアイコンのスタイルを参考にwidthとheightを加えたら見事復活ッ(∩´∀`)∩ワーイ

他にもポップアップメニューとかEvarnoteのアイコンとかブックマークバーとか諸々修正しやっとで完成。 ↓赤枠の部分はマウスオーバーしてる状態。

はい。Firefox アプリケーションメニューの文字にマウスオーバーすると微妙にズレてるのは妥協してる部分だったりします。
それと、後でOutlook.com見てみたら、設定とかで出てくるメニューは白背景にテーマ色の枠だったりしたので、気が向いたらその辺も含めて修正しようかな。

このエントリーをはてなブックマークに追加

Sponsored Links

Comment : 0

Comment Form

Track Back : 0

この記事のトラックバックURL
http://webruary.blog37.fc2.com/tb.php/108-0a4fa502

トラックバック一覧

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。