Twenty Seventeen のヘッダの高さが高すぎるので調整したい

Twenty Seventeen のトップページのヘッダーメディアの部分が、初期状態では100vh、75vhなど、縦の高さが結構大きいです。

もう少し高さを小さくしたり、固定の高さにしたりしたいと思うこともあると思いますが、

このカスタムヘッダー部分、結構複雑です。

親テーマのスタイルシートには、画面幅や管理メニューの有無によって、細かく指定があります。また、中のimgやvideoに対しても指定があり…このカスタムヘッダーの機能に乗っかって思い通りの表示にするには、親テーマのスタイルシートをかなり上書きしていく必要があります。

Twenty Seventeen の CSS

ヘッダの高さに関する部分だけであれば、主に以下の部分が影響しています。

.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
	display: table;
	height: 300px;
	height: 75vh;
	width: 100%;
}

@media screen and (min-width: 48em) {

	.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
	.admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
	.admin-bar.home.blog.has-header-image .custom-header-media,
	.admin-bar.home.blog.has-header-video .custom-header-media {
		height: calc(100vh - 32px);
	}

	.twentyseventeen-front-page.has-header-image .custom-header-media,
	.twentyseventeen-front-page.has-header-video .custom-header-media,
	.home.blog.has-header-image .custom-header-media,
	.home.blog.has-header-video .custom-header-media {
		height: 1200px;
		height: 100vh;
		max-height: 100%;
		overflow: hidden;
	}

}

子テーマで上書きするには

子テーマのstyle.cssか追加CSSに以下のスタイルシートを書いて、親テーマの指定を上書きすれば、ヘッダ画像が画面全体をすべて覆う状態は避けることができます。

以下の例では、画面の高さの4分の3を使うように指定しています。

.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
	height: 75vh;
}
@media screen and (min-width: 48em) {
	.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
	.admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
	.admin-bar.home.blog.has-header-image .custom-header-media,
	.admin-bar.home.blog.has-header-video .custom-header-media {
		height: calc(75vh - 32px);
	}
	.twentyseventeen-front-page.has-header-image .custom-header-media,
	.twentyseventeen-front-page.has-header-video .custom-header-media,
	.home.blog.has-header-image .custom-header-media,
	.home.blog.has-header-video .custom-header-media {
		height: 75vh;
	}
}

/* メニュー内にある「↓」も不要 */
.site-header .menu-scroll-down {
	display: none;
}

動きは現状に近いままなので、画面の縦幅に応じてヘッダ内の画像の表示サイズが変わる点などはそのままになります。