[ 解決済 ] Outerブロック内上下余白について

VWSとは フォーラム Lightning [ 解決済 ] Outerブロック内上下余白について

[ 解決済 ] Outerブロック内上下余白について

  • このトピックには6件の返信、2人の参加者があり、最後にleafletwebにより2年、 9ヶ月前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #53505

    leafletweb
    参加者

    ■ 利用テーマとバージョン :
    Lightning G3
    ■ 質問内容:
    Outerブロック内のレイアウト設定で「余白(上下)」としても底辺側だけに大きく余白が入ってしまいます。
    これをなくすことはできないでしょうか?

    Attachments:
    You must be logged in to view attached files.
    #53507

    leafletweb
    参加者

    すみません。中途半端な状態で投稿してしまいました。
    再度投稿させて頂きます。
    ———————————————
    Outerブロック内のレイアウト設定で「余白(上下)」のところで
    「標準の余白を使用しない」としても底辺側だけに大きく余白が入ってしまいます。
    これをなくすことはできないでしょうか?

    #53509

    添付画像から推測すると、その部分は Outer ブロック内の余白ではなく、段落ブロックの margin-bottom が原因のような気がします。

    これがご期待通りの回答でないとすると、可能であれば実際の URL を提示していただければ的確な回答が得られるかもしれません。

    #53517

    leafletweb
    参加者

    ありがとうございます。
    コードではどうでしょうか?
    ————————————————————————
    <div class=”wp-block-vk-blocks-outer vkb-outer-2c28249d-2909-4e04-b69d-3290b6fd7948 vk_outer vk_outer-width-normal vk_outer-paddingLR-zero vk_outer-paddingVertical-none vk_outer-bgPosition-normal” style=”border:1px solid #abb8c3;border-radius:0px”><style>.vkb-outer-2c28249d-2909-4e04-b69d-3290b6fd7948{background: linear-gradient(rgba(243, 244, 245, 0.5), rgba(243, 244, 245, 0.5)); }</style><div><div class=”vk_outer_container”><!– wp:paragraph –>
    <p>↓下に余白が入ってしまう</p>
    <!– /wp:paragraph –></div></div></div><style type=”text/css”>
    .vkb-outer-2c28249d-2909-4e04-b69d-3290b6fd7948 .vk_outer_container{
    padding-left:0px;
    padding-right:0px;
    }
    @media (min-width: 577px) {
    .vkb-outer-2c28249d-2909-4e04-b69d-3290b6fd7948 .vk_outer_container{
    padding-left:0px;
    padding-right:0px;
    }
    }
    @media (min-width: 769px) {
    .vkb-outer-2c28249d-2909-4e04-b69d-3290b6fd7948 .vk_outer_container{
    padding-left:0px;
    padding-right:0px;
    }
    }
    </style>
    ——————————————————————————
    上記はテキストでPタグが入ってますが

    実際はOuterブロック内にカラムブロックを入れたいのですが、入れると
    —————————————————————————-
    <div class=”wp-block-vk-blocks-outer vkb-outer-9289624c-5629-4239-af64-96ce90452a3b vk_outer vk_outer-width-normal vk_outer-paddingLR-zero vk_outer-paddingVertical-none vk_outer-bgPosition-normal” style=”border:1px solid #abb8c3;border-radius:0px”><style>.vkb-outer-9289624c-5629-4239-af64-96ce90452a3b{background: linear-gradient(rgba(243, 244, 245, 0.5), rgba(243, 244, 245, 0.5)); }</style><div><div class=”vk_outer_container”><!– wp:columns –>
    <div class=”wp-block-columns”><!– wp:column {“width”:”33.33%”} –>
    <div class=”wp-block-column” style=”flex-basis:33.33%”><!– wp:image {“id”:807,”sizeSlug”:”large”,”linkDestination”:”media”} –>
    <figure class=”wp-block-image size-large”></figure>
    <!– /wp:image –></div>
    <!– /wp:column –>

    <!– wp:column {“width”:”66.66%”} –>
    <div class=”wp-block-column” style=”flex-basis:66.66%”></div>
    <!– /wp:column –></div>
    <!– /wp:columns –></div></div></div><style type=”text/css”>
    .vkb-outer-9289624c-5629-4239-af64-96ce90452a3b .vk_outer_container{
    padding-left:0px;
    padding-right:0px;
    }
    @media (min-width: 577px) {
    .vkb-outer-9289624c-5629-4239-af64-96ce90452a3b .vk_outer_container{
    padding-left:0px;
    padding-right:0px;
    }
    }
    @media (min-width: 769px) {
    .vkb-outer-9289624c-5629-4239-af64-96ce90452a3b .vk_outer_container{
    padding-left:0px;
    padding-right:0px;
    }
    }
    </style>
    ———————————————————————————
    こうなってしまい同じように結構な空白ができてしまいます。
    (画像添付しました)
    長くなってすみません。
    宜しくお願い致します。

    • この返信は2年、 9ヶ月前にleafletwebが編集しました。
    Attachments:
    You must be logged in to view attached files.
    #53521

    leafletweb
    参加者

    連投ですみません。
    空白部分をgoogle chromeの「検証」でみた状態を画像添付しました。
    2つの空白があることがわかります。
    どうでしょうか?
    宜しくお願い致します。

    Attachments:
    You must be logged in to view attached files.
    #53525

    Outer ブロックに入っている以下のブロックも下余白 margin-bottom を持っています。

    • カラム
    • 画像
    • 段落

    それぞれのブロックを margin-bottom :0; にすれば、おそらくご希望のレイアウトに近づくとと思いますが、それだけだとスマホで見たときに残念な結果になってしまう気がしますので、メディアクエリを使う必要がありそうです。

    段落はいじらなくてよさそうなので、以下の CSS をベースにやってみてください。

    .wp-block-columns {
    margin-bottom: 0;
    }
    .wp-block-image {
    margin-bottom: 0;
    }

    参考ページ ↓

    できる!WordPressカスタマイズ #01 簡単なデザイン(CSS)カスタマイズ方法徹底解説

    メディアクエリについて書かれている部分は上記ページの「3.7. 画面サイズ毎での指定」です。

    #53526

    leafletweb
    参加者

    ありがとうございます。
    とても分かりやすくご説明頂き助かりました。
    お陰様で思い通りのレイアウトにできました。
    ありがとうございました。

7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • このトピックに返信するにはログインが必要です。