兵庫県三田市でホームページ制作をしているゴリラドットです。

今回はいわゆる、自分のcssとグーテンベルクの追加設定でcssの方が優先されてしまってグーテンベルクの追加設定が反映されない！問題について。

ワードプレスのブロックエディタ（グーテンベルク）のエディタで「追加設定を表示」から変えられる色とかフォントとか。それと自分で設定しているcssの優先度がうまくいかない！cssの方が優先されちゃうじゃん、という。ググってもあんまり出てこなかったけどかなり深刻…だと思ってます。

グーテンベルクで設定した色が反映されず、cssで設定した方が優先されちゃうんだから、んじゃ色設定意味無いじゃん、となっちゃう。

ここではワードプレスの公式テンプレートではどうやってグーテンベルクの追加設定の色とかに対応しているのか紹介したい。

 

なんとh2とかに直設定している

ワードプレスの公式テーマはブログ本文のデザイン設定をh2とかh3とかに直に設定してます。なのでグーテンベルクの追加設定の色なんかがちゃんと優先されるんです。

 

公式テンプレートのcss

h2{
}
h3{
}

 

グーテンベルクの追加設定css

.has-vivid-red-color{
}

 

てことでクラスで設定されているグーテンベルクの追加設定cssの方が優先されて問題ないわけです。

うーん、h2とかh3とかにcssで直にデザイン設定ってどうなの？と思ってしまいますよね。

ブログ本文の所だけのデザイン設定でありたいはずだし、それ以外のフッターやヘッダー記事一覧、トップページにも影響が出るような書き方は正直アホなのかなと思ってしまいます。

 

よくあるcss

.post-content h2{
}
.post-content h3{
}

 

たぶん多くの場合はこんな風になんか自分で記事部分を囲ったクラス名だったりID名（今回はpost-contentというクラス名）でデザインの反映される範囲を制限すると思うんですよね。

んじゃどうやって自分のcssデザインと、グーテンベルクの追加設定で追加される色やらのクラス名を共存させるか、というのを考えていきます。

グーテンベルクで何も追加設定しなければcssのデザインが優先され、グーテンベルクで追加設定したらcssのデザインよりもそっちが優先される、やっぱそうしたいですよね。

 

公式テンプレートをまねる

公式テンプレートはトップページのh1とかだけは「site-title」みたいなクラス名を振って、記事用のh1に直書きしたデザインをぜんぶ上書きしています。

そもそもこの書き方がバグ、というか上書きし忘れとかを招くんでものすごい拒否反応があるんですが、このやり方をマネれば自分のcss設定とグーテンベルクの追加色設定を共存させられます。

てことでスマホファーストならぬ、記事ファーストでcssを書くイメージ。

記事内で使うタグについてはh2、とかh3とかに直にデザインを設定して、記事一覧やトップページ、ヘッダー、フッターといった部分でその都度cssで上書きしていく、というもの。

イメージでは、

 

sass

#haeder,
#footer,
#sidebar,
#toppage,
#archive{
  h2{
  }
  h3{
  }
}

cssじゃなくてsassになっちゃいますがこんな感じで記事部分じゃない部分のタグをまるっと初期化しちゃう感じ。んでその後にヘッダーのh2設定とかをしてく感じ。

手間ですがグーテンベルク対応しようと思うとこうなる、と思います。

 

まとめ

自分のcssとグーテンベルクの追加設定でcssの方が優先されてしまってグーテンベルクの追加設定が反映されない、問題の解決方法を紹介しました。

いや、本当になんでこんなアホな仕様になってるのか疑問です。せめてグーテンベルクの追加設定で付与されるクラスのネスト？っていうのか、をこっちで追加できればいいのに。

グーテンベルクが使ってるcssの各クラス名の前に「.post-content」を追加！とかができれば何も問題なく、普段はこっちのcss、追加設定したらグーテンベルクのcss、みたいにできるのに。

とりあえず公式テンプレートをまねて記事本文のデザインをh2とかh3とかに設定して、トップページとかはそれを消してからデザインする、で何とかするしかないのが現状、だと思います。