Twenty Seventeenテーマのヘッダー画像（ヘッダーメディアセクションで指定）の高さを変更するにはどうすればよいですか？
具体的には、ホームページ全体を埋めるため、ホームページで変更したいと思います。もっと短くしてほしい。組み込みの[概要]ページなどの他のページでの表示方法の高さは非常に高いため、ホームページでそれを模倣できれば満足です。正確な制御を行う方法を知ることは素晴らしいことですが。
回答:
で高さを制御するcssコードの（一部）を見つけましたwp-content/themes/twentyseventeen/style.css。
現在3629行目に管理バーが表示されていない場合（通常は匿名ユーザー）に適用されるコードがあります
.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;
}そして、現在3646行目に管理バーが表示されている（たとえば、ログインしている）ときに適用されるコード
.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);
}そして、現在1638行目でモバイルに適用されるコード：
.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%;
}CSSのこれら3つのセクションを子テーマのstyle.cssにコピーしてheight属性を変更することで、ホームページのヘッダー画像の高さを微調整することができました。私はに高さを設定し30vh、calc(30vh - 32px)および30vh各セクションのそれぞれ。私は最初のheight: 1200px人を一人にした。
高さ要素は100vh、ビューポートの高さに対する高さのサイズが設定されていることに注意してください。つまり、100vhはビューポートの100％であり、50vhはビューポートの50％です。
奇妙なことに、ホームページではヘッダー画像のズームと位置が他のページとは異なります。
これが最善の方法かどうかはわかりません。私はより良いオプションを用意していますが、今のところそれは基本的なレベルで機能しています。
@Userの回答で書いたコメントから（これはかっこいい名前です）;）試してみると思いました。
私は使い捨てのDockerコンテナーで作業しているので、テーマファイルを直接編集しています。これは、より概念的な証明です。それを子テーマに適合させるには、多少の調整が必要になります。
content/themes/twentyseventeen/style.cssここで、ヘッダ画像嘘〜3670ish 3680との間の領域です。
元のコード：
.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;
}サイズ（および順序）を変更するだけで、ログアウトビューを実現できます。
height: 100vh;
height: 100%;
max-height: 500px;私はとを残してvh、到達していない%拠点をカバーしましたmax-heightが、その後にを設定しmax-heightます。
これにはすべて1つの注意点があります。
ピクセルの一番上のセクションです。したがって、その領域に画像の適切な部分がない限り、それはひどく見えます（多くの頭が切り落とされます）
従うべきこと（整理すると）
画像をトリミングして変更できます。WordPressにはカスタマイザとしてのオプションがあります。画像をトリミングするには、以下の手順に従う必要があります。
1) Go appearance->customize
2) Header media
3) add a new image and then crop that image as per your needs and you go.Firebugを使用して（またはページのソースコードを見て）、ヘッダー画像の表示に使用されるCSSを見つけることができます。次に、CSSを追加して変更を加えます。使用する正確なCSSはテーマによって異なります。
Firebugを使用すると、CSSを一時的に変更して必要な方法で取得し、その新しいCSSをテーマのCSSページにコピーできます（オプションがある場合）。
テーマに「カスタムCSS」オプションがない場合、最善の方法は、子テーマ（その上に多数のチュートリアル）を作成し、カスタムCSSをその子テーマのstyles.cssページに追加することです。（親テーマは変更しないでください。変更は、次回のテーマの更新時に上書きされます。）
私は最初に子テーマを設定することでこれに取り組みました（WPによる推奨ステップ）。次に、子テーマのstyle.cssファイルに、以下のcssを追加しました。最初のセクションは、表紙の画像の高さを制御します。2番目のセクションは、表紙の画像のスペースの高さを制御します。これが機能するには、両方が一致する必要があります。固定高さの画像と干渉する線をコメントアウトしました。これで、ホームページのヘッダーは他のすべてのページとまったく同じになります。
.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
/* height: 100%; */
height: 400px;
left: 0;
-o-object-fit: cover;
object-fit: cover;
top: 0;
-ms-transform: none;
-moz-transform: none;
-webkit-transform: none;
transform: none;
width: 100%;
}
.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: 400px;
/* height: 100vh; */
/* max-height: 100%; */
overflow: hidden;
}
theme-twenty-seventeen前年に対応するタグがあるように見えるのに、なぜタグがないのかわからない。