Emulsion Theme

block editor ( gutenberg ) 対応した新しいコンセプトのテーマ

テーマカラーパレットの変更とグラデーション背景

テーマカラーパレットの変更とグラデーション背景

ブロックエディタの色設定は、カスタムパレットが設定してあると、テーマを変更した場合、機能できずに、WEBサイトは、破綻する」問題についてemulsion 1.9.0 で最低限の可読性対策を行いました。

ブロックエディタの背景色、グラデーションについてもう少し掘り下げて、テーマの変更を行う事にしましたのでお知らせします。

要約

1. カスタムパレットは、emulsion-addonsに移動して、カスタマイザーでopt-inでに有効にするという変更

2.グラデーションだけが設定されている場合には、テキストカラーに反対色、グラデーションとテキスト色 両方が設定されている場合には、指定されたテキスト色を設定

emulsion 1.9.0 迄の背景色、テキスト色に関する改良のあらまし

多くのブロックエディタ対応テーマは、カスタムパレットを設定しており、これらの色設定はテーマをスイッチした場合に、色設定の一部が失われ、結果として大きな空白のようになり、コンテンツが読み取れなくなるので、最低限可読に保つCSSの工夫を行いました。

この作業を通じて課題となったこと

最低限の可読性は確保したけれど、ユーザーが背景色を使う場合は、「ここは、大事だから赤っぽい背景」とか、ちょっとした追加情報だから「ここは、青っぽい色」とか多少なりとも、思いを込めているはずで、そういった意味性は失われたままです。

それだったら、コアでサポートしている色を使う方が正しい(たぶん、今後改良されていくので、その時に対応しようと思います)

なので、カスタムパレットは、emulsion-addonsに移動して、カスタマイザーでopt-inでに有効にするという変更を行う事にしました。

カスタマイザーでカラーパレットを有効にする方法

  • emulsion-addons プラグインを有効化します
  • カスタマイザ/ Post and Block Editor / Color Pallet を選択します
  • Allow Theme Color Pallet を enable に変更します

グラデーション設定時の可読性

カスタム背景にとどまらず、カスタムグラデーションについても可読性について問題があることが、作業の過程で見えてきました。

濃淡のきついグラデーションだと、コントラストが維持できないことが度々あるようでした。

グラデーションには、カバー画像を除いてテキスト色も指定できるようになっていますが、エディタの機能を満足させるテーマ設定は、結構難しそうです。

グラデーションだけが設定されている場合には、テキストカラーに反対色、
グラデーションとテキスト色 両方が設定されている場合には、指定されたテキスト色を設定することに変更しました。

カスタムグラデーションを,twenty tweenty one で表示
同じブロックを emulsion で表示

上記カバーブロックのソース

<!-- wp:cover {"customGradient":"linear-gradient(135deg,rgb(7,7,7) 0%,rgb(13,13,13) 39%,rgb(243,246,248) 39%,rgb(244,245,248) 100%)"} -->
<div class="wp-block-cover has-background-dim has-background-gradient" style="background:linear-gradient(135deg,rgb(7,7,7) 0%,rgb(13,13,13) 39%,rgb(243,246,248) 39%,rgb(244,245,248) 100%)"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"typography":{"fontSize":"100px"}}} -->
<p class="has-text-align-center" style="font-size:100px">hello world</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

色域の広いグラデーションでは、問題もあります。

contrastの設定を行った方が、汚くなり、読みづらくなる場合もありますが、現時点ではここまでといったところです。

ケースバイケースで、テキスト色を設定した方がいい場合もあります。

ブロックエディタ画面で、テキスト色変更がうまくいかない場合もありますので、ご理解ください。

上記は、グラデーションだけをセットして、かえって読みにくくなってしまう例です

テキスト色を設定して、テキストシャドーを追加したいなぁ なんて思うかもしれませんね。

emulsion テーマの場合、カスタムフィールドで、css という名前のフィールドを作成すればカスタムCSSを追加できます。

投稿内に、同じブロックが複数あって、そのうちのどれか一つにCSSを追加したい場合は、ブロックの「高度な設定」にIDまたは、クラスを指定して、それに、CSSを追加してください

カスタムCSSの追加例

既知の問題

グループでグラデーションをつけ、テキスト色を指定しない場合、画像が含まれていると、画像の色が影響を受けます。

テキスト色をセットしていただくと、画像本来の色で表示します。