CSS で color や background プロパティで色を設定する いろいろな方法

CSSを学び始めると、最初にやることの一つに、テキストの色や、背景色の設定があると思います。
指定の仕方は、意外とたくさんあります。このページでは、WordPress を使って色の指定をしていく作業を中心に、さまざまな方法を私見を交えてみていきたいと思います。

色をセットする方法

HTMLのstyle属性で設定する

以下は、段落の背景をオレンジ色にセットしたものです。
以下のスタイルは、スタイル属性で、背景色と、テキスト色を設定しています。

背景をオレンジ色に設定

style属性を使う場合は、その要素が他のstyleの影響をできるだけ受けたくない場合に、使われますが、その要素にしか適用されないため、色設定をその都度行わなければなりません。

WordPressで設定する

サイドバーの、background colorの設定で行います。これらのカラー設定は、テーマ等であらかじめセットされた数種類の色または、カラーピッカーで設定された色を表示することができます。

Note:カラーピッカーで設定した場合の色は、上述のstyle属性を使って表示されます。カラーピッカーを使わない設定の場合は、次に説明するクラスを使って表示されます。

HTMLのclass属性を使って設定する

色の設定は、style属性以外の属性を使っても設定することができます。最も多くつかわれる属性が、class属性です。

クラス属性は、小文字のa-zから始まる値を持ちます(Class名に、大文字小文字の扱い)。
classを使ったスタイルは、HTMLとは別にstyleを定義する必要があります。HTMLの直接スタイルを記述することはできませんが、一度スタイルを設定すれば、クラス名を記述するだけで、自分の設定したスタイルを何時でも呼び出すことができます。

WEBページでは、背景やテキスト色の設定は、多くの場合そのブロックを「目立たせる」目的で使用されます。
「どのように、目立たせる」のかをクラスで定義しておくことで、より一貫性のある表現ができるようになります。

背景をオレンジ色に設定

WordPressで、クラスを設定する

カスタマイザーのAdditional CSSにスタイルを追加します

段落要素にクラスを追加する

テーマにもよりますが、Additional CSSに追加したスタイルがエディタの画面で反映しない場合、どのようにすればエディタに反映するでしょうか?

カスタマイザーのAdditional CSSは、ブロックエディタでは有効になっていないことが原因なので、Additional CSSをエディタで読み込ませるように、フィルターを追加することで、反映するようになります。

例えば、以下のPHPコードをテーマのfunctions.phpに追加します。

style属性とclass属性どっちを使う

style属性を使う場合は、複雑なスタイルを扱う事はできません。

例えばリンクを作る a 要素では、ホバーしたときにリンクの色を変更するといったスタイルを記述できませんが、テーマのCSSの設定で設定が反映しないといった問題が起こりにくいです。
エディタのメニューから簡単に操作できるので便利ではあります。

AMPプラグインで、投稿にstyle属性が使われている場合は、自動的にクラスに置換する処理が行われますが、通常は、そのような処理は行われません。

クラス属性を利用した場合は、ホバーした時のリンクの色を変更したり自由にできますが、投稿とは別にスタイルを記述する分、多少手間ですが、
高度なCSS設定を行うことができます。

色指定に関するTips

color,background(background-color)といったプロパティの値には、orangeといった色名や#FFA500,rgb(255,165,0)などといった、同じ色でも異なる値で設定ができます。

色名で指定できるのは、基本色名(16色)拡張色名(147色)がCSS3で定義されています。
そのほかにも、 WEBセーフカラー(216色)といって、#00, #33, #66, #99, #cc, #ffの組み合わせでできた色があります。

カラーピッカーなどで指定できる色は、#FFA500,rgb(255,165,0)どちらにしても、1,677,216色です。

CSS3では、他に、hsl(),hsla()といった色関数が定義されていて、動的な配色をする場合など、よく使用されます。

そのほか、最近CSS variablesによる色指定も盛んにおこなわれています。

WEBページなどで表示される場合は、諸般の事情により、厳密に同じ色が表現されるわけではありません。

色の設定のコツ

色の設定を行う場合は、背景色とテキスト色の設定を必ず両方行うようにするといいです。
理由は、colorプロパティのデフォルト値は、inherit (親の要素の色を引き継ぐ)のに対して、backgroundのデフォルト値は、transparent(祖先要素で設定された色を引き継ぐ)なためです。

色を設定するためのいろいろなプロパティ

WordPress5.0から、ブロックエディタが採用されてから一年がたち、今月5.4が発表される予定です。

5.4では、ブロックエディタの安定性も増してくると思います。Additional CSS classを使うと、WordPressのブロックに、ちょっと今までにないスタイルを追加することができます。

クラス名を時々忘れてしまうという方には、メニューにスタイルを追加する方法も提供されています。( この部分は、今回は触れていませんが、簡単なjavascriptを書くだけです。registerBlockStyleでブロックに独自のスタイルを追加する - Capital P等が参考になるかもしれませんね )

半透明の色

半透明の背景色

グラデーション

グラデーション背景色

背景領域の変更

背景領域の形状を変更

ボックスの輪郭を、CSSで変更

画像と背景色を混合

背景に、svgを使用する

背景をSVGで

テキストに背景を適用

以下は、画像と背景を混合した背景をフォントの背景に設定したものです。

にくきゅう

firefox で問題あり、調べ中

画像ではなくmark-orange-gradientクラスと組み合わせると以下のようになります。

にくきゅう

画像ではなくsvg-backgroundクラスと組み合わせると以下のようになります。

にくきゅう

Google Fonts nikukyu を使用

Photo by David Pisnoy on Unsplash


新着記事

コメントは受け付けていません。