【ブログ便利機能】ブログやサイトの文字色・背景色を簡単に調べる方法

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

今回は、ブログの文字色・背景色を簡単に調べる方法を紹介します。

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

「ColorPick Eyedropper」とは

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

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

自分が気になったブログの文字色・背景色を知ることができるため、その情報をCSSに反映することにより、まねることができたりします。 

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

「ColorPick Eyedropper」のインストール方法

chromeへの「ColorPick Eyedropper」インストール方法を紹介します。

1. chrome ウェブストアの拡張機能「ColorPick Eyedropper」 にアクセスする。
   
   
2. アクセスすると以下のような画面表示後、【Chromeに追加】ボタンをクリックする
   
   
   
   
   
   
3. ポップアップ画面（下記画面参照）が表示後、【拡張機能を追加】ボタンをクリックする
   
   
   
   
   
    
4. 拡張機能が追加されると、URL入力の右横にColorPick Eyedropperアイコン（赤枠）が追加される。
   その際、ポップアップ画面（下記画面参照）が表示される。
   ※ただし、表示後、実際に使用する前に一度、ブラウザを閉じることをオススメします。
   
   
     

「ColorPick Eyedropper」の使用方法

追加した「ColorPick Eyedropper」の使用方法を紹介します。

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

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

「ColorPick Eyedropper」の削除方法

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

1. chrome ウェブストアの拡張機能「ColorPick Eyedropper」 にアクセス
   
   
2. アクセスすると以下のような画面表示後、【Chromeから削除します】ボタンをクリックする
   
   
   

「ColorPick Eyedropper」の対応ブラウザ

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

「ColorPick Eyedropper」まとめ

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

ぜひ、ブログを見やすくするための一つの手段として、この拡張機能を有効活用していただけたらと思います。