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

 

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

 

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

 

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

 

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

 

「ColorPick Eyedropper」とは

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

 

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

 

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

 

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

 

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

ChromeへのColorPick Eyedropper追加

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

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

    Google Chrome_ColorPick Eyedropper_追加画面

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

    ColorPick Eyedropper拡張機能追加

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

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

    ColorPick Eyedropper_追加完了

     

    「ColorPick Eyedropper」使用方法

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

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

      ColorPick Eyedropper_ボタンクリック画面

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

      ※今回は、YAHOO! JAPANの【Y】の部分にマウスをあてて、カラーコード(#FF0033)が表示されています。 

      ColorPick Eyedropper_Yahoo文字選択

     

    「ColorPick Eyedropper」削除方法

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

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

     

    「ColorPick Eyedropper」対応ブラウザ

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

    「ColorPick Eyedropper」まとめ

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

     

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

    スポンサーリンク
    おすすめの記事