「ColorPick Eyedropper」でサイトのカラーコードを簡単に調べる方法

「ColorPick Eyedropper」でサイトのカラーコードを簡単に調べる方法

ブログを新しく始める時やリニューアルする時など、ブログを運営していると、サイトの配色について考えることがよくあります。

そんな時には、他のサイトで使われている配色を参考にしたり、今自分のブログで使っている配色と相性の良い色を探したりすることもあるのではないでしょうか。

ただ、具体的に配色を決めてそれを指定するにはカラーコードが必要になるので、サイトを閲覧しながら、その場でカラーコードを確認できれば、配色の決定や設定に便利です。

そこで、ここでは「ColorPick Eyedropper」という拡張機能を使って、Webサイトで使っているカラーコードを簡単に確認する方法について説明します。

 

「ColorPick Eyedropper」でサイトのカラーコードを調べる方法

それでは、以下に「ColorPick Eyedropper」を使ってWebサイトのカラーコードを調べる方法について説明します。

 

「ColorPick Eyedropper」とは?

まず、「ColorPick Eyedropper」とは何かを簡単に説明します。

「ColorPick Eyedropper」は、Webサイトで使っている配色のカラーコードを確認できる拡張機能です。

Google ChromeやFirefoxなどのブラウザに機能を追加して使うことができます。

使い方はごく簡単で、サイトを閲覧しながらカーソルを移動したりクリックしたりするだけで、そのサイト内で使われている色のカラーコードを確認してコピーすることができるので、手間を掛けずにカラーコードを調べることができます。

「ブログやサイトの配色の参考にカラーコードを調べたい」「部分的にサイトの色を変更するために、今使っているカラーコードを確認したい」といった時に便利です。

ではこの拡張機能をどうやって使うのか、インストール手順や使い方を以下の項目で説明します。

 

インストール手順

では、まずは「ColorPick Eyedropper」のインストール(追加)手順について説明します。

Google Chromeでも使えますが、ここではFirefoxに追加する場合の手順を解説します。

インストールの流れは、以下のとおりです。

「ColorPick Eyedropper」の追加手順

  1. 「Firefox向けアドオン」ページから「ColorPick Eyedropper」のページを表示
  2. 「Firefoxへ追加」ボタンをクリック
  3. 確認メッセージが表示されたら、「追加」をクリック
  4. 再び確認メッセージが表示されるので「OK」をクリックする

次に、上記①~③までの作業を詳しく説明します。

まずは、以下URLから「ColorPick Eyedropper」のインストールページを表示します。

ColorPick Eyedropper

そうすると以下の画面が表示されるので、「Firefoxへ追加」をクリックします。

そして、以下のように「ColorPick Eyedropperを追加しますか?」と確認メッセージが表示されたら「追加」をクリックします。

また、以下のように「ColorPick EyedropperがFirefoxに追加されました」ともう一度確認メッセージが表示されたら、「OK」をクリックします。

ここまで行ったら、「ColorPick Eyedropper」の追加は完了です。

 

カラーコードの調べ方

次に、「ColorPick Eyedropper」を使ってカラーコードを調べる方法について説明します。

「ColorPick Eyedropper」でWebサイトのカラーコードを調べるには、以下の作業を行います。

「ColorPick Eyedropper」を使ってカラーコードを確認する流れ

  1. カラーコードを調べたいWebページを表示する
  2. ブラウザ右上に表示されている「ColorPick Eyedropper」のアイコンをクリック
  3. カラーコードを確認したい部分にカーソルを当て、その色が拡大して表示されたら、その位置でクリック
  4. カラーコードが表示されるので「Ctrl+C」でコピーする
  5. 「☓」をクリックしてウィンドウを閉じる

次に、上記①~⑤の作業を詳しく見ていきます。

まず、カラーコードを確認したいWebページを表示します。

そして、ブラウザの右上に表示されている「ColorPick Eyedropper」のアイコンをクリックします。

そうしたら、カーソルが十字のマークになるので、そのままサイト上でカーソルを移動させ、色を確認したい部分にカーソルを当てます。

すると、上の画像のように色が拡大して表示されるので、希望の色が拡大表示されたら、その位置でクリックしてください。

クリックすると、以下のようにカラーコードが表示されます。

 

そのまま「Ctrl+C」でコピーします。

コピーし終わったら、右上の「☓」マークをクリックするか、サイトの他の部分でクリックし、ウィンドウを閉じればOKです。

 

オプション設定の使い方

次に、「ColorPick Eyedropper」のオプション設定について説明します。

「ColorPick Eyedropper」のオプションから、それまでに確認した色の履歴を確認したり、カラーコードの形式を変えたりすることもできます。

「ColorPick Eyedropper」のオプション画面は、以下の手順で表示することが可能です。

オプションの表示方法

  1. ブラウザの右上にある「ColorPick Eyedropper」のアイコンをクリック
  2. ①の操作で表示されたウィンドウの一番下にある「Help & Options」をクリック

以下に上記の①~②について詳しく見ていきます。

まず、ブラウザの右上にある「ColorPick Eyedropper」のアイコンをクリックして、以下の画面を表示します。

そして、このウィンドウの一番下にある「Help&Option」(歯車のマークのアイコン)をクリックします。

そうすると、以下のようにオプション画面が表示されます。

一番上の「History」という文字をクリックすると、これまでに確認したカラーコードの履歴を見ることができます。

また、「Show HSL」という部分にチェックを入れると、HSLでカラーコードを確認することも可能です。

(「Show RGB」にチェックを入れてRGBのコードを確認することもできます)

デフォルトの状態でも問題なく使えますが、必要に応じてオプションの設定を使いやすいように変更しながら使うこともできます。

 

まとめ

以上、Webサイトのカラーコードを簡単に調べられる拡張機能「ColorPick Eyedropper」について説明しました。

「ColorPick Eyedropper」は、Google ChromeやFirefoxで使える拡張機能で、表示しているWebサイト上でカーソルを移動させたり、クリックしたりするだけで、使っている色のカラーコードを簡単に確認してコピーすることができます。

ブログやサイトの配色を考えたり、ちょっとした色の変更や設定をしたい時に、カラーコードが簡単に分かると便利なので、いつでも使えるように追加しておくことをおすすめします。

Uncategorizedカテゴリの最新記事