概要
WordPress 6.2で、Editor 機能がベータ版から、正式版に移行しました。
Editor内の様々な場所から、ノンコードでCSSの設定を追加出来たり、CSSのコードを記述することができるようになりました。
様々なカスタマイズが簡単にできるようになった反面、闇雲に変更した場合適切なCSSが適用できなくなる可能性もあります。
WordPress 6.2 では、従来の追加CSSの機能は、エディタ内に新設されました。
emulsion テーマ 独自のクラス
emulsion テーマには、特別なbody classがありますので、CSSの設定を行う場合考慮してください。
.is-presentation-[theme|transitional|fse]
現在テーマが使用しているテーマスキーム
emulsion テーマは、クラッシックテーマ、ブロックテーマを切り替えることができるようになっています。このセレクタを使用することで、特定のテーマスキームに限定したスタイルを記述することができます。
.is-tpl-[current template name]
現在どのテンプレートが使用されているか動的に設定されたクラス
このセレクタを使用することで、使用されるテンプレートに限定したスタイルを記述することができます。
.is-fse-[light|dark]
背景色が暗いか明るいかを検出して動的に設定されたクラス
このセレクタを使用することで、明るい背景、暗い背景に限定したスタイルを記述することができます。
.is-fse-scheme-[style variation slug]
現在どのスタイルバリエーションが使用されているかを表す動的クラス
このセレクタを使用することで、スタイルバリエーションに限定したスタイルを記述することができます。
#[theme slug]
テーマスラッグに基づいたID
テーマやコアのスタイルの詳細度が高い場合に、さらに高い詳細度でスタイルを設定することができます。
追加CSSにCSS設定を確実に行うために重要なクラスです。これらのクラスを使用することで、汚染の少ない確実なスタイル設定を行う事ができます。
また、背景色の変更を行う場合は、テキスト色、リンク色も併せて変更することをお勧めします。スタイルバリエーションを変更した場合に、コントラストが失われないように、細心の注意を払ってください。