サラリーマンぽんぽん

普通のサラリーマンが日常を綴り、かつて読者がたくさんいた受験日記ブログを上回る反響を目指しますw

Chrome拡張機能 ColorPick Eyedropper で色を調べよう!

ブログデザインをいじりたい

はてぶプロになると,ブログのデザインをイロイロいじれるようになるわけですが,今日は色を調べる簡単な方法をご紹介します。 自分ではCSSを書かず,色々なサイトを参考に使用させていただいている身ですが,色の変更なんかは割と簡単にできるかもしれません。

このブログのデザイン

ずいぶん昔になりますが、こんな記事を書いた際

www.pom2e.com

  に紹介させていただいた

theme-naked.hatenablog.jp    このデザインを愛用させていただいております。  シンプルだし、見やすいから使い続けたくなっちゃいます。

このデザインかっこいい!!ってなったとき

みなさんどうしていますか? とりあえず色だけ真似たボタンとかなら、素人の私でも作れそう!(もちろんこれもいろいろなブログを参考にさせていただいたわけですが。)

そのとき今使っているテーマと同じ色合いにしたいですよね?

先日紹介した,Milliard関連記事を使用する際,関連記事を表示させる下の部分の色を変えたいなと思ったわけです。

www.pom2e.com

自分のページの色を使えば,綺麗にできそうですよね。

Chromeの機能拡張 ColorPick Eyedropper!

Chromeの機能拡張に、素晴らしく便利なものがありました。

chrome.google.com

とにかく、ブラウザ中の気になったところの色は全部わかってしまうつわものです。

機能拡張については、前にもこんな記事を書きましたので、こちらも是非つかってみてください。

www.pom2e.com

使い方

まず上の機能拡張のページからインストールします。

これは簡単ですね。

私はすでにインストールしてしまっているので,CHROMEに追加済みになっていますが,ここを押せばインストールできます。

f:id:pom2e:20170124223144p:plain

インストールすると右上にこのボタンが出現します。

f:id:pom2e:20170124223709p:plain

これをクリックし、あとは見たいところにマウスのカーソルを持っていくだけ!

f:id:pom2e:20170124223715p:plain

こんな感じで、色が何色か分かっちゃいます。

Milliard関連記事の部分のデザインCSSをいじってテーマにあうような色にしてみました。

f:id:pom2e:20170124224449p:plain

まとめ

  1. Chromeの拡張機能ColorPick Eyedropperを使うと色がわかる
  2. デザインCSSで該当箇所の色などを変えたりすれば,自分で好きな色に設定できる!

たったこれだけのことですが、ホームページを作っていくと自分で色を指定しないといけない時がやってきますので、そんなときこの拡張機能が役に立ちますね! これ以外にも、拡張機能によって自分のGoogle Chromeをいろいろカスタマイズできますので、是非やって見てください。 僕も他のやつを紹介しようかな。