How To

他人のサイトで使われているカラーコードの調べ方【ブログで真似し放題】

HTMLカラーコード

サイトで使われているカラーコードを簡単に調べることができる方法の紹介です。

専用ソフトのダウンロードなど、面倒な手間は一切なし。

誰でも簡単に「他人のサイトで使わているカラーコード」を調べることができます。

 

こんな人のお役に立てる記事です。

小豆
上位表示されているサイトやブログって、どれも色の使い方が上手で見やすいなぁ。
自分のブログもそうしたいんだけど、使われている色を簡単に調べられる方法はないのかな?

サイト内で使われてるカラーコードはGoogle Chromeで調べられる

小豆
あっ!この色いいなぁ。

企業のサイトや個人のブログを見ていると、こんな風に思う事ってありますよね。

 

Google Chromeの標準機能「デベロッパーツール」を使えば、サイト内で使用されている色のカラーコードを簡単に調べることができます。

というわけで、実際にやってみた結果がこれ。

カラーコードを参考にしたサイト

カラーコードの参考サイト

※参考元:もしもアフィリエイト「成果を出している人はこんな記事を書いている」

読み取ったカラーコードで作成した表

1 サンプルテキスト サンプルテキスト 
  • サンプルテキスト サンプルテキスト サンプルテキスト
  • サンプルテキスト サンプルテキスト サンプルテキスト

 

小豆
おぉ!確かに同じ色だ。

こんな感じで、気になった色を簡単に自分のブログ内で使用することができます。

Google Chromeを使ってサイトのカラーコードを読み取る方法

難しい操作は一切なし。

簡単2ステップでサイトで使われている色のカラーコードを読み取ることができます。

カラーコードの読み取り方法

  1. Google Chromeデベロッパーツールを起動する
  2. カラーコードを表示させる

 

step
1
Google Chromeデベロッパーツールを起動する

まずは、Google Chromeデベロッパーツールを起動します。

デベロッパーツールを起動

デベロッパーツールは、キーボードのF12キーを押すと起動します。

Google Chromeブラウザ以外のブラウザでは機能しません。
Chromeブラウザのダウンロードはこちら

 

step
2
カラーコードを表示させる

デベロッパーツール選択ツール

ツール左上のアイコンをクリック

カラーコードが表示

カラーコードを調べたい箇所にマウスを合わせると、使用されている色のカラーコードが表示されます。

 

大福
すごく簡単だね。
でも実は、デベロッパーツールでも調べられない色があるんだ。

 

こんなカラーコードは調べられない

残念ながらGoogle Chromeデベロッパーツールでは調べることができない色があります。

それが、以下の2つ。

  • 挿入された写真内のカラーコード
  • 挿入されたイラスト内のカラーコード

 

これらは、デベロッパーツールを使ってもカラーコードが表示されません。

カラーコード表示されない

 

大福
デベロッパーツールで調べられるのは、CSSで指定されている色だけなんだ。

 

専用ソフトを使えば、写真やイラストなどの画像からカラーコードを読み取ることも可能です。

ただ、僕の場合は面倒なのでやっていません。

正直なところ、Google Chromeデベロッパーツールで十分に事足りていますからね。

 

小豆
どうしても写真やイラストで使われているカラーコードを調べたい。

こんな人は、ColorZilla 使い方 🔍 でググってください。

専用ソフトのダウンロード方法や使い方を調べることができます。

これは便利!ブログ記事の配色に迷ったら利用したいサイト

他人のブログを参考にブログで使う色を決めるのも良いですが、オリジナル色を活かしたい場合は以下のサイトの利用が便利です。

カラーコード参考サイト

  1. カラーコード一覧表
  2. 原色大辞典

 

カラーコード一覧表

カラーコード一覧

カラー一覧から実際の色を見ながらカラーコードを調べることができます。

気になる色にマウスを合わせるだけで、サイトの背景色がその色に変化!

サイトの背景色が変化

切り取りされた小さなマス目ではなく、画面全体で色の確認ができるのでブログに使用した際のイメージが湧きやすいです。

 

カラーコード一覧へ移動する

 

原色大辞典

配色大辞典

色を一色指定すると、その色と相性の良いカラーの組み合わせが何パターンも表示されます。

配色パターンが表示

配色パターンを意識するのとそうでないのでは仕上がりに大きな違いが出ます。

 

配色を意識せずに適当に作った表

サンプルテキスト サンプルテキスト サンプルテキスト
サンプルテキスト サンプルテキスト サンプルテキスト
サンプルテキスト サンプルテキスト サンプルテキスト
サンプルテキスト サンプルテキスト サンプルテキスト
サンプルテキスト サンプルテキスト サンプルテキスト

配色パターンを参考にして作った表

サンプルテキスト サンプルテキスト サンプルテキスト
サンプルテキスト サンプルテキスト サンプルテキスト
サンプルテキスト サンプルテキスト サンプルテキスト
サンプルテキスト サンプルテキスト サンプルテキスト
サンプルテキスト サンプルテキスト サンプルテキスト

配色パターンを参考にすれば、簡単に見栄えの良い表を作ることができますね。

 

配色大辞典へ移動する

 

まとめ:カラーを上手に使って居心地の良いブログ作りを

ブログを訪れた人は、ぱっと見の3~5秒ほどでその記事を読むか読まないかを判断していると言われます。

大福
うわっ、この記事文字だらけで読みづらそう。

確かにこんな感じで、表示された記事を見てサッと画面を閉じることってありますよね。

 

ブログの直帰率を下げて滞在時間を長くするための方法はいくつもありますが、記事の見た目もその一つ。

カラーコードを上手に使用して、読者さんが居心地良く感じるブログ作りをしたいですね。

 

僕の場合は、カラーコード以外に【記事の装飾】にもこだわっています。

とは言え、記事装飾をきれいにするための専門的な知識は一切ないので、有料のWordPressテーマに頼りっぱなしですが。。

このブログで使用しているWordPressテーマ【AFFINGER5】については、以下の記事で詳しく紹介しています。

AFFINGERの評判
AFFINGERの評判を使用歴1年の僕が解説【見本サイトも紹介】

続きを見る

AFFINGER5お気に入り記事装飾
AFFINGER5でお気に入りの機能や記事装飾20選【2020年版】

続きを見る

こちらの記事もよく読まれています

  • この記事を書いた人
大福

大福

人間関係に嫌気がさして10年間務めた会社を退職。その後3年間のニート生活を送る。自宅にいながらパソコン1台で稼げることを知り、現在はストレスフリーな毎日を送っています。このサイトではブログやアフィリエイトで稼ぐ方法を発信しています。自宅にいながら稼げるって素晴らしい♪

-How To

© 2020 大福日記