IE6-8 is Not Supported

Firebug と Chrome Developer Tool のカラーを Monokai (Sublime Text 2) にしてみました

Web 製作者なら誰もが使う Developer Tool のカラーテーマを有名な Sublime Text 2 の Monokai に変えてみようというものです。 やりかたは違いますが Firefox でも Google Chrome でもできますので興味がある方は是非!

1. Firefox (Firebug) の場合

Firebug をインストール

当然ですが、Firebug のアドオンが入っていることが前提となります。まだ導入していない方は以下のリンクから導入してください。
Firebug :: Add-ons for Firefox

Stylish をインストール

Firebug のカラーを書き換えるためにもうひとつ Stylish をいうアドオンを使います。こちらも便利なので入れていて損はないかと。
Stylish :: Add-ons for Firefox

Monokai テーマをインストールして完了

ありがたいことに Stylish でテーマが配布されているので、それを入れるだけ。すごく簡単ですね。
userstyle.org – Monokaï Firebug

dev-tools-monokai-theme_1


2. Chrome Developer Tool の場合

カスタム CSS をダウンロードする

Chrome にも Stylish はあるものの、Chrome 自体にカスタム CSS を適用できる機能があるのでそちらを利用します。GitHub に Monokai テーマ CSS を上げてくれている人がいるので DL しましょう。
GitHub – SO Dark Monokai V3

Custom.css を指定のディレクトリに配置して完了

解凍してでてきた Custom.css を指定のディレクトリに配置します。OS によって場所が異なりますが GitHub に説明があるのでそれを参照。

Mac – Finder > shift + cmd + g:
~/Library/Application Support/Google/Chrome/Default/User StyleSheets/

Mac – Terminal:
~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/

Windows:
C:\Users\**Your Username**\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\

Ubuntu (Chromium):
~/.config/chromium/Default/User StyleSheets/

当然ですが上書きするので、以前 Custom.css に何か記述した場合は注意してください。

dev-tools-monokai-theme_2


案外あっさり変えられるので、普段 Sublime Text 2 で Monokai テーマを使っている人、気分で色を変えたい人など是非一度お試しください!

ads by google