[杉原 圭]

トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。

【お使いの Snow Monkey のバージョン】10.8.0
【お使いのブラウザ】クロム
【当該サイトのURL】（公開できる場合は書いていただいたほうがスムーズです）

===

初歩的な質問ですみません。
h3の装飾なのですが、過去の投稿を拝見し、
下記の様に記述をしてみましたが適用できませんでした。

・セクションの直下の h3 にだけ CSS が適用

.smb-section__body > h3 {
  border-bottom: solid 2px;
  color:#333;
}

上記コードは、セクションブロックの中にあるh3に適用されるという認識でよいでしょうか。

また、セクションではなく、単純に段落の中に記述したh3に適用する際のコードをご教示下さい（過去の投稿で、エラーを引き起こしやすいため、避けるべき？と書いていたかもしれませんが）

ご教示下さいませ。

♥ 0

いいねをした人: 居ません

[Kmical Lights]

CSSの記述の理解はされていると思いますが

上記コードは、セクションブロックの中にあるh3に適用されるという認識でよいでしょうか。

smb-section__body クラスの中にある h3 に適用されると言うのが正しいです。
なのでセクションの枠内（body)内の直接な子要素の h3 に適用されますね。

段落と言うのは p タグと思いますが、pタグの中に見出しのhタグを入れるのは構造上相応しくないと思えます。（過去の投稿で書かれていたのがこの問題でしょうか？）

基本的には

pタグの中にh1,h2などのタグを置いてはいけない – Qiita

HTMLを学び始めた人がよくハマる罠。<p> … <h1>見出し</h1> …</p>のような書き方をしてはいけ…

qiita.com

に書かれているような構造になります。

html構造にはアウトライン（ブロックレベル）とインラインと言った要素がありますので、その構造を整理されると理解が深まると思います。

別トピックのグループ化の話になりますが、見出しと段落を１つのグループにまとめ、
そのグループに対して、[高度な設定] の [追加 CSS クラス]より CSSクラス名をグループに割り当てる事でそのグループ内のCSSをクラス名で割り当てやすくなると思います。
そちらもお試しください。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

@Kmical Lights さん、「単純に段落の中に記述したh3」というのは、ブロックエディターで普通に h3 を配置した場合、ということだと思いました。@杉原 圭 さん、ですよね？

そういうことだとすると、

.c-entry__content > h3 { ... } とすると適用されます。

（注記： 表側とブロックエディター上では WordPress の仕様上 HTML の構造が違います。そのため、この CSS は表側には適用されますがエディター上には適用されません。エディター上にも適用するにはさらに工夫が必要ですが、それはメンテナンスが難しくなるので、特に必要なければ先の CSS だけに留めておくのがベターだと思います）

上記コードは、セクションブロックの中にあるh3に適用されるという認識でよいでしょうか。

厳密に言うと、セクションブロックの「直下にある」h3です。なので例えばセクションブロックの中にあるメディアの文章ブロックの中にあるh3には適用されません。

♥ 0

いいねをした人: 居ません

[杉原 圭]

お二方、ご丁寧にありがとうございます。

html構造にはアウトライン（ブロックレベル）とインラインと言った〜

HTMLとCSSは一応書けるので構造の理解はしております。

クラシックエディタやsublime等で記述する際は問題ないのですが、
Gutenbergエディタに慣れておらず、お手数をおかけしてしまいました。

厳密に言うと、セクションブロックの「直下にある」h3です。なので例えばセクションブロックの中＞にあるメディアの文章ブロックの中にあるh3には適用されません。

承知いたしました。
では、ブロックエディタで「見出しブロック」として作成されたh3にだけ適用する
方法はありますでしょうか。

お手間を取らせて申し訳ございません。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

では、ブロックエディタで「見出しブロック」として作成されたh3にだけ適用する
方法はありますでしょうか。

先程の繰り返しになりますが、

（注記： 表側とブロックエディター上では WordPress の仕様上 HTML の構造が違います。そのため、この CSS は表側には適用されますがエディター上には適用されません。エディター上にも適用するにはさらに工夫が必要ですが、それはメンテナンスが難しくなるので、特に必要なければ先の CSS だけに留めておくのがベターだと思います）

HTML の構造が表側とエディター側で異なっているので（これは Snow Monkey の問題ではなく WordPress の仕様です）、厳密に「見出しブロック」だけに CSS を適用するのは意外に難しいのです。具体的には、表側については

.c-entry__content > h3,
.smb-section__body > h3 { ... }

といったように自分が使う可能性があるセレクタを地道に追記していき、エディタ側については

[data-type="core/heading"] h3 {}

に対して CSS を当てることになると思います。

このとき、前述したように表側とエディタ側で HTML 構造が違うため、表側では CSS が当たるけどエディター側では当たらない、逆に表側では当たらないけどエディター側では当たる、といったことがおこる可能性があります。それは地道にセレクタを調整して潰していくしかありません。これはなかなか骨の折れる作業なので、「それはメンテナンスが難しくなるので、特に必要なければ先の CSS だけに留めておくのがベターだと思います」と書いた次第です。

♥ 0

いいねをした人: 居ません

[杉原 圭]

納得できました！
とりあえずは、.c-entry__content > h3 { … }で適用できますので、
こちらで対応させて頂きます！

いつもありがとうございます！
クローズ致します。

♥ 1

いいねをした人: 居ません

[投稿者]

投稿