色情報を扱うブラウザ拡張機能「ColorZilla」
「ColorZilla」はwebサイト徘徊中に色情報を簡単にチェックできる拡張機能です。特に新しいものではないんですが、Chrome用もリリースされていたので紹介してみます。色系の拡張って他にもいっぱいあると思うけれども、とりあえず書いてみます(｡･ω･｡)
「ColorZilla」のインストール
とりあえずまずインストール先のURL書いておきますね。下記からどぞ。
Firefox用とChrome用がありますので、必要な方を選んでください。
Firefox用
>>ColorZilla | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト
Chrome用
>>Chrome ウェブストア – ColorZilla
機能紹介
FirefoxとChromeで内容が少し異なるようですが、出来る事はこんな感じ。
- ブラウザ上で任意の色を取得
- 色んなオプションも充実
- 色パレット＆ビューア（GIMPと完全互換）
- ページ上のDOM要素から色を分析
- Ultimate CSS Gradient Generator （へのリンクがメニューにあるという）
- オンラインパレットビューア・ブクマ＆シェア可能
- 取得した色情報の履歴＆お気に入りパレット
- ページの拡大縮小（ブラウザの拡大縮小と一緒です）
- パンニング
- タグ名、class・id名、サイズ、位置などの要素の取得 などなど
Firefox版を元に書いたのでChrome版はこれより少ないのかな。
スクリーンショット
開発元ColorZillaさんが公開しているスクリーンショットです。
Firefox用
>>ColorZilla for Firefox Screenshots
Chrome用
>>ColorZilla for Chrome Screenshots
※Firefoxをバージョンアップしたら知らん間にステータスバーがなくなっとるがな(；´Д｀)という方は、こちらのStatus-4-Evarというアドオンをインストールするとステータスバーが復活します。
上記Firefoxのスクリーンショットページではステータスバーの左下にスポイトのアイコンが出てますが、Firefoxの最新版だとインストールしたらデフォルトでは右上にボタンが並びました。
ボタンの場所だけ分かっていれば使い方は同じなのでいいんですが、気になる方はカスタマイズでステータスバーへ移動させてくださいませ。
コンテキストメニューにもColorZillaのメニューが追加されています。コンテキストメニューに表示したくない場合はオプションから非表示に設定できます。
色情報を取得→コピーする
一番基本的な使い方ですが、ブラウザ上で色情報を取得してクリップボードにコピーする流れです。
スポイトアイコンをクリックするとマウスのポインタの形が十字になります。その状態になるとページ上部に黒いステータスバーが表示され、色情報と選択している要素が表示されます。
この黒いステータスバーに表示される内容はオプションの「ステータスバーの表示方法」でカスタマイズできますので使いたいものがあれば変更してください。
そのまま任意の場所をクリック。この時点で色情報がクリップボードにコピーされています。またスポイトアイコンの背景色に取得した色がつきます。
デフォルトではHex値がコピーされます。オプションの「採取した色情報を自動的にコピー」の項目からクリップボードに収めたい形式を設定できます。自動的にクリップボードにコピーしたくない場合は同オプション設定内で自動コピーを無効にできます。
また、最初にポチっとしたスポイトのアイコンの隣の▼を押すと他の形式での色情報のコピーも選択できます。
コピーした色をお気に入りに保存
クリップボードに色情報をコピーした状態でメニューのカラーピッカーを開くとそのまま色情報が表示されます。開いたウィンドウ画面の右側に色情報が並んでいますが、下の方の「Add to Favorites」クリックすると隣のパレットタブの「Favorites」にその色が追加されます。
「Add to Favorites」のボタンを押す前にピッカータブの右下の「名前」の欄に好きな名前を入れておくとパレット内で表示されます。ただ、日本語だと文字化けしちゃうみたいですので名前をつけるなら半角英数で。
パレットタブの「Favorites」に追加した色上で右クリックするとメニューが表示されます。まとめて新しいパレットとして保存できますし、エクスポートを選択すると「Favorites」内にある色情報をcssファイルに保存できます。
取得した色の履歴パレット
同パレットタブの項目に「History」があります。そこには自分がそれまでに取得した色情報が入っています。まず色見本と色コード。そして熱いのが名前の部分なんですが、自動で要素の名前が入ります。
この「History」も当然右クリックからCSSファイルにエクスポートできるので、好きなサイトの好きな色をピックアップして色コード見本的なファイルが簡単に作れます。要素の名前もコメントとして入るのでとても分かりやすいです。
//上の画像だとこんな感じのエクスポートされたCSSファイルになります /* ColorZilla exported palette (History) */ /* h2.entryTitle */ #0c6387 rgb(12, 99, 135) /* header */ #ce0000 rgb(206, 0, 0) /* div#rightCol */ #f4fbfb rgb(244, 251, 251) /* a */ #09668e rgb(9, 102, 142) //以下、省略
Webpage DOM Color Analyzer
見てるページのDOM要素から色を分析してパレット表示してくれます。サクっと色情報をまとめて取りたい時に便利です。スポイトアイコンの右側▼をポチっとするとメニューの中にいます。
取得したパレットの色は個別に削除可能。パレット自体をお気に入りとして好きな名前をつけて保存しておく事もできます。
webサービスに保存とかなんかそういうのもついてます。（←それは使った事ないから実のところよくわかってないんですが）
保存したパレットはメニューのカラーピッカーの中にあるパレットタブで確認できます。上述の内容と同様にCSSファイルにエクスポートも出来ます。
パネル内に色の詳細情報も表示されます。「expand all」をクリックするとcss内のどこで使われているかの確認が出来ます。また、右側の虫眼鏡ボタンをクリックするとページ内でその色が使われている箇所が枠線付きで表示されます。
ページのパンニングを有効
オプションで「ページのパンニングを有効」にすると「shift+Alt+マウスドラッグ」で画面を動かせます。FireworksやIllustrator、Photoshopなんかでスペースキーを押しながらドラッグして画面の表示範囲を移動させると思うんですが、ああいう感じのやつです。
スクロールバーでスクロールせんでも楽に画面をズラせるよーって話なんですが、マウスの背面ボタングリグリやキーボードで遷移させてる方はそっちの方が楽かもですね。面白い機能だなとは思うのですが…お好みですかねｗ
ちなみに私は横スクロールが発生した時だけこの機能で動かしています。