突然ですが、おしゃれなブログを作るための重要な要素として「色の組み合わせ」がありますね。
とはいえ僕を含めて、「どんな色の組み合わせならおしゃれになるのか全く分からない」という人は大勢いるかと思います。
そんな僕たちがおしゃれなブログを作るための手っ取り早い方法は、おしゃれなブログを真似することです。
真似とパクリは違うのでご注意を。
パクリはいけませんが、色を真似するくらいは許されるでしょう。
しかし、自分が見つけたおしゃれブログの色を真似したいと思っても、カラーコードが分からないと真似られません。
見ただけでカラーコードを当てられる人はそうそういないと思いますので。
そこで役立つのがGoogle Chromeの拡張機能「ColorPick Eyedropper」です。
ColorPick Eyedropperを使えば下記のように好きなおしゃれブログで使われている色のカラーコードを調べることができます。
ColorPick Eyedropperの料金は？
ColorPick Eyedropperの料金は完全無料です。
ColorPick Eyedropperのインストール方法
それでは早速「ColorPick Eyedropper」をインストールしていきましょう。
下記のブラウザそれぞれのインストール方法について解説いたしますね。
- Google Chrome
- Microsoft Edge
- Firefox
Google Chromeの場合
まずはGoogle Chromeでのインストール方法について解説します。
まずは下記のボタンから「ColorPick Eyedropper」のインストール画面を開いてください。
インストール画面を開いたら「Chromeに追加」を押します。
すると下記のポップアップが表示されるので「拡張機能を追加」を押します。
すると「ColorPick EyedropperがChromeに追加されました」というポップアップと併せて、「同期を有効にする」かどうか尋ねられます。
これは同期してもしなくても特に問題はありません。
続いて、ColorPick Eyedropperを使いやすくするためのちょっとした設定方法をお伝えします。
まず、画面右上（ブックマークバーより上）のジグソーパズルのようなボタンを押してください。
するとインストール済みの拡張機能が一覧で表示されます。
そして「ColorPick Eyedropper」の右側にある白いピンマークを押してください。（※押すと青くなります。）
ピンマークを押すことで、「ColorPick Eyedropper」をピン止めした状態になります。
ピン止め状態ではジグソーパズルアイコンの横に常に「ColorPick Eyedropper」のアイコンが表示され、使いたい時にすぐ使えるようになります。
Microsoft Edgeの場合
Microsoft Edgeを使っている方は下記の手順で「ColorPick Eyedropper」をインストールすることができます。
まずは下記のボタンからインストール画面を開きましょう。
まだMicrosoft EdgeでChromeの拡張機能の使用を許可していない場合は、下記のような画面になっています。
その場合は「他のストアからの拡張機能を許可する」を押しましょう。
下記のポップアップが出てくるので「許可」を押します。
許可をすると下記のように「Chromeに追加」ボタンが表示されるのでこれを押します。
するとまたまたポップアップが出てくるので「拡張機能の追加」を押してインストールを完了しましょう。
これでインストールは完了しました。続いて、「ColorPick Eyedropper」をより使いやすくするためのちょっとした設定を行います。
URLの右側にあるジグソーパズルのようなアイコンを押してください。
するとインストール済みの拡張機能が一覧で表示されます。
そして「ColorPick Eyedropper」の右側にある「目に斜線が入ったアイコン」を押してください。
斜線が消えてただの目のアイコンになればOKです。
すると「ColorPick Eyedropper」のアイコンが常にジグソーパズルアイコンの横に表示され、使いたい時にすぐ使えるようになります。
Firefoxの場合
Firefoxを使っている方は下記の手順で「ColorPick Eyedropper」をインストールすることができます。
まずは下記のボタンからインストール画面を開きましょう。
インストール画面を開いたら、「Firefoxへ追加」を押します。
すると下記のポップアップが出るので「追加」を押してください。
画面右上に「ColorPick Eyedropper」のアイコンが表示されるようになればインストールは完了です。
ColorPick Eyedropperの使い方
ではいよいよ「ColorPick Eyedropper」の使い方を見ていきましょう。
といっても、使い方は超簡単で直感的に使え、Google Chrome、Microsoft Edge、Firefox全てで共通の使い方となっています。
一応手順ごとに解説をすると以下のようになります。
- カラーコードを調べたいWEBサイトのページを開く
- 「ColorPick Eyedropper」のアイコンを押す
- ページ内のカラーコードを調べたい部分を押してカラーコードをコピーする
- ×を押して終了
では、1つ1つ詳しく解説します。
①カラーコードを調べたいWEBサイトのページを開く
まずは自分がカラーコードを調べたいWEBサイトのページをいつも通り開きます。
②「ColorPick Eyedropper」のアイコンを押す
インストール手順で解説した通り、ジグソーパズルアイコンの横にピン止めした「ColorPick Eyedropper」のアイコンを押します。
③ページ内のカラーコードを調べたい部分を押す
「ColorPick Eyedropper」を起動させると、ページ内でマウスを動かすだけで自動的にその部分のカラーコードやRGBの数値が表示されます。
そしてカラーコードやRGBの数値をコピーしたい部分をクリックすることで下記のような表示になり、コピーができるようになります。
もし、カラーコードを調べたい部分が極小で上手くマウスを合わせられない場合は、「ColorPick Eyedropper」のズーム設定を調整しましょう。
やり方は、まず「ColorPick Eyedropper」の歯車マークを押します。
続いて下記の画面になったら、「魚眼レンズズーム量」という項目横の「5 デフォルト」を押し、表示される倍率の中から好きなものを選択してください。
最後に「オプションを保存」を押せば設定完了です。
④×を押して終了
「ColorPick Eyedropper」を終了したい場合は、「×ボタン」を押せばOKです。
まとめ
いかがでしたでしょうか。
「ColorPick Eyedropper」を使えばおしゃれブログで使われている色を簡単に真似することができるようになります。
かなり便利な拡張機能にも関わらず無料で使えるのは嬉しいですね。
