web-dev-qa-db-ja.com

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

Twenty Seventeen Themeでヘッダー画像の高さ（Header Mediaセクションで指定）を変更するにはどうすればよいですか？

具体的にはホームページで変更したいのですが、ここではページ全体を埋め尽くしています。もっと短くしたいです。組み込みのAboutページのような他のページに表示される方法は、高さが優れているので、ホーム・ページでそれを真似できれば、満足できるでしょう。正確な制御を行う方法を知っていることは素晴らしいことですが。

themesheader-imagetheme-twenty-seventeen
9
User

wp-content/themes/twentyseventeen/style.cssの高さを制御するCSSコードの（一部）を見つけました。

管理バー が visible（通常は匿名ユーザー）でない場合に適用されるコードが現在行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;
}

管理バーの が visibleの場合（例：ログインしている場合）、現在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だけを残しました。

Height要素は100vhに設定されています。これはビューポートの高さを基準にして高さを設定します。 100vhはビューポートの100％、50vhはビューポートの50％です。

奇妙なことは、ホームページではヘッダー画像のズームと位置が他のページとは異なるということです。

これが最善の方法かどうかわからない。私はより良い選択肢に寛容ですが、これまでのところ基本的なレベルで働いています。

2
User

ダッシュボードからテーマを編集して、テーマセクション "custom css"に次のCSS定義を追加するだけです。

.has-header-image.home.blog .custom-header {
    height: 26vh;
}
2
Ralph

私は@ユーザーの答え（これはかっこいい名前です）で作ったコメントから）私はそれを試してみると思いました。

私はテーマファイルを直接編集しています。これは、使い捨てのdockerコンテナで作業しているためです。概念の証明です。それを子のテーマに適応させるには、少し調整が必要になります。

3680〜3670ishの間の領域のcontent/themes/twentyseventeen/style.cssには、ヘッダー画像がある場所があります。

元のコード

.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つあります。

それはピクセルの一番上のセクションです。その領域に画像のニース部分がない限り、それはぎこちなく見えます（多くの頭が切り落とされます）

続きを読む（整理すると）

1
Madivad

あなたはFirebug（あるいはページのソースコードを見る）を使ってヘッダ画像を表示するのに使われるCSSを見つけることができます。次にCSSを追加して変更を加えます。使用するCSSは、テーマによって異なります。

Firebugでは、CSSを一時的に変更して好みの状態にしてから、その新しいCSSをテーマのCSSページにコピーできます（そのオプションがある場合）。

テーマに「カスタムCSS」オプションがない場合は、最善の方法は子テーマを作成し（それに関する多数のチュートリアル）、その子テーマのstyles.cssページにカスタムCSSを追加することです。 （親テーマは変更しないでください。変更内容は次回のテーマ更新で上書きされます。）

0
Rick Hellewell

画像をトリミングすることで変更できます。 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.
0
lalitpendhare