●有名ブロガーさんが使っているサイトカラーを知りたい。
今回はこんなお悩みに答えていきます。
こんな方におすすめ
- WEB上で使われているカラーコードを知りたい方
- 無料で使える便利なGoogle chrome拡張機能を知りたい方
本記事の信頼性
他の方のブログを覗いて勉強していると、この色いいなあ、真似したいなあそう思う方もいると思います。
Google chrome拡張機能を使えば、そんな悩みも簡単に解決することができます。
今回はColorpick Eyedropperの導入方法と使い方について画像を使って丁寧に解説します。
本記事を読めば、WEB上でお気に入りの色を調査することができ自サイトでも気に入ったカラーを使用することができます。
それでは早速始めていきます。
目次
Colorpick Eyedropper(カラーピック アイドロッパー)とは何?
Colorpick EyedropperとはWEBサイト上のカラーコードを調査することができるGoogle chromeの無料ツールです。
このツールを使えば、他サイトで使用されているカラーがわかるので、気に入ったサイトのカラーを簡単に使用することができます。
僕自身勉強がてら他サイトを見ているときに気に入った色がありました。しかしなんとなく近い色になるように自分で色を調整し時間がかかっていました。
この機能を使えば、そんな無駄なことはする必要がなく簡単に色を調べることができるということです。Google chromeは無料でありながらとても便利な拡張機能が本当にたくさんあります。
それでは具体的な導入方法について紹介します。
Colorpick Eyedropperの導入方法
それではColorpick Eyedropperの導入手順について紹介します。
Colorpick Eyedropper導入手順
- ①Colorpick Eyedropperをダウンロード(追加)する
- ②拡張機能を画面表示する
方法①:Colorpick Eyedropperをダウンロード(追加)する
まず初めにGoogle chromeを開いて『Colorpick Eyedropper』のページへアクセスします。
※Google chromeからアクセスできているか注意しましょう。
こちらのボタンからColorpick Eyedropperへ移れます。
サイトへ移ると下記画面になるので、chrome(クローム)に追加をクリックします。
クリックすると『Colorpick Eyedropperを追加しますか』と聞かれるので、拡張機能を追加をクリックします。
拡張機能が追加されれば、下記画面の表示になります。
これでColorpick Eyedropperのダウンロード、追加は完了です。
方法②:拡張機能を画面表示する
続いてGoogle chrome画面右上にあるアイコンをクリックします。
クリックすると以下の画面が表示されます。
Colorpick Eyedropperの隣のピンのアイコンが青色になるようにクリックします。
以上で画面右上にColorpick Eyedropperのアイコンが表示されました。
Colorpick Eyedropperの使い方を解説【画像あり】
続いてColorpick Eyedropperの使い方について解説します。
下記3つに分けて解説します。
Colorpick Eyedropperの使い方
- ①調査したいサイトへ移りカラーコードを確認する
- ②カラーコードをコピーして使用する
- ③Colorpick Eyedropperを終了する方法
1つずつ見ていきましょう。
使い方①:調査したいサイトへ移りカラーコードを確認する
まずは調査したいサイトへ移りましょう。
今回は神ブロガーのマナブさんのサイトを例に見てみます。
サイトへ移りました。例えば一番左の記事内で使われている色をチェックするとします。
その際、先ほど導入したColorpick Eyedropperのアイコンをクリックします。
この状態でWEB上のカラーコードを超簡単に調べることができます。
下記画面のようにカーソルが表示されるので、調査したい部分にカーソルを合わせます。
カーソルを合わせると画面右にカラーコードの調査結果が表示されました。
今回は余白部分にカーソルを合わせたので、カラーコードは#FFFFFFが表示されました。
使い方②:カラーコードをコピーして使用する
色がある箇所でカラーコードをコピーする場合も同じ手順です。
最初に調査したい部分にカーソルを合わせます。
コピーしたいカラーコードが見つかれば、画面をクリックします。
以下画面のような表示になり簡単にカラーコードがコピーできます。
後は自分のサイトで使用したい箇所にコピーしたカラーコードが適用すれば、同じ色を使うことができます。
使い方③:Colorpick Eyedropperを終了する方法について
終了する際はもう一度画面右上のアイコンをクリックします。
クリックするとカラーコードの横に✖が表示されるので、この部分をクリックすれば、Colorpick Eyedropperを終了できます。
まとめ:Colorpick Eyedropperを使ってサイトカラーをデザインしよう
今回はColorpick Eyedropperの導入方法・使い方について紹介しました。
Colorpick Eyedropperを使えば超簡単に色の調査ができるので、気になった色があった場合は使用してください。
また本記事のようにGoogle chromeはかなり便利に使える拡張機能がたくさんあります。
Google chrome(グーグルクローム)の便利な拡張機能『MozBar』など他記事で紹介しているので、気になった方は参考にしてみて下さい。
MozBarの設定方法と使い方を徹底解説【競合サイト分析ツール】
続きを見る
本記事を最後まで読んで頂きありがとうございました。
それでは本日はこの辺りで!
ブログアフィリエイト運営におすすめの必須ツール19選【初心者向け】
続きを見る