web-dev-qa-db-ja.com

すべてのページでTwenty Seventeenテーマのヘッダースクロールの高さを変更する

私は私のWordpressのブログで子テーマを使ってTwenty Seventeenテーマを編集していました、そしてそれはあまりにも多くのスペースを取ったので私はHeaderのスクロール高さを調整しようとしました。もっと伝統的なヘッダが欲しいのですが。

注実際のヘッダーサイズをサイズ変更したりトリミングしたりするのではなく、ヘッダーが占める垂直方向の高さのサイズをトリミングします。周りを検索して、私は次のスレッドを介してこれを行う方法を見つけました：

Twenty Seventeenのヘッダー画像の高さを変更するにはどうすればよいですか。

ただし、これはホームページの高さを調整するだけで、他のページは調整しません。すべてのページで同じようにしたいです。 （私の参考文献、私のサイトはここにあります http://chugsforlife.esy.es/ 、あなたがホームページを見ればヘッダーの高さは問題ないが、他のページに行くとそれはばかげてつぶれている）

編集：これは私がもともと私のwordpressの子テーマのstyle.cssに追加したコードです：

.twentyseventeen-front-page.has-header-image .custom-header-media,


.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: 60vh;
max-height: 100%;
overflow: hidden;
}


.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(60vh - 32px);
}

.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: 55vh;
    width: 100%;
}
header-imagetheme-twenty-seventeen
1
hessam zare

あなたが言及したその質問から、これはコードです：

.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;
}

改訂：あなたの特定の用途のためにセレクタからホームページとフロントページを削除してみてください。

.has-header-image .custom-header-media, blog.has-header-image .custom-header-media {
    height: 1200px;
    height: 70vh;
    max-height: 100%;
    overflow: hidden;
}

.has-header-image .custom-header {
    display: table;
    height: 300px;
    width: 100%;
}
1
rudtek