CG
(@du-bist-der-lenz)
背景画像の21pxの外周領域でしょうか、上下にということは、ソシアルメニュースペースではないでしょうか。
CGさま
お世話になります。ありがとうございます。
View post on imgur.com
ページ上部のここですが、
ソシアルメニュースペースというのは、カスタマイズできない箇所なのでしょうか？
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
の箇所については、変更していませんが、
今後、何回か、試行錯誤をしてみます。
ありがとうございました。かなり、希望通りに、
近づいてきました。感謝を申し上げます。
