Recent Entries

スポンサーサイト

[スポンサード リンク]


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

ColorZillaでWebページの色を簡単にチェックする!

[スポンサード リンク]


ColorZillaはFirefox用のアドオンです。
ColorZillaを使うと開いているWebページのありとあらゆる場所の色を簡単にチェックする事が出来ます。Webサイト作成にも必ず役に立つツールですのでお勧めです。

例えば、あるWebサイトをみて綺麗な色だなぁと思っても、その色の16進数の値などがわからなければ自分で使う事はできません。そんな時、Colorzillaを使えば簡単にその色の情報をゲッツ出来ます。
また、カラーピッカーやWebサイト全体の色情報を一気に取得する「Webpage DOM Color Analyzer」などのツールも付いてますのでFirefox使いの方はぜひお試しください。

ダウンロード ColorZillaのダウンロードはこちら。
ColorZilla for Firefox - Eyedropper, Color Picker and much more
(ColorZillaをインストールするには、上部に出る[許可]をクリックしてください。)

ColorZillaの使い方

ColorZillaの使い方は超簡単です。
色情報取得から、クリップボードへのコピー、貼り付けまでの流れを書きます。

  1. まずColorZillaをインストールするとFirefoxのステータスバー左側にスポイトのアイコンが表示されますので、そのアイコンをシングルクリックします。
  2. マウスカーソルが十字になりますので、Webページの調べたい色の上でもう一度シングルクリックします。
  3. すると、スポイトアイコンの色がその調べた色になり、ステータスバーにはその色の情報が表示されます。

    スポイトアイコンがColorZillaのアイコンです
    (目盛アイコンは違うアドオン(MeasureIt)ですので関係ありません。 ⇒ MeasureIt

    ステータスバー表示は左から「RGB値」、「16進数値」、「最後に色情報を取得した場所からの位置」、「タグ要素のclassとidの名前」です。
    ※オプションのステータスバーの表示で表示内容の変更が可能です。
  4. その取得した色を使う場合は、スポイトアイコンを右クリックします。
    コピー"~"でお好きな型の色情報をクリップボードにコピーします。

    ColorZilla コピーメニュー
  5. あとはその色情報をCSSなどに貼り付ければOKです。!

ColorZillaの色取得状態を途中でキャンセルする時は右クリックでOK!
スポイトアイコンをもう一度クリックしてもOKです。

ColorZillaのメニュー

ColorZillaのメニューです。
スポイトアイコン - 右クリックで表示されます。

ColorZillaのメニュー

カラーピッカー

カラーピッカーを表示します。
選択した色が表示されますが、クリックで他の色を選択したり色相を変えたりできます。

ColorZillaのカラーピッカー

[Add to Favorites]で選択中の色をお気に入りに登録する事ができます。
あと、マス目の細かさを4種類から選べます。※オプションの説明で書きます。

::カラーピッカーの便利な使い方::
Shift+Escキーでも色情報の取得出来る状態になります。(十字カーソル) また、Shiftを押したまま色をクリックすると色を続けて取得できます。
取得した色はパレットのHistoryへ。

スポイト

スポイトはスポイトアイコンをシングルクリックした時と同じアクションです。
マウスカーソルが十字になり、色情報を取得できる状態になります。

Parette Browser

Parette BrowserはColorZillaで取得した色情報の履歴やお気に入り色などの確認が出来ます。
※Parette Browserはカラーピッカーの「パレット」タブからでも表示できます。

ColorZillaのParette Browser

  • Favorites : お気に入り色(編集可)
  • History : 取得した色の履歴(編集可)
  • Hues and Brightness : 色相と明るさリスト
  • Hues and Saturations : 色相と彩度リスト
  • System CSS Color : システムで使われている色
  • W3C Named Color : W3Cで名づけられた色
  • Web Colors by Hue : Webカラーの色相
  • Web Named Color : 名前の付いているカラー
  • Web Safe Color : Webの標準色
  • X Named Color :Xさんが名づけた色(?)

色情報の表示方法を「サムネイル表示と「リスト表示」から選べます。

Web DOM Color Analyzer

ColorZillaのイケてる機能の一つです。
表示しているWenページの全ての色をリスト表示してくれます。

ColorZillaのWeb DOM Color Analyzer

色の詳細情報の欄は「expand all」で開き、「collapse all」で閉じる事が出来ます。
また、editor.css (line 478)をクリックするとCSSファイルが開きますので、該当するラインを見たり出来ます。

::Web DOM Color Analyzerの素敵な機能::
素敵な色使いのWebサイトを発見したら、参考にしたいですよね?
そんな時は、「save as colorzilla palette」をクリックします。
そして、パレットに名前を付ければ、Parette BrowserのリストにそのWebサイトの色使いが追加されます。

※リストから消す時は、フォルダアイコンをクリックし、「パレット名.gpl」というファイルを削除すればOKです。間違ってデフォルトのリストを消さないように!

Firebug

Firebugが開きます。
FirebugとColorZillaは同時に開く事が出来ますが、ドッキングすつ場所(ブラウザ下部)が同じなので使いづらいです。
参考記事 : FirebugでWebページのHTMLやCSSを簡単にチェックする!

ページの拡大

開いているWebページが拡大表示されますので、細かい場所の色を取得する時に便利です。
(20%~1000%)

最後に取得した色情報を表示

最後に取得した色情報を表示をステータスバーに表示します。

ステータスバーのクリア

ステータスバーの表示が消去されます。

オプション

ColorZillaの色々な設定ができます。
ColorZillaのオプションについては次の項で詳しく説明します。

ヘルプ(英語)

ColorZillaのヘルプリンクやHPリンク、ブログ、最新譲歩、バージョン情報など。

ColorZillaのオプション

ColorZillaが使いやすくなるように設定しましょう!
スポイトアイコンの右クリック-「オプション」から設定できます。

ColorZillaのオプション

スポイトのショートカットの変更

デフォルトでは、Shift+Escキーで色取得状態になります。
修飾キー(Shiftなど)と文字キーを選択してショートカットを変更できます。

カラーピッカー

カラーピッカーのオプションです。
カラーピッカーの色パレットのマス目の細かさを4種類から選択できます。
(64x64パレット、32x32パレット、16x16パレット、8x8パレット)

例 )64x64パレット

