Twenty Twenty-Twoテーマでサイト全体の設定を行うグローバルスタイル設定の一部が機能しないことに気づきました。
グローバルスタイル設定とは、テーマエディター画面で右上にある半月のようなアイコンをクリックして設定する画面のことです
この画面では、サイト全体の文字・色・ブロックの間隔（隙間）などの調整ができ、ここで設定したものは個別に指定しない限り、すべてのページで反映されるというものです。
気づいたところでは、特定のブロックのスタイル設定（例えば段落ブロック、見出しブロックなど）で、ブロックの上下マージンは全く効かないようです（確認した限りでは左右は効きました）。
なぜこの現象が出るのかを探っていると、どうやら、各ブロックの設定をしているインラインCSS出力の後で、WordPress本体のグローバルスタイル（基本スタイル）が出力されてしまうことが原因のようです。
以下のコードでグローバルスタイルを読み込まないようにすることは可能ではあるのですが、それをしてしまうと、背景色など、ブロックに関係ない部分の設定が効かないということになってしまうのでそれも困りもの。
個別のブロック以外のスタイル変更が反映されないという場合は、閲覧画面を表示させた上でキャッシュのクリア（キーボードの「Ctrl」＋「F5」）で反映されます
この現象はTwenty Twenty-Threeでも起こることを確認していて、コアのスタイルの読み込みの問題なのでどうしようもない状態です。
とはいえ、対処しないわけにはいかないので、現状では以下の2通りの方法で対処しましょう。
- スタイルシートにスタイルコードを書き、効かないものに「!important」を付与する
- theme.jsonファイルに設定を書く（「!important」で強制する）
いずれも「!important」で強制して、必ず適用されるようにするしかなさそうです。
親テーマでカスタマイズすると、テーマ更新の際に変更した内容がきえてしまいますので、子テーマを使用するようにしてください
スタイルコードの具体例（H2タグの場合）
以下のコードを子テーマのstyle.cssへ追加することで、マージンの強制ができます。
h2{
margin-top:20px!important;
margin-bottom:20px!important;
}20pxの部分はよしなに変更してください
子テーマの構成によっては、投稿エディタ側にスタイルが反映されないことがありますので、エディタ用に適用させる必要があります
theme.jsonファイルのコード例
theme.jsonは編集に失敗するとデザインが大きく崩れることがありますので、慣れていない方はCSSでの調整をおすすめします
Twenty Twenty-Twoテーマの場合、コード中ほどにブロックのスタイルに関する記述があります。
"styles": {
"blocks": {
．．．．以下の部分が各ブロック（以下ではプルクオート）の設定内容になっているので
"core/quote"{
...設定の内容...
},段落ブロックであれば以下のようにして上下マージンの指定をします。
"core/paragraph": {
"spacing": {
"margin": {
"bottom": "20px!important"
}
}
},上記のいずれかの方法で強制させることはできますが、内容によっては、投稿編集画面内で何かの変更を行った場合に不都合が出るかもれませんから、各自調整するしかなさそうです。
まだまだ発展途上のブロックエディタ＆ブロックテーマですから、いろいろ起こるとは思いますが、そのうち改善されるかも知れませんので、それまでは柔軟に対応していった方がよさそうですね。
コメントを残す