40代双子持ちサラリーマン日記

40代双子持ちサラリーマンの日々の出来事や趣味に関してのブログ

【ブログ便利機能】WEBサイトの文字や背景の色(カラーコード)を1クリックで調べる方法

ColorPick Eyedropperを使った文字や背景の色を1クリックで調べる方法

 

こんにちは。40代双子持ちサラリーマンです。

今回は、WEBサイトのさまざまな色(カラーコード)を1クリックで調べる方法を紹介します。

 

この方法、以前紹介したWEBサイトの使用フォントを簡単に調べる方法とならんで、わたしもよく使用しています。すごい便利なので、ぜひためして欲しいと思います。

 

www.kakoniko.work

 

紹介するにあたり、ブラウザ「Google Chrome」の拡張機能を使用するため、「Google Chrome」を事前にインストールすることをオススメします。 

 

 

「ColorPick Eyedropper」とは

ColorPick Eyedropperとは


「ColorPick Eyedropper」とは、Chromeの拡張機能の1つで、サイトのいろいろなところで使用している色(カラーコード)を1クリックで調べることができる機能です。

 

この機能を使用すると、どんなことができるようになるんですか? 

 

自分が気になったサイトの文字や背景の色(カラーコード)を知ることができるため、その情報をCSSに反映することにより、まねることができたりします。 

 

それは便利ですね。早く使ってみたいです☺

 

Chromeへの「ColorPick Eyedropper」追加方法

ChromeへのColorPick Eyedropper追加

 

chromeへの「ColorPick Eyedropper」追加方法を紹介します。

  1. chrome ウェブストアの拡張機能「ColorPick Eyedropper」 にアクセスする。

  2. アクセスすると以下のような画面表示後、【Chromeに追加】ボタンをクリックする


    Google Chrome_ColorPick Eyedropper_追加画面


  3. ポップアップ画面(下記画面参照)が表示後、【拡張機能を追加】ボタンをクリックする


    ColorPick Eyedropper拡張機能追加


     
  4. 拡張機能が追加されると、URL入力の右横にColorPick Eyedropperアイコン(赤枠)が追加される。
    その際、ポップアップ画面(下記画面参照)が表示される。
    ※ただし、表示後、実際に使用する前に一度、ブラウザを閉じることをオススメします。


    ColorPick Eyedropper_追加完了 
     

「ColorPick Eyedropper」を使った文字や背景の色(カラーコード)の調べ方

ColorPick Eyedropperを使った文字や背景の色を調べる方法

 

追加した「ColorPick Eyedropper」を使って、文字や背景の色(カラーコード)を調べる方法を紹介します。

  1. ColorPick Eyedropperアイコンをクリックすると、十字のカーソル(下記画面参照)が表示されます。


    ColorPick Eyedropper_ボタンクリック画面


  2.  「事前に探した文字や背景の色が気になるサイト」の色(カラーコード)を知りたい箇所にマウスをもっていき、クリックする。
    すると、クリックした箇所のカラーコードが表示される。
    ※今回は、YAHOO! JAPANの【Y】の部分にマウスをあてて、カラーコード(#FF0033)が表示されています。

    < ColorPick Eyedropper_Yahoo文字選択
     

 

Chromeからの「ColorPick Eyedropper」削除方法

ChromeへのColorPick Eyedropper削除

 

chromeからの「ColorPick Eyedropper」削除方法を紹介します。

 

  1. chrome ウェブストアの拡張機能「ColorPick Eyedropper」 にアクセス

  2. アクセスすると以下のような画面表示後、【Chromeから削除します】ボタンをクリックする


    Google Chrome_WhatFont削除画面

 

Chrome以外で「ColorPick Eyedropper」が対応しているブラウザ

Chrome以外でColorPick Eyedropperが対応しているブラウザ

 

Chrome以外のブラウザで「ColorPick Eyedropper」が対応しているブラウザは、調べたところ、Firefoxのみでここから追加できるようです。

  

「ColorPick Eyedropper」まとめ

ColorPick Eyedropperまとめ

 

「ColorPick Eyedropper」を有効利用することにより、ブログを見やすくするためにかかせない、文字や背景の色選びを効率的にできるようになります。

 

ぜひ、みなさんもこの拡張機能をChromeに追加し、ブログの作成に役立ててほしいと思います。