今回は、WordPressの標準機能であるテキストカラーと背景色を変更するボタンについて、これを押した際の実際の色味を自分の好きなデザインに変更する方法を紹介します。また最後には、丸々コピペで実装可能なCSSの見本を付けけていますので参考にしてみて下さい。
デフォルトだと色味が濃すぎて、黒やグレー以外は非常に扱い辛い配色になっています。これをもっと優しい色に変更すれば、使い所も増えると思ったので、この場でカスタムのやり方と配色の例を共有したいと思います。
また今回はCSSの知識は必須です。分からないって方はまずは下記の記事でCSSが何なのかを理解しましょう。
カラー選択のカスタムCSS
WordPressのカラー選択パネルを押した際の配色の変更は、そのカラーパネルで付与されるCSS classに対して色を振り直します。それだけです。
では、その付与されるカラーボタンのCSSクラスの見方を紹介します。
まずは色設定で適当なカラーボタンを押してください。
上記のブロックで「HTMLで編集」を押すとpタグにclassが付いています。このクラスは配色のそれぞれに別のクラスが付いています。これらのclassを使ってカスタムCSSで色を振り分けます。
classがわかったら、WordPress左側管理メニューの外観→カスタマイズから追加CSSを押します。
下記の様に先程のclassに対してCSSで色を指定し直します。（次の「配色の例」のCSSを丸々コピペでいけます。）
テキストカラーは以下の様にpタグのclass2つに対してcolorを指定します。
p.has-text-color.has-pale-pink-color {
color: rgb(247, 141, 167);
}
背景色は以下の様にpタグの2つのclassに対してbackground-colorを指定します。
p.has-background.has-very-light-gray-background-color{
background-color: rgb(238, 238, 238);
}
配色の例（CSSコピペ用）
元カラー
デフォルトのカラー設定です。ご自身で色味を考えていきたい場合はこのCSSを元にカラーコードだけ差し替えれば良いかと思います。
/*ブロックエディタ用カラーボタン*/
/*テキストカラー*/
p.has-text-color.has-pale-pink-color {
color: rgb(247, 141, 167);
}
p.has-text-color.has-vivid-red-color{
color: rgb(207, 46, 46);
}
p.has-text-color.has-luminous-vivid-orange-color{
color: rgb(255, 105, 0);
}
p.has-text-color.has-luminous-vivid-amber-color{
color: rgb(252, 185, 0);
}
p.has-text-color.has-light-green-cyan-color{
color: rgb(123, 220, 181);
}
p.has-text-color.has-vivid-green-cyan-color{
color: rgb(0, 208, 132);
}
p.has-text-color.has-pale-cyan-blue-color{
color: rgb(142, 209, 252);
}
p.has-text-color.has-vivid-cyan-blue-color{
color: rgb(6, 147, 227);
}
p.has-text-color.has-vivid-purple-color{
color: rgb(155, 81, 224);
}
p.has-text-colo.has-very-light-gray-color{
color: rgb(238, 238, 238);
}
p.has-text-color.has-cyan-bluish-gray-color{
color: rgb(171, 184, 195);
}
p.has-text-color.has-very-dark-gray-color{
color: rgb(49, 49, 49);
}
/*背景色*/
p.has-background.has-pale-pink-background-color{
background-color: rgb(247, 141, 167);
}
p.has-background.has-vivid-red-background-color{
background-color: rgb(207, 46, 46);
}
p.has-background.has-luminous-vivid-orange-background-color{
background-color: rgb(255, 105, 0);
}
p.has-background.has-luminous-vivid-amber-background-color{
background-color: rgb(252, 185, 0);
}
p.has-background.has-light-green-cyan-background-color{
background-color: rgb(123, 220, 181);
}
p.has-background.has-vivid-green-cyan-background-color{
background-color: rgb(0, 208, 132);
}
p.has-background.has-pale-cyan-blue-background-color{
background-color: rgb(142, 209, 252);
}
p.has-background.has-vivid-cyan-blue-background-color{
background-color: rgb(6, 147, 227);
}
p.has-background.has-vivid-purple-background-color{
background-color: rgb(155, 81, 224);
}
p.has-background.has-very-light-gray-background-color{
background-color: rgb(238, 238, 238);
}
p.has-background.has-cyan-bluish-gray-background-color{
background-color: rgb(171, 184, 195);
}
p.has-background.has-very-dark-gray-background-color{
background-color: rgb(49, 49, 49);
}最適化
背景色を薄くしてテキストを濃くしたのでくっきりと見やすくなります。
/*ブロックエディタ用カラーボタン*/
/*テキストカラー*/
p.has-text-color.has-pale-pink-color {
color: #ff698d;
}
p.has-text-color.has-vivid-red-color{
color: #ed0505;
}
p.has-text-color.has-luminous-vivid-orange-color{
color: #ff9500;
}
p.has-text-color.has-luminous-vivid-amber-color{
color: #ffe730;
}
p.has-text-color.has-light-green-cyan-color{
color: #00c978;
}
p.has-text-color.has-vivid-green-cyan-color{
color: #2fa379;
}
p.has-text-color.has-pale-cyan-blue-color{
color: #3ba8ed;
}
p.has-text-color.has-vivid-cyan-blue-color{
color: #0693e3;
}
p.has-text-color.has-vivid-purple-color{
color: #6627b3;
}
p.has-text-colo.has-very-light-gray-color{
color: #d4d4d4;
}
p.has-text-color.has-cyan-bluish-gray-color{
color: #81868a;
}
p.has-text-color.has-very-dark-gray-color{
color: #464747;
}
/*背景色*/
p.has-background.has-pale-pink-background-color{
background-color: rgba(247, 141, 167 ,0.3);
}
p.has-background.has-vivid-red-background-color{
background-color: rgba(207, 46, 46 ,0.5);
}
p.has-background.has-luminous-vivid-orange-background-color{
background-color: rgba(255, 105, 0 ,0.3);
}
p.has-background.has-luminous-vivid-amber-background-color{
background-color: rgba(252, 185, 0 ,0.3);
}
p.has-background.has-light-green-cyan-background-color{
background-color: rgba(123, 220, 181 ,0.3);
}
p.has-background.has-vivid-green-cyan-background-color{
background-color: rgba(0, 208, 132 ,0.3);
}
p.has-background.has-pale-cyan-blue-background-color{
background-color: rgba(142, 209, 252 ,0.3);
}
p.has-background.has-vivid-cyan-blue-background-color{
background-color: rgba(6, 147, 227 ,0.3);
}
p.has-background.has-vivid-purple-background-color{
background-color: rgba(155, 81, 224 ,0.3);
}
p.has-background.has-very-light-gray-background-color{
background-color: rgba(238, 238, 238 ,0.8);
}
p.has-background.has-cyan-bluish-gray-background-color{
background-color: rgba(171, 184, 195, 0.8);
}
p.has-background.has-very-dark-gray-background-color{
background-color: rgba(49, 49, 49, 0.9);
}徐々に薄く変化
スクロールすると色が薄くなっていく遊び心のある仕様です。
/*ブロックエディタ用カラーボタン*/
/*テキストカラー*/
p.has-text-color.has-pale-pink-color {
color: #ff698d;
}
p.has-text-color.has-vivid-red-color{
color: #ed0505;
}
p.has-text-color.has-luminous-vivid-orange-color{
color: #ff9500;
}
p.has-text-color.has-luminous-vivid-amber-color{
color: #ffe730;
}
p.has-text-color.has-light-green-cyan-color{
color: #00c978;
}
p.has-text-color.has-vivid-green-cyan-color{
color: #2fa379;
}
p.has-text-color.has-pale-cyan-blue-color{
color: #3ba8ed;
}
p.has-text-color.has-vivid-cyan-blue-color{
color: #0693e3;
}
p.has-text-color.has-vivid-purple-color{
color: #6627b3;
}
p.has-text-colo.has-very-light-gray-color{
color: #d4d4d4;
}
p.has-text-color.has-cyan-bluish-gray-color{
color: #81868a;
}
p.has-text-color.has-very-dark-gray-color{
color: #464747;
}
/*背景色*/
p.has-background.has-pale-pink-background-color{
background: linear-gradient(#ffe6ea, #ffb0bd ) fixed;
}
p.has-background.has-vivid-red-background-color{
background: linear-gradient(#ffb8b8, #ff0000 ) fixed;
}
p.has-background.has-luminous-vivid-orange-background-color{
background: linear-gradient(#ffeac4, #ffa400 ) fixed;
}
p.has-background.has-luminous-vivid-amber-background-color{
background: linear-gradient(#ffffd9, #ffff00 ) fixed;
}
p.has-background.has-light-green-cyan-background-color{
background: linear-gradient(#f2fff2, #90ee90 ) fixed;
}
p.has-background.has-vivid-green-cyan-background-color{
background: linear-gradient(#64fa64, #008000 ) fixed;
}
p.has-background.has-pale-cyan-blue-background-color{
background: linear-gradient(#e8f6ff, #87cefa ) fixed;
}
p.has-background.has-vivid-cyan-blue-background-color{
background: linear-gradient(#d9d9fc, #0000ff ) fixed;
}
p.has-background.has-vivid-purple-background-color{
background: linear-gradient(#efc9ff, #9400d3 ) fixed;
}
p.has-background.has-very-light-gray-background-color{
background: linear-gradient(#f5f5f5, #cfcfcf ) fixed;
}
p.has-background.has-cyan-bluish-gray-background-color{
background: linear-gradient(#cfcfcf, #8a8a8a ) fixed;
}
p.has-background.has-very-dark-gray-background-color{
background: linear-gradient(#8a8a8a, #4a4a4a ) fixed;
}グラデーション
グラデーションにしてみました。自身でグラデーションのパターンを変更すればまた違った感じになるかと思います。
/*ブロックエディタ用カラーボタン*/
/*テキストカラー*/
p.has-text-color.has-pale-pink-color {
color: #ff698d;
}
p.has-text-color.has-vivid-red-color{
color: #ed0505;
}
p.has-text-color.has-luminous-vivid-orange-color{
color: #ff9500;
}
p.has-text-color.has-luminous-vivid-amber-color{
color: #ffe730;
}
p.has-text-color.has-light-green-cyan-color{
color: #00c978;
}
p.has-text-color.has-vivid-green-cyan-color{
color: #2fa379;
}
p.has-text-color.has-pale-cyan-blue-color{
color: #3ba8ed;
}
p.has-text-color.has-vivid-cyan-blue-color{
color: #0693e3;
}
p.has-text-color.has-vivid-purple-color{
color: #6627b3;
}
p.has-text-colo.has-very-light-gray-color{
color: #d4d4d4;
}
p.has-text-color.has-cyan-bluish-gray-color{
color: #81868a;
}
p.has-text-color.has-very-dark-gray-color{
color: #464747;
}
/*背景色*/
p.has-background.has-pale-pink-background-color{
background: linear-gradient(90deg, #fdf7fa, #ffaad5);
}
p.has-background.has-vivid-red-background-color{
background: linear-gradient(90deg, #ffd5d5, #d50000);
}
p.has-background.has-luminous-vivid-orange-background-color{
background: linear-gradient(90deg, #ffead5, #ff8000);
}
p.has-background.has-luminous-vivid-amber-background-color{
background: linear-gradient(90deg, #f8eadc, #d5802b);
}
p.has-background.has-light-green-cyan-background-color{
background: linear-gradient(90deg, #eaf8dc, #95ff2b);
}
p.has-background.has-vivid-green-cyan-background-color{
background: linear-gradient(90deg, #bfd5aa, #40552b);
}
p.has-background.has-pale-cyan-blue-background-color{
background: linear-gradient(90deg, #eaffff, #2bffff);
}
p.has-background.has-vivid-cyan-blue-background-color{
background: linear-gradient(90deg, #80bfff, #1d558d);
}
p.has-background.has-vivid-purple-background-color{
background: linear-gradient(90deg, #eadcf8, #551d8d);
}
p.has-background.has-very-light-gray-background-color{
background: linear-gradient(90deg, #f9f9f9, #d4d4d4);
}
p.has-background.has-cyan-bluish-gray-background-color{
background: linear-gradient(90deg, #b4b4b4, #747474);
}
p.has-background.has-very-dark-gray-background-color{
background: linear-gradient(90deg, #5f5f5f, #2a2a2a);
}以上が「WordPressのカラー選択の色を自由に変更する方法：見本あり」でした。
今回の内容をまるっとコピペして、カラー選択を実用性のある配色に変えれば、今後CSSで1個ずつ記述しなくても綺麗な色合いで文章を作成出来るかと思います。気にいるデザインがなかった場合は自信でカラーコードを色々ろ書き換えてみて下さい。
