「ブログの配色を決める」「カラーコードを見つける」がカンタンにできるツールを紹介。

広告
ピグ
ピグ

デザイン素人、

ピグです!

当ブログはcocoonというテーマを使っています。

cocoonには色んな「スキン」があり、ブログの模様替えをすることができます。

 

たまに、「ココの色、どうしよう?」って時があります。

例えば、こんなとき👇

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

新たに通知エリアを設けるとき、

ピグ
ピグ

ぶひっ!

どんな色がイイのかなー?

 

色はココから設定します👇

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。
ピグ
ピグ

う~ん、

センスも知識もない自分には

ムズカシイ!

 

でもネットで調べるうちに、素晴らしいツールを発見しました。

今回は2つのツールを使って、

「ブログ内で使われている色のカラーコードを調べる ➡ おすすめの配色を選ぶ」

をカンタンにやる方法を紹介します。

 

広告
広告

自分流、配色の決め方

以下の2つのツールを使います。

ColorZilla

GoogleChromeの拡張機能。Edgeにもあります。指定した場所(色)のカラーコードを教えてくれる。

PALETTABLE

カラーコードを入力すると、その色に合ったものを教えてくれる。

 

使い方を、順を追って紹介します。

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

このエリアの色を決める、を例にして紹介します。

 

今使っている色のカラーコードを取得する。

👆拡張機能を取得します。

「Chromeに追加」をクリックます。

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

自分のブログを表示します。

自分の使っているスキンの色は、この緑です。

今回はこの色に合う色を探します。

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

ブラウザの右上に拡張機能が表示されています。

「ColorZilla」をクリックして起動します。

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

ブログのヘッダー、緑の部分にカーソルをもってくると、

上にも同じ色が表示されます。

そして右にはその色の「カラーコード」が表示されます。

この状態でクリックすると、カラーコードがコピーされます!

ピグ
ピグ

カンタン!

 

配色のオススメを選ぶ

「PALETTABLE」というサイトを開きます。

英語だけどカンタンに使えます。

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

真ん中にカラーコードがあります。

これを先ほどコピーしたカラーコードに置き換えます。

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

緑色が表示されました。

隣にそれに合った色が「提案」されます。

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

提案された色の下に、

・ Dislike(嫌い)

・ Like(好き)

ボタンが表示されます。

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

「Dislike」をクリックすると、他の色を提案してくれます。

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

「Like」をクリックすると、

すると前の2色に合う色をさらに提案してくれます!

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

自分が気に入った色のカラーコードをコピーして完了です。

 

ワードプレスの設定画面でカラーコードを入力

デザインの素人が、ブログの配色を選ぶのに役立ちそうなツールを紹介します。

あとは設定画面でカラーコードを貼り付ければ、その色が適用されます!

 

以上です!

この記事は役にたちましたか?

広告
 
広告
豆知識
こぶたのピグちゃん
タイトルとURLをコピーしました