サポート » テーマ » Twentysixteenの、余白(margin)の除去

  • 解決済 itiyama

    (@itiyama)


    こんにちは。いつもご助言をありがとうございます。
    お世話になっています。

    Twentysixteenを使っています。

    外観 -> カスタマイズ -> サイト基本情報
    で、ロゴをしていますが、

    htmlページを見ると、
    上部に、余白(マージン)が50pxほどあります。
    (ページ下部についても、可能ならお教え下さい。)

    これを0~5px程度に縮小したいのですが、
    style.cssの中を、margin、margin-bottom、margin-top、
    paddingで検索致しましたが、

    該当箇所が不明です。

    ページレイアウトで、余白を詰めたいのですが、
    お教え下さい。よろしくお願い申し上げます。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • CG

    (@du-bist-der-lenz)

    背景画像の21pxの外周領域でしょうか、上下にということは、ソシアルメニュースペースではないでしょうか。

    CGさま
    お世話になります。ありがとうございます。
    https://i.imgur.com/zLOPhZl.jpg
    ページ上部のここですが、
    ソシアルメニュースペースというのは、カスタマイズできない箇所なのでしょうか?

    style.cssを眺めておりますが、分かりません。
    ご指導の程をよろしくお願い申し上げます。

    CG

    (@du-bist-der-lenz)

    ヘッダー画像の周辺ですよね。mastheadの中でsite-headerの廻りにゆとりが持たせてあります。メディアクエリの中にあるので、ブラウザで左右幅が狭められた時のパーセンテージでの余裕など考慮されているものでしょう。Twenty Sixteen は「モバイルファーストのアプローチによる調和した柔軟なグリッド、細部にまで非の打ち所がない上品さを備えています。」ブログとウェブサイト向けに最適の配慮がされているためでしょうが、コーポレイトサイトやEコマースではサイトの上部を、電話番号やカート、案内のニューススペースに活用するときに生きてくるでしょう。なにより設計コンセプトからしてモバイルファーストの面で、有意と思われます。

    こんにちは

    それは
    site-headerクラスのpadding-top: 1em;

    site-brandingクラスのmargin-top: 1.75em;
    じゃないでしょうか。

    どこに記載されているかは、ブラウザのデベロッパーツールなどで調べることができます。

    CGさま
    お世話になっております。ご教授、ありがとうございます。

    メディアクエリの中にあるので

    とのこと、ありがとうございます。

    @media screen
    の箇所は、あまり、考えていませんでした。
    今後、課題として、取り組んで参ります。ありがとうございました。

    munyaguさま
    こんにちは。お教えいただき、ありがとうございます。
    site-headerクラスのpadding-top: 1em;
    とのご指摘、ありがとうございます。

    お教えにより、
    変更前は、50pxほどだった空白が、
    20pxぐらいに、縮まりました。数段に前進しました。

    .site-header .main-navigation + .social-navigation {
    /* margin-top: 1.0em; */
    margin-top: 0em;
    }

    * 11.1 – Header
    */
    .site-header {
    /* padding: 1.25em 7.6923%; */
    padding: 0em 7.6923%;
    }

    とし、

    site-brandingクラスについて、

    * 14.1 – >= 710px
    .site-branding {
    /* margin-top: 1.3125em; */
    margin-top: 0em;
    margin-bottom: 1.3125em;
    }

    * 14.4 – >= 985px
    .site-branding,
    .site-header-menu,
    .header-image {
    /* margin-top: 1.7em; */
    margin-top: 0em;

    * 14.5 – >= 1200px
    の箇所については、変更していませんが、
    今後、何回か、試行錯誤をしてみます。

    ありがとうございました。かなり、希望通りに、
    近づいてきました。感謝を申し上げます。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「Twentysixteenの、余白(margin)の除去」には新たに返信することはできません。