サイト上の色(コード)を調べる MACの便利なツールDigital Color Meter

WordPressでサイトを作っていると、

・あのサイトに載っていた色が使いたいけれども、コードがわからない

・テンプレートにすでに使われている色と統一感を出したいけれども、テンプレートの色がわからない

ということがあると思います。

これを簡単に調べる方法があります。

今回はMACであれば最初から入っている便利なツールDigital Color Meterについて紹介します。

MACユーザーであれば、最初から入っているので無料で使えます。

スポンサーリンク

Digital Color Meterの使い方

それでは、Digital Color Meterの使い方について説明します。

Digital Color Meterの起動

Digital Color Meterを起動します。

PC画面のメニューの中の「Launchpad」を開きます。

「Launchpad」の中の「その他」を開きます。

「その他」の中に「Digital Color Meter」というアプリがあるので、それをクリックすれば起動完了です。

Digital Color Meterの使い方

Digital Color Meterの使い方は簡単です。

自分が求めているサイトの色コードが知りたい場合の手順を紹介します。

①「Digital Color Meter」を開いたら、まず「表示」→「値を表示」→「16進法」を選択します。

②次に、「Digital Color Meter」を開いた状態で、サイト上にある自分の目的の色にマウスを合わせ、「Shift + Command + C」を押すと、目的の色のコードがコピーされています。

目的の色のコードになっているかは、「Digital Color Meter」の中央に表示されている色が目的の色でればほぼ間違いありません。

コピーしたコードをメモ帳やサイトなどに貼り付けて使うことができます。

以上で、サイト上の色コードを調べることができる「Digital Color Meter」の紹介を終わります。

具体的な使用例は、こちらの記事をご覧ください。

Simplicity2:「記事を読む」ボタンに色をつけるカスタマイズ
WordPressの無料テーマSimplicity2の個別投稿記事に表示される「記事を読む」ボタンに色をつけるカスタマイズを紹介します。 通常だと上のように記事についての抜粋の下に「記事を読む」というリンク...