人生は宇宙だ!

くらげのように漂い、いろんなものが混ざり合う。人生はまさに宇宙なのだ。

*

ウェブページに使われている画像の色(カラーコード)を調べる方法

      2017/02/11

  • 画面をクリックするだけでカラーコードが取得できるEye Dropper

    以前、このブログで導入しているカエレバのボタンをカスタマイズしようとしたことがありました。その時にボタンの色をAmazonだったらオレンジに、楽天だったら赤にしようと思ったんですよ。こんな感じにしようとしたわけです。

    ボタンの色はAmazonだったらAmazonで使われているのと同じ色にしたいじゃないですか。オレンジだからって言って色味の違うオレンジになるのも嫌だし、しっかりと調べたいって思ったんですね。

    そのためには実際にAmazonのサイトを見て、実際に使われている画像などを元にカラーコードを調べないといけません。どうしたらいいのか?

    ぱっと思い浮かんだ方法は、Amazonに使われているロゴをダウンロードして、その画像をPhotoshopで開く。そしてPhotoshopのスポイトツールでカラーコードを取得することだったんです。

    でも面倒くさい。

    何か良い方法がないかと思って調べたところとっても簡単な方法が見つかったので紹介します。この方法だとウェブサイトを画面に表示して、すぐにカラーコードを取得することができるのでめちゃくちゃ簡単です。

    これを実現するために使用したのが、Chromeの拡張機能である”Eye Dropper”です。

    それでは実際にChromeにEye Dropperを追加して、サイトに表示された画像のカラーコードを取得する方法を説明していきます。

    Chromeの拡張機能としてEye Dropperを追加する

    まずChromeウェブストアのEye Dropperのページを表示します。

    “CHROMEに追加”をクリック。

    CHROMEに追加をクリック

    確認画面が表示されるので”拡張機能を追加”をクリック。

    拡張機能を追加をクリック

    追加に成功するとこのような画面が表示されます。

    EyeDropperのインストール完了

    そしてChromeの右上にはスポイトのアイコンが表示されるようになります。これで拡張機能の追加は完了。

    スポイトのアイコンをクリック

    サイトに使われているカラーコードを取得してみる

    それでは実際にサイトに使われている画像のカラーコードを取得してみます。これはこのブログのトップに表示している画像なんですが、この茶色い部分のカラーコードを取得してみます。

    ウェブページ上のカラーコードを知りたい

    Chromeの右上にあるスポイトのアイコンをクリックするとこのような画面が表示されます。ここで”Pick color from web page”をクリックします。

    Pick color from web pageをクリック

    画面上に四角いものが現れます。この四角はマウスの動きに合わせて動くので、マウスを動かして色を調べたい場所までマウスを持っていってクリックします。

    取得したい色の部分にマウスを持っていってクリックする

    Chromeの右上にあるスポイトに先ほど選択した部分の色が表示されます。

    スポイトのアイコンに色が表示される

    スポイトのアイコンをクリックするとこのような画面が表示されます。ここに選択した場所のカラーコードが表示されます。

    表示されたカラーコード

    これで手軽にウェブサイトの色を調べることができますね。

    • 0
    • 0
    • 0

     - デジタルライフ, ブログ運営 ,

  •   関連記事

    恥をかいていることすらわからなくなるくらい恥をかきまくれ

    恥をかけるあなたは勇気ある人だ こうやってブログを書くようになって分かったことが …

    Googleマップ
    Googleマップのナビで地図が回らない場合の対処法

    原因は地図の固定 Googleマップは本当に便利で車で知らない場所に行くときには …

    Chromeで位置情報が取得できない
    Chromeで位置情報の取得に失敗するのは仕様が変わったから。位置情報を取得したいなら別のブラウザを使おう

    バージョン50から安全でないサイトからは位置情報が取得できなくなりました 先日近 …

    httpでのアクセスをhttpsへリダイレクトさせる.htaccessの設定方法

    http接続をhttpsに自動的に飛ばす手順 ブログをhttps接続できるように …

    10kgまでの重さに耐えられるのでパソコンを使って仕事もできますよね。
    パソコンを使う人の常識。パソコンを使う時には飲み物はうしろに置け

    こぼれて困る物は前に置かない パソコンを使いながら飲み物を飲むっていう人って多い …

    カンボジアで買ったノート。1500リエル。
    自分の思いはすぐに書かないといけない

    大事な事はすぐに書き起こす! ぼくはこのブログに日々思った事を綴っていっています …

    ネット環境の悪いカンボジアでMacをOS X Mavericksにアップデータしてみた

    ネット回線が遅いカンボジアでアップデートに挑戦 今回はあんまりカンボジアには関係 …

    ネット接続を復活させる方法
    Zenfoneが突然ネットにつながらなくなった時の対処方法

    突然ネットに繋がらなくなっても慌てるな Skypeで友達と話をしていた時のこと、 …

    インフォメーションカウンター
    上海浦東空港でも一応Free Wi-Fiは使えます

    一応空港内にフリーWi-Fiがあります ぼくはカンボジアに行く時にはほぼ毎回上海 …

    JR東日本フリーWi-Fi
    JR東日本でフリーWi-Fiを使う方法まとめ

    事前登録は不要です 今回の日本一時帰国では関西の他にも東京にも滞在しました。ここ …