気になるブログやサイトの文字色・背景色を簡単に調べる方法

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

ブログのカスタマイズや気になるサイトなどを見ていると、使用している文字や背景の「この色のカラーコードを知りたい」と思うことはないでしょうか？

ゆずる先生

そこで、今回はブログやサイトで使用している、文字や背景などの色をカラーコードで簡単に調べる方法を紹介します。

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

「ColorPick Eyedropper」とは

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

双子

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

ゆずる先生

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

双子

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

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

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

• STEP1
  Chrome ウェブストアにアクセス
  Chrome ウェブストアの拡張機能「ColorPick Eyedropper」にアクセスする。
• STEP2
  Chromeに追加
  アクセスすると以下のような画面表示後、【Chromeに追加】ボタンをクリックする。

• STEP3
  拡張機能を追加
  ポップアップ画面（下記画面参照）が表示後、【拡張機能を追加】ボタンをクリックする。

• STEP4
  追加完了
  拡張機能が追加されると、URL入力の右横にColorPick Eyedropperアイコン（赤枠）が追加される。 その際、ポップアップ画面（下記画面参照）が表示される。

  ※ただし、表示後、実際に使用する前に一度、ブラウザを閉じることをオススメします。

  
  

「ColorPick Eyedropper」使用方法

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

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

• STEP2
  色(カラーコード)を知りたい箇所をクリック
  「事前に探した文字や背景の色が気になるサイト」の色(カラーコード)を知りたい箇所にマウスをもっていき、クリックする。 すると、クリックした箇所のカラーコードが表示される。 

  ※今回は、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」を有効活用することにより、ブログを見やすくするためにかかせない、文字や背景の色選びを効率的にできるようになります。

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