Emulsion Theme

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

Month: April 2021

Emulsion Theme

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

Month: April 2021

  • ブロックエディタで、テーマクラスが反映するように改良しました。

    テーマ特有の、位置指定クラスがブロックエディター内で正確に反映するようになりました。 Note emulsion addons プラグインを有効にする必要があります。 ブロックにより、位置揃えメニューが存在しないブロックに対しても、高度な設定/追加CSSクラスを追加することで対応ができ、レイアウトの柔軟性を向上させました。 クラスの詳細につきましては、emulsion-addonsプラグインを有効にした時に表示される、外観/emulsion documentsをご確認ください。 alignleft alignright alignwide alignfull 段落に、alignleft alignrightクラスを適用した例 リストブロックに、alignleft alignrightクラスを適用した例 見出しブロックに、alignleft alignrightクラスを追加した例 引用ブロックに、alignleft alignrightクラスを適用した例 コードブロックに、alignleft alignrightクラスを適用した例 プレフォーマットブロックに、alignleft alignrightクラスを適用した例 詩ブロックに、alignleft alignrightクラスを適用した例 スペーサーブロックに、alignleft alignrightクラスを適用した例 テーマ特有のサイズ指定クラスがブロックエディター内で反映するようになりました size1of1 size1of2, size1of3, size2of3, size1of4, size3of4, size1of5, size2of5, size3of5, size4of5 aliginleft alignrightとの組み合わせでは、1of2 以下のサイズが有効になります。 センタリングしたい場合は、aligncenter クラスと組み合わせてください。 テーマ特有の、アイコン画像がブロックエディター内で反映するようになりました。

  • Change theme color palette and gradient background

    When changing the theme, there was a readability problem when changing the background color, and in emulsion 1.9.0, basic measures were taken to support the minimum compatibility display.(Notes on block editor color settings and compatibility between themes – WordPress Theme Emulsion) I will inform you that we have decided to change the theme by digging a little deeper into the background color and gradation of the block editor. Summary of improvements related […]

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

    「ブロックエディタの色設定は、カスタムパレットが設定してあると、テーマを変更した場合、機能できずに、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 に変更します グラデーション設定時の可読性 カスタム背景にとどまらず、カスタムグラデーションについても可読性について問題があることが、作業の過程で見えてきました。 濃淡のきついグラデーションだと、コントラストが維持できないことが度々あるようでした。 グラデーションには、カバー画像を除いてテキスト色も指定できるようになっていますが、エディタの機能を満足させるテーマ設定は、結構難しそうです。 グラデーションだけが設定されている場合には、テキストカラーに反対色、グラデーションとテキスト色 両方が設定されている場合には、指定されたテキスト色を設定することに変更しました。 上記カバーブロックのソース 色域の広いグラデーションでは、問題もあります。 contrastの設定を行った方が、汚くなり、読みづらくなる場合もありますが、現時点ではここまでといったところです。 ケースバイケースで、テキスト色を設定した方がいい場合もあります。 ブロックエディタ画面で、テキスト色変更がうまくいかない場合もありますので、ご理解ください。 上記は、グラデーションだけをセットして、かえって読みにくくなってしまう例です テキスト色を設定して、テキストシャドーを追加したいなぁ なんて思うかもしれませんね。 emulsion テーマの場合、カスタムフィールドで、css という名前のフィールドを作成すればカスタムCSSを追加できます。 投稿内に、同じブロックが複数あって、そのうちのどれか一つにCSSを追加したい場合は、ブロックの「高度な設定」にIDまたは、クラスを指定して、それに、CSSを追加してください 既知の問題 グループでグラデーションをつけ、テキスト色を指定しない場合、画像が含まれていると、画像の色が影響を受けます。 テキスト色をセットしていただくと、画像本来の色で表示します。

Copyright © 2022 Site proudly powered by WordPress