【画像で簡単】ワードプレス カラーピッカーの使い方と色の3要素

【画像で簡単】ワードプレス カラーピッカーの使い方と色の3要素




■このブログは2018年9月6日に書きました。

こんにちは!
ソバネコです。

このブログは、元プロボクサーで現在デザイナーであるソバネコが、ワードプレス(ストーク)の使い方について書いた記事です。

今回は、ワードプレス操作の基本編として、サイトカラー設定内で使える「カラーピッカー」について書いています。

サイトカラー設定とは?

カラーピッカーが使えるページは色々ありますが、代表的なのは「サイトカラー設定」のページになります。このページでは、文字通りサイトのカラーを設定できます。

設定できるカテゴリーを大まかに分けると、

・背景の色
・テキストの色
・リンクの色
・ラベルの色
・見出しの色

となり、ワードプレス内の色については、ほとんどの部分を自由にカスタマイズできます。
その際に必要となるツールが「カラーピッカー」です。




サイトカラー設定の項目に移動

まずはサイトカラー設定に移動してみましょう。

設定画面を開き、右側のメニューバーから外観をクリック

外観の中のカスタマイズをクリック

カスタマイズの画面に遷移します

サイトカラー設定をクリック
これでサイトカラーの設定画面になります。




カラーピッカーの使い方

サイトカラー設定のページではたくさんの項目がありますが、まずはカラーピッカーの使い方を説明します。
試しに「ヘッダー背景(メインカラー)」の「色を選択」をクリックをしてみましょう。

すると絵の具のようなパレット出てきました。
これをカラーピッカーといい、色を自由に設定できるツールです。
ポインターを動かすだけで直感的に色を変更できるのが特徴。

カラーピッカーの動かし方

現在の白色の設定だと味気ないので、試しに下にあるサンプルカラーの赤を押します。
すると、虹色のようなカラーが表示されます。

カラーピッカーは直感でもいいですが、基本的な使い方を覚えると応用出来るので便利です。

色は構成する3つの要素がつあります。

【色相】→色の種類。赤、青、緑といった色合いのこと。

【明度】→色の明るさ。明るい、暗いなどの明るさの度合い。

【彩度】→色の鮮やかさ。鮮やか、渋いなどの鮮やかさの度合い。

この3要素をカラーピッカーでも操作ができるので、実際にやってみます。




色相を変える

ポインターを右に動かして黄色へ動かします。
すると、ヘッダー部分の背景が黄色に変わりました。色を変えることができるんですね。

明度を変える

明度を変えるにはポインターを下に動かします。
すると、黄色の色がだんだんと暗い黄土色っぽく変化します。色あいを変えず明るさのみが暗くなりました。

彩度を変える

彩度を変えるには右側のグラフを上下に動かします。
明るい黄色が淡い黄色に変わりました。




カラーピッカーのまとめ

最後にもう一度、色の3要素をまとめてみます。

色相を変えた場合

色相では、色あいが変わります。この場合は赤色→黄色に変わってますね。

明度を変えた場合

明度では、色あいは変わらずに色の明るさが変わります。この場合は黄色は黄土色っぽくなります。

彩度を変えた場合

彩度では、色あいは変わらずに色の鮮やかさが変わります。黄色は淡くなっていきますね。

以上がカラーピッカーの使い方と色の3要素についてになります。お疲れ様でした^ ^

まとめ

今回は、ワードプレス操作の基本編として、サイトカラー設定内で使える「カラーピッカー」について書きました。

今まで直感的に色を選んでいた人も、色の3要素を意識しながら使うことで、さらに広がりがある使い方ができると思います。ではでは!




■ その他のカスタマイズ設定方法記事はこちら!

【画像で簡単】ワードプレス ストーク グローバル設定方法 その2

【画像で簡単】ワードプレス ストーク グローバル設定方法 その2

2020年5月4日
【画像で簡単】ワードプレス ストーク グローバル設定方法 その1

【画像で簡単】ワードプレス ストーク グローバル設定方法 その1

2020年5月5日
【画像で簡単】ワードプレス ストーク 背景画像の設定方法

【画像で簡単】ワードプレス ストーク 背景画像の設定方法

2018年9月22日
【画像で簡単】ワードプレス ストーク トップページ設定方法 その2

【画像で簡単】ワードプレス ストーク トップページ設定方法 その2

2018年9月20日
【画像で簡単】ワードプレス ストーク サイトロゴ・アイコン設定方法

【画像で簡単】ワードプレス ストーク サイトロゴ・アイコン設定方法

2018年9月13日
【画像で簡単】ワードプレス ストーク サイトカラー設定の使い方 その2

【画像で簡単】ワードプレス ストーク サイトカラー設定の使い方 その2

2018年9月11日
ストーク

【画像で簡単】ワードプレス ストーク サイトカラー設定の使い方 その1

2018年9月8日
【画像で簡単】ワードプレス カラーピッカーの使い方と色の3要素

【画像で簡単】ワードプレス カラーピッカーの使い方と色の3要素

2018年9月6日
ストーク

【画像で簡単】ワードプレス ストークカスタマイズ 基本情報の入力方法

2018年9月4日

にほんブログ村 格闘技ブログ ボクシングへ
にほんブログ村

人気ブログランキング




コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です