2016/11/10

オススメ拡張機能ColorZilla!web上で見つけた色をカラーコードにする

ブログのカスタマイズでカラーを変たい時、「この色が良いなぁ」って思っても『カラーコードが、わかんない時』があります。head画像に使ってるピンクっぽい紫のコードを探すのは効率が悪すぎます。

同じ色のカラーコードを一発でゲットできたら超!時短っ♪『ColorZilla』は、デベロッパーツールで『マウスでポチ×2』するだけで目当ての『カラーコード』をゲット出来ちゃう優れものなんです(*・∀-)b

早速その使い方など、さらさらぁ~っと書いていきますねっ♪

ColorZilla

スポンサーリンク

ColorZillaのインストールと使用方法

インストールはFirefoxのアドオンとChromeの拡張機能、使いやすいブラウザでお使いくださいっ。

カスタマイズのときの時短アイテム!ポチポチだけで、目の前にある『欲しい色』のコードを一発で探してくれるツールがColorZillaです。神ツールって程、便利なので早速導入してくださいっ!

ColorzillaのインストールFirefox

ColorzillaのインストールChrome

ColorZillaの使い方

Chormの拡張機能のツールで説明しますねっ。Windowsのでしたら右上に並んでます。

ColorZillaのアイコン「スポイトマーク」の場所

  1. スポイトマークをクリック
  2. Web上の欲しい色をクリック
    ※カラーコードをコピーした状態
  3. 貼り付けたい所にペースト

以上でカラーコードがGetできて超便利 (*✪▽✪)b

ColorPickerの使い方

ColorZillaのアイコン『スポイト』をクリックすると、ColorPicker画面(右側の画像)が出てきます。

ColorZillaのColorPicer機能も便利

Web上の欲しい色をクリックするだけで、カラーコードはゲット。もし色が微妙に違った時は、ColorPickerを選択して、四角の画面から色の明暗を替たり、レインボーの縦棒で色を選択する事もできます!

左側画像カラーの微調整をしたいとき、欲しい色を選ぶのも可能で、色が決まれば『Ok』をクリック!それだけで既にコピーされてるのが嬉しい機能♪

カラーピッカーの活用法

ほか活用法はカラーコード表を見てるとき、欲しい色が決まればツーステップで『カラーコード』をゲット!

  1. スポイトマークをポチッ
  2. 欲しい色をポチッ

コードをドラックして反転させコピーするより断然ラク!

3回4回と同じ作業をしていると・・まぢ面倒!ってなるので、カラーピッカーは、神的に『工程省けた感ハンパない』です。

そのままCSSスタイルシートにそのままペーストして即完了♪もぅ最高でしょー!

さいごに

この拡張機能、何で今まで知らなかったのかと思うと、テンションあがった程なので、激しくおススメします♪

ちなみにHTMLカラーコードも使い勝手良いので、リンク貼っておきますねっ♪これらで初心者でも出来る『色の変更カスタマイズ』を楽しんでくださいねぇ(。・ω・)ノ゙

それでは、かうたっくでした!

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー