ヘッダ部分の高さをトップページも個別ページも同じにする

Twenty Seventeen のヘッダ画像は、トップページのとき画面いっぱいになります。

この動作を止めて、ヘッダ部分の高さをトップページも個別ページも同じにするには、まずはヘッダ画像を削除します。

ヘッダ画像をなくすと、ヘッダの高さが一定になります。

でも寂しいですよね。

ここに背景画像を入れるには、子テーマの style.css か追加CSSで、背景画像を指定するとよいです。

.custom-header {
    background: 50% 50% url(アップロードした画像のURL);
    background-size: cover;
}

使う画像はメディアからアップロードして問題ありません。

画像のサイズや配置などはお好みで調整ください。

ヘッダ画像に重なる文字の色を変えたかったら、以下のようにして変更可能です。画像が黒っぽいときに文字を白くしたいときの例です。

.site-title, .site-title a {
    color: #fff;
}
.site-description {
    color: #fff;
}

写真が背景だと、文字に少し影をつけたほうが読みやすいかもしれません。

.site-title, .site-title a {
    color: #fff;
    text-shadow: 1px 1px 2px black;
}
.site-description {
    color: #fff;
    text-shadow: 1px 1px 2px black;
}

まとめ

カスタマイズ ＞ ヘッダーメディア ＞ ヘッダー画像 で画像を登録すると、よい具合に表示させるスタイルシートが適用されてしまいますが、ヘッダー画像なしにして、自分でスタイルシートで背景画像を入れると、ごくごく普通のヘッダーになります。