ColorZillaのカラーピッカー 64x64パレット

スポイト使用時に通常のカーソルを使用

色情報を取得する状態の時のマウスカーソルの設定です。
「スポイト使用時に通常のカーソルを使用」にチェックを付けると矢印カーソルのまま色を選択できます。
開始時と終了時の区別がつかないのでお勧めできません。

カーソルが重なったタグにアウトラインを表示

色情報取得時に、マウスオーバーした場所のタグのアウトライン(赤点線)を表示します。
ウザいと思わない方はチェックを付けましょう。

コンテキストメニューに表示

Webページ上を右クリックした時のメニュー(コンテキストメニュー)にColorZillaの項目を追加します。

ページのパンニングを有効(Alt+Shift+Drag)

AltキーとShiftキーを押したまま、マウスでドラッグするとカーソルが手に変わりWebページを縦横無尽にスクロール出来ます。
色とは関係ないオマケ設定かな。横スルロールバーが出ちゃうページなどではとても便利な機能です。

16進数の値を小文字で表示

xhtmlなど小文字スタンダードなので、そのまま貼り付ける時の事も考えて小文字の方が使い勝手がよいでしょう!

ColorZillaを隠す

ColorZillaアイコンが邪魔な場合はクリックしましょう!
アイコンが消えます。
ColorZilla アイコンが消えちゃっても焦らずに!
Shift+Escキーで復活します。

採取した色情報を自動的にコピー

採取した色情報を自動的にクリップボードに移しすぐに貼り付けられる状態にできます。
まず「有効」にチェックを付けて、情報の型を選択します。(4種類)

ColorZillaを使えば、ブログのカスタマイズなどもはかどること請け合いです。
うまい事使って今よりもっと素敵な色合いのWebサイトを作ってくださいな。
これで益々、Firefoxが手放せなくなってしまいましたね(*´д`*)

Comments

Comment Form