h3の装飾(過去の投稿を拝見したが、適用できず…)

0
いいねをした人: 居ません
  • このトピックには5件の返信、3人の参加者があり、最後に杉原 圭により4年、 5ヶ月前に更新されました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #52424
    杉原 圭
    閲覧者
    14

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

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

    ===

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

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

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

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

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

    ご教示下さいませ。

    0
    いいねをした人: 居ません
    #52429
    Kmical Lights
    閲覧者
    234

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

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

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

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

    基本的には

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

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

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

    0
    いいねをした人: 居ません
    #52445
    アバター画像キタジマ タカシ
    参加者
    2421

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

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

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

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

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

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

    0
    いいねをした人: 居ません
    #52455
    杉原 圭
    閲覧者
    14

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

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

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

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

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

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

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

    0
    いいねをした人: 居ません
    #52468
    アバター画像キタジマ タカシ
    参加者
    2421

    では、ブロックエディタで「見出しブロック」として作成された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
    いいねをした人: 居ません
    #52512
    杉原 圭
    閲覧者
    14

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

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

    1
    いいねをした人: 居ません
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • トピック「h3の装飾(過去の投稿を拝見したが、適用できず…)」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。