この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
毎日のように何かしら依頼があってワードプレスをいじくっているカズマです!
今日は、「ブログの配色」についてです!
僕は色彩センスというのにまったくもって自信がありません。
こんなことを言ってるからダメなのかもしれませんが、ホント分かりません。
ですけど、ブログやホームページを作成する際に色彩センスって問われてきますよね。
たまにありますよね。
なんでこの色にしたの!?って言いたくなるような汚い配色。
僕のサイトもそう思われてるのかもしれませんが(´・ω・`)
センスは磨けばいいんだ!ってことかもしれませんけど、
サイトを作るぞってなってから色彩センスを磨こうにもいつになったら磨かれるんだよ!って話になりますよね。。。
でも大丈夫です!
配色センスがなかろうが、安心して色を設定することができる方法があるんです。
Color Hexaで相性の良い配色パターンが分かる!
世の中には便利なサイトが沢山ありますよね!
Color Hexa(カラーヘキサ)も便利サイトの1つで、1つ色を指定すれば、その色と相性の良い色を提案してくれるんです!
提案された色をブログやホームページの配色に反映させればいいので簡単ですね!
手順はこんな感じです。
- お好みのメインカラーを1つ決める
- カラーコードをColor Hexa(カラーヘキサ)に指定する
- 提案された相性の良い色をブログに反映させる
ね?簡単でしょ!
じゃあ、この手順を詳しく解説していきますね!
Color Hexaを参考にワードプレスでカラー変更をする手順
実際の操作手順を画像付きで説明していきます!
1.お好みのメインカラーを1つ決める
まずは、お好みのカラーを決めましょう。
メインカラーなので自分の好きな色かテーマに合うような色にするといいですね。
ただ、原色は使い勝手が難しいので、彩度を落とすなど落ち着いた色にしましょう!
ダッシュボードから「外観」→「カスタマイズ」→「サイトカラー設定」(ここは各テーマによって多少違います)
メインカラーが決まったらカラーコードが出てくるのでこれをコピーします。
2.カラーコードをColor Hexa(カラーヘキサ)に指定する
次にColor Hexa(カラーヘキサ)にいきます。
検索窓に先ほどのカラーコードをペースつぃて検索ボタンをクリックします!
ちょこっと下にスクロールしていきましょう!
そうすると相性の良い色がたくさん出てきます!
自分が指定したメインカラーの隣に相性が良い色が出てきているので、ここから自分好みのものを選びます!
3.提案された相性の良い色をブログに反映させる
お気に入りの色が見つかったら、その色の上にカーソルを合わせます。
すると、カラーコードが表示されるのでそれをコピーします。
ワードプレスのテーマカスタマイザーのサイトカラー設定に戻り、設定したい箇所にカラーコードを貼りつければOKです。
プレビューで確認してよければ保存をしてください。
どうですか?
手順も少なく簡単でしたね!
まとめ
配色ってホントに難しいです。
どんな色にするのが一番良いのかなんて誰にも分かりません。
なので、メインのカラーは自分の好きな色で彩度を少し暗くして落ち着いた色にさえすればいいのではないかなって思います。
何度も言いますが原色は使うのが難しいので素人は手を出さないほうが無難かと。
自分の好きな色さえ決めてしまえば、あとはColor Hexaに任せるのが一番でしょうね!
既になんとなくで配色を決めてはる場合には一度確認してみてもいいかもしれませんね。
サブカラーでチェックするのではなくメインカラーで調べるのがいいですよ♪