ブログや画像のカラーコードが知りたい？配色デザインに便利な拡張機能とは。

自身のブログサイトをカスタマイズするにあたって、他人のブログデザインや、インスタグラムに投稿された画像・写真などを参考にしたいことってありますよね。

僕自身も、

もちろんデザインを丸々ぱくっちゃうのは論外ですけど。

で、そんなときに使えるのが、Google Chromeの拡張機能である「ColorPick Eyedropper」です。

直感的かつシンプルな操作で、Webサイト中の画像や文字のカラーコードを正確に知ることができるので、この色情報を参考にして自分のブログのバナーや文字の配色を決めることができるんですよ。

ということで今回は、そんなブログデザインの配色選択に便利な拡張機能「ColorPick Eyedropper」について、その導入方法と使用例を詳細に説明していきます。

拡張機能「ColorPick Eyedropper」をchromeに追加する

まずは、「ColorPick Eyedropper」をchromeウェブストアから追加しましょう。

使用するブラウザはもちろんGoogle chrome。

ブログ運営やネットビジネスに取り組むなら、読み込みスピードが速く便利な拡張機能もたくさん使えるグーグルクロームをウェブブラウザとして使うのが基本中の基本なので、使っていない方はぜひこの機会にインストールして使うようにしてください。

chromeブラウザを開いたら、chromeウェブストアを開いて検索窓に「ColorPick Eyedropper」と入力しましょう。

検索すると、拡張機能一覧表示に「ColorPick Eyedropper」が出てくるので、「Chromeに追加」ボタンをクリックします。

Chromeの設定状態によっては、ここで「追加しますか？」というポップアップが表示されるので、「拡張機能を追加」をクリック。

すると下画像のように、ブラウザ上方の右側にColorPick Eyedropperのアイコンが表示されます。

これでColorPick Eyedropperを使用する準備は完了です。

選択カーソルをWebページ中の色情報を知りたい箇所に合わせる

ColorPick EyedropperをChromeに追加したら、早速これを使ってみましょう。

例えば、下画像は当Life Buffering Mediaのトップページなんですが…。

もしもあなたが僕のトップバナーを見て、黄線で囲った「LIFE」の文字色が気に入ったとします。

手前味噌で気持ち悪いんですけど、他のブログサイトを引用するわけにもいかないので、万が一にもそう思っていただけたとして。。

せっかく気に入った色味は、自分のブログにも是非取り入れていきたいですよね。

そこで、ColorPick Eyedropperの出番です。

Life Buffering Mediaのトップページを開いた状態で、先ほどブラウザ右上に追加されたColorPick Eyedropperにアイコンをクリックしましょう。

アイコンをクリックして、ブラウザの画面上でマウスを動かすと、マウスポインタが十字マークになっています。

この十字マークの中心を「Webページ中のカラーコードを知りたい箇所」に合わせてみてください。

上画像では、トップバナーの「LIFE」の文字のカラーコードを知りたいので、そこに十字マークカーソルをあわせています（左方の黄色マーカーの箇所です）。

右側に十字マークカーソル周辺の拡大画像が表示されますので、これを見ながらマウスを動かせば目的の箇所にカーソルを合わせやすいですね。

「ここだ！」というところにカーソルを合わせたらクリックします。

するとこのように、カーソルを合わせた箇所のHTMLカラーコードが表示されます。

ちなみに、カラーコードにはこの他にもRGBカラーコードや、HSLカラーコードがあるのですが、これらのコードは画面右側の十字カーソル拡大画像の上に表示されています。

目的に応じて必要なカラーコードをコピーするなりメモするなりしましょう。

カラーコードをコピーしてワードプレスに貼り付ける

あとは、ColorPick Eyedropperで取得したカラーコードをコピーしてワードプレスの必要箇所に貼り付けるだけです。

当然ながら、カラーコードを貼り付ける箇所はあなたがその色を使って何をしたいのかによって異なりますよね。

まあどこにこの色を使うのかは人それぞれだと思いますが、例えば「記事本文中の文字をこの色で強調したい！」と考えていた場合。

ワードプレスの記事執筆画面で、文字色選択から「カスタム」を選択します。

すると、カラーコードの入力画面が表示されますので、先ほどコピーしたコードを入力しましょう。

これにより、他者のサイトから抽出した自分好みの色で文字を装飾することができました。

終わりに

以上、ブログデザインの配色選択に便利な拡張機能「ColorPick Eyedropper」について、その導入方法と使用例を説明しました。

僕は、ブログのカスタマイズを行う上では、トップバナー画像から記事本文の文字色まで、全体の配色にこだわることがとても重要だと思っています。

少しでも読者さんに違和感を与えるような統一感のないブログデザインになってしまうと、せっかくブログに訪れてくれてもすぐに引き返してしまうので、これがPV数の伸びない原因にもなるんですよ。

ブログデザインの統一感を生む文字色の選び方｜背景やヘッダーの色味に合わせる方法とは。

なので、自分の思いどおりに色合いでブログデザインを構築できるように、「ColorPick Eyedropper」を活用して正確なカラーコードを取得できるようにしておきましょう。

Souhei

僕Souheiは今、PC1台片手にカフェを渡り歩き、自由気ままなノマドライフをまったりと愉しんでいます。

副業でネットビジネスを始め、個人起業という道を選んだ結果、好きな人と好きなシゴトをする日常で大きな収入を生み出せるようになったんです。

どうやってこんな日常を手に入れたのか？

興味がありましたら、僕のプロフィールをごらんいただければ幸いです。