セクション間の余白を設定したい。

0
いいねをした人: 居ません
  • このトピックには7件の返信、3人の参加者があり、最後にそすけにより1年、 11ヶ月前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #114555
    そすけ
    閲覧者
    9

    【お使いの Snow Monkey のバージョン】 バージョン: 18.1.1
    【お使いの Snow Monkey Blocks のバージョン】 バージョン 17.1.0
    【お使いのブラウザ】 Google Chrome
    【当該サイトのURL】

    らっくらっくホームページ
    広島県府中市のあん摩マッサージ・鍼灸院
    rakku-rakku.com

    ### 実現したいこと

    セクション間の余白を設定したい。

    ### 発生している問題

    セクション間の余白を設定するため、以下追加CSS を記述したが、

    .smb-section {
      padding-top: 160px;
    }

    .smb-section_access {
      padding-bottom: 80px !important;
    }

    が反映されない。

    /* セクション間の余白 */
    .smb-section {
      padding-top: 160px;
      padding-bottom: 160px;
    }
    .smb-section_access {
      padding-top: 80px;
      padding-bottom: 80px !important;
    }

    ### 試したこと

    フォーラムなど参考にしクラス名を設定したが、解決しませんでした。

    お手数をおかけしますが、ご教授宜しくお願いいたします。

    0
    いいねをした人: 居ません
    #114561
    es:エス
    参加者
    136

    そすけさん

    rakku-rakku.comを拝見して、デベロッパーツールで下記のようにすると、調整できているように見えます。

    .smb-section {
    padding-top:0px;
    padding-bottom:0px
    }

    またこちらの環境でも、上記CSSでtop、bottom、それぞれ0pxにできますので、念のため今一度ご確認いただくとよいかもです。

    なお、.smb-section_accessの方は、そのCSSを記述しても変化はありませんでしたが、.smb-sectionのみで変更できましたことも、追記しておきます。

    0
    いいねをした人: 居ません
    #114582
    そすけ
    閲覧者
    9

    es様

    ご回答いただき、ありがとうございます!

    .smb-section {
      padding-top:0px;
      padding-bottom:0px
    }

    を試してみたところ、やはり

    .smb-section {
      padding-top: 0px;
    }

    が反映されません。。

    また、おっしゃる通りセクションの高度な設定にclass名を付けているのですが、

    .smb-section_access {
      padding-bottom: 80px !important;
    }

    が全く反映されません。
    原因がわからず、スペーサーで対応するしかないのでしょうか。

    宜しくお願いいたします。

    0
    いいねをした人: 居ません
    #114583
    そすけ
    閲覧者
    9

    先程の返信の追記です。

    .smb-section_accessは解決しました!

    高度な設定に『.』も含めて記述していることが原因でしたので、解決いたしました。基本的なミスでご確認のお時間をとっていただき申し訳ありませんでした。。

    1
    いいねをした人:
    #114585
    GONSY
    参加者
    841

    横から失礼します。
    該当ページのコードを拝見しましたが、カスタマイザーで追記されたCSSに、全角スペース(上図赤い部分)が見受けられます。
    エディターなどで全角スペースを検索して取り除いてみてください。
    これが影響している可能性があります。

    2
    いいねをした人:
    #114587
    es:エス
    参加者
    136

    そすけさん

    ご確認ありがとうございます。accessの方は解決とのことで、何よりです。^^

    うーん…私の環境では、カスタマイザーの追加CSSから padding-top:0px; のみの追加で試しても、反映されますねぇ。

    私もセクション上下の余白は、状況によって調整したいこともありCSSを記述しているのですが、すべてに反映されると都合の悪いこともあるため、お書き添えいただいているように編集画面の高度な設定に個別でclass名を付与しています。

    その際、たとえば sectiontop とclass名を付与した場合、

    .sectiontop {
     padding-top: 0;
    }

    とすることで、個別に反映させることができています。

    さておき、また時間がとれそうな時にも、何か原因が考えられるか気にして見てみますね。

    0
    いいねをした人: 居ません
    #114588
    es:エス
    参加者
    136

    GONSYさん、ありがとうございます!

    タイミングが重なってしまい、余計な話をしてしまいましたね ^^;

    そすけさん、GONSYさんのご指摘の件、ご確認くださいませ。

    1
    いいねをした人:
    #114589
    そすけ
    閲覧者
    9

    GONSY様、es様

    ご回答ありがとうございます。

    全角スペースだったのですね。今後はCSSが反映しない場合はエディターなどでも確認していきます。

    お二人ともお時間をかけて調べていただき、本当にありがとうございました!

    今後に活かしていきたいと思います。

    3
    いいねをした人:
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • トピック「セクション間の余白を設定したい。」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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