CSS の設定の注意点

お知らせ

WordPress 6.2 対応 emulsion 2.6.8 公開済みです。

WordPress 6.2 にアップデートしてから、ご利用ください。

概要

WordPress 6.2で、Editor 機能がベータ版から、正式版に移行しました。

Editor内の様々な場所から、ノンコードでCSSの設定を追加出来たり、CSSのコードを記述することができるようになりました。

様々なカスタマイズが簡単にできるようになった反面、闇雲に変更した場合適切なCSSが適用できなくなる可能性もあります。

WordPress 6.2 では、従来の追加CSSの機能は、エディタ内に新設されました。

追加CSS ブロック追加CSSで実際にカスタマイズする場合に注意していただきたいこと

追加CSSやブロック追加CSSは、常にスタイルが適用されます。ただもう一方で、スタイルバリエーションで、暗い背景のバリエーションが含まれているテーマも多いです。

詳しくは、エディタの追加CSSについて を読んでみてください

このため、特定のバリエーションの場合だけ有効になるCSS設定が必要なこともあります。以下、ブロックテーマとして使用した場合のemulsion テーマ特有のクラスを紹介しますので、必要な場合はクラスを追加するなどの措置をとってください。

ブロック追加CSSでは、2番目以降のルールセットは、body_classを含めて記述することも出来ます。

詳細は、wp 6.2 と site editor additional css – Emulsion Theme を確認してみてください。(正式リリース時に変更になるかもしれませんので、注意してくださいね。記事の内容も、間違っていれば教えていただけると嬉しいです。)

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設定を確実に行うために重要なクラスです。これらのクラスを使用することで、汚染の少ない確実なスタイル設定を行う事ができます。

また、背景色の変更を行う場合は、テキスト色、リンク色も併せて変更することをお勧めします。スタイルバリエーションを変更した場合に、コントラストが失われないように、細心の注意を払ってください。