ワードプレスでは、ところどころにカラーパレットを使用して色を指定する場面があります。
このページでは、ビジュアルエディター使用時に表示されるカラーパレットでの色の指定方法を説明しています。（カスタマイザー画面で表示されるカラーパレットの指定方法はこちらをご覧ください）
カラーパレットとは？
色を指定する際に表示されるツールです。ワードプレス（ザ・トール）では、ビジュアルエディターで表示されるカラーパレットとカスタマイザーで表示されるカラーパレットの２種類のパレットがあります。それぞれ、大まかな使い方は同じですが、若干表示内容が異ります。
上の画像は、ワードプレスに表示されるカラーパレット２種類を表示させたものです。右側のカラーパレットはカスタマイザーで色を指定する際に表示されるパレットで、左側のカラーパレットはビジュアルエディターで色を指定する際に表示されるカラーパレットになります。
色の指定方法
ビジュアルエディター用カラーパレットで色を指定する場合、色の指定方法は大きく分けて3通りあります。
1つ目は、カラーパレット内でマウスを動かして色を取得する方法。2つ目は、「赤・緑・青(RGB)」をそれぞれ指定する方法。3つ目は、#RRGGBBコードで指定する方法です。ひとつずつ説明していきますね。
カラーパレットで色指定
カラーパレットの中で色を指定する方法です。
1.色の選択
画像の中央の「黄緑の丸印」部分にカーソルを当てると十字マークが表示されるので、クリックしながら上下に移動させる(ドラッグ)と色合いを指定できます。( 画像を表示)
該当する色を直接クリックして色を取得することも可能です。
明暗の調整
画像左側の赤い丸印の部分にカーソルを合わせると十字マークが表示されます。色の選択と同じようにクリックしたまま移動する(ドラッグ)と色の明暗を調節できます。( 画像を表示)
直接クリックして色の変更をすることも可能です。
指定する色を確認
画像右側の水色の丸印で囲まれた部分が、指定する色を表示されている枠です。この枠内に指定したい色を表示させてください。( 画像を表示)
指定したい色を表示させたら［OK］ボタンをクリックして、色の指定を確定させます。
RGBを入力して色指定
R(赤)、G(緑)、B(青)の原色にそれぞれ0～255までの数字を記入して色を指定する方法です。この３か所に数字を入力すると、下段の「#」から始まるカラーコードや完成した色の表示が変わります。
RGB３原色から色を指定する手順は、当サイトの色見本で指定したい色を決めてから、「赤」欄にはRの３桁を、「緑」欄にはGの３桁を、「青」欄にはBの３桁を入力します。
上の指定例(画像)では「R032」とありますが、Rの欄に「032」と記入しても、0を省略して「32」と記入してもどちらも正しく色を反映させることができるので、どちらの記述でもOKです。
RGB3つの原色を0～255で指定するとき、３つ目の入力が済んだだけの状態では最終的な色の変更が済んでいないので、3つめの入力した値を有効化するために別の欄にカーソルを移動させて色を完成させてください。( 画像を表示)
RGBの数値の調べ方
RGBの数値を調べるには、当サイトの色見本を使って簡単に調べることができます。ザ・トールだけの色を表示させた色見本、CSSで定義されている色だけを表示された色見本、ザ・トールとCSSの色見本すべてを一覧表示させた色見本と、３種類の色の見本がありますので使いやすいページから色をお選びください。( 画像を表示)
#RRGGBBコードで色指定
#RRGGBBのカラーコードを入力して色を指定する方法です。
当サイトの色見本で指定する色を決めてから、「#RRGGBB」の部分にカーソルを合わせてダブルクリックします。
タプルクリックすると「#」を除いた６桁が選択されるのでそのままコピーして、カラーパレットの「#」欄にペーストします。( 画像を表示)
コードを入力しても、この時点ではまだ色の反映はされていません。別の場所をクリックしてカラーコードの色を表示させます(上の画像では色を表示する枠内をクリックしています)。
色の表示が正しいことを確認してから、［OK］ボタンをクリックしてください。
#RRGGBBコードの調べ方
#RRGGBBコードを調べる方法は当サイトの色見本を使用すればとっても簡単に調べることができます。３種類の色見本の他にも、３つの記事すべてにカラーピッカーを表示されていますので、お使いのモニター内に表示されている「色」を取得し、その色のコードを調べることも可能です。いろいろ試しながら使いやすい方法でご活用ください。(【カラーピッカーの使い方】)
まとめ
ビジュアルエディター用カラーパレットで色を指定する方法を3つ紹介させていただきました。色の見本やカラーピッカーなどを使ってご活用ください。
お疲れさまでした。
