人生に大切なお金/エンタメ/役立つ情報などを発信するブログ

WEBサイトに使われている色のカラーコードを調べる方法【ColorZilla】

WEBの色コードを調べる方法_サムネ
困っているネコ
ブログのカスタマイズにも挑戦しようと思ってて、気に入ったWEBサイトに使われているのと同じ色を自分のブログにも使いたいんだけど、どうすればいいの?

 

Google Chromeの拡張機能を使えば簡単にできるから、紹介するね!

 

  • ・WEBサイトに使われている色のカラーコードを調べる方法
  • ・Google Chromeの拡張機能で簡単にできます

 

ブログのテーマカラーやアクセントカラーを変えるのは、簡単にできるブログカスタマイズですし、自分の好きな色に変えると気分も上がってやる気もでますよね!

 

気に入ったWEBサイトなどに使われている色と全く同じ色を、自分のブログでも使いたい!ということもあると思います。

 

今回はそういったときのために、WEBサイト上で使われている色のカラーコードを調べる方法をご紹介します。

 

 

WEBサイトに使われている色のカラーコードを調べる方法

 

WEBの色コードを調べる方法1

 

結論、ColorZillaというGoogle Chromeの拡張機能を入れると簡単に調べられます。

 

まずはGoogle ChromeのブラウザでColorZillaと検索してください。

※パソコンで作業してください

 

》ColorZilla

 

ColorZillaのページに行くと、右にある「Chromeに追加」をクリックして、「拡張機能を追加」でOKです。

 

すると「ColorZilla installed」というページが表示されますが、無視して閉じてしまって大丈夫です。

 

colorzilla_ステップ1

 

次にウインドウの右の方にあるパズルアイコン(拡張機能アイコン)をクリックすると、拡張機能メニューが出てきます。

 

その中にColorZillaがあるので、ピンマークをクリックしてください。

 

colorzilla_ステップ2

 

colorzilla_ステップ3

 

そうすると下のように、ウインドウにスポイトのアイコンが追加されたと思います。

 

これがColorZillaのアイコンです。

 

ちなみにその左に並んでいるいくつかのアイコンは、僕が入れているChromeの拡張機能です。

 

colorzilla_ステップ4

 

ColorZillaのアイコンをクリックすると下にメニューが表示されるので、一番上の「Pick Color From Page」を選んでください。

 

colorzilla_ステップ5

 

Pick Color From Pageをクリックすると、ColorZilla専用のバーが出現し、カーソルが十字に変わります。

 

カーソルを自分が取りたい色に合わせてクリックすれば取得完了で、ColorZilla専用のバーに取得したカラーコードが表示されます。

 

「#」とそのあとに続く「6桁の英数字」がカラーコードです。

 

colorzilla_ステップ6

 

今回取得したオレンジ色は「#FF4717」ですね。

 

あとはwordpressなどのブログ側で、色を変えたい部分のカラーコードを打ち替えるだけ。

 

このカラーコードを覚えておいて打ち替えても良いですし、ColorZilla色を取得した時点で自動的にコードがコピーされているので、ペーストもできます。

 

実際にColorZillaで色を取得している様子を、20秒ほどの短い動画にしているのでイメージがつきやすいかと思います。

 

 

 

過去に取得したカラーコードの履歴も見られる

colorzilla_ステップ8

 

ColorZillaのメニューには「Picked Color History」という機能もあり、過去に取得したカラーコードの履歴が見られます。

 

colorzilla_ステップ9

 

便利な機能ですよね!

 

今回取得したオレンジ色を、LIFE DRILLのヘッダーに適応するとこんな感じ。

 

colorzilla_ステップ7

 

こんなふうにColorZillaを使えば、WEB上の色を簡単に調べて取得できるので、「かっこいいなー」とか「おしゃれだなー」と思うカラーリングのサイトがあれば、採用して遊んでみてください!

 

それではまた、次の記事で。

 


 

WEBの色コードを調べる方法_サムネ
最新情報をチェックしよう!