初心者です。ワードプレスのヘッダーの高さを変更したいです。

Question

前提・実現したいこと

ヘッダーの高さを調整して、ロゴを上下の中央に配置したいです。

ワードプレステンプレートを使用しています。
テンプレートは、【twentyseventeen】です。

トップページのヘッダー部分の高さを調整したいのですが、
WEBサイトなどで解決方法を確認してためしたところ、
記載されている方法では高さが変わりませんでした(>_<)

また、高さも変わらず変化もありませんでした。

参考にしているサイトは下記になります。
https://058.jp/twentyseventeen/archives/288

よろしくお願いいたします。

クロームで確認すると下記のコードが確認できますが、
実際にコードがある箇所が見当たりません。

▼上記のコードがかかっている場所

発生している問題・エラーメッセージ

エラーメッセージは特にありません。

該当のソースコード

<?php
/**
 * Displays content for front page
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */
?>
<img src="http://wp-content/uploads/2019/01/test02-min-min.jpg" width="100%" height="40%">
<article id="post-<?php the_ID(); ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> >

	<?php if ( has_post_thumbnail() ) :
		$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );

		// Calculate aspect ratio: h / w * 100%.
		$ratio = $thumbnail[2] / $thumbnail[1] * 100;
		?>

		<div class="panel-image">
			<div class="panel-image-prop" style="padding-top: <?php echo esc_attr( $ratio ); ?>%"></div>
		</div><!-- .panel-image -->

	<?php endif; ?>
	<div class="panel-content">
		<div class="wrap">
			<header class="entry-header">
				<?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>
				<?php twentyseventeen_edit_link( get_the_ID() ); ?>

<a href="wp-content/uploads/2019/01/pulpFiction1_002.jpg" class="ex" title="">
<img src="wp-content/uploads/2019/01/pulpFiction1_002.jpg" width="300" alt="">
</a>


				<h3 style="text-align: center;">テストタイトル</h3>
				<hr style="margin:50px 0px;">

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

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

試したこと

クロームで、どこのCSSが効いているのかを確認したところ、下記のコードが出てきたため
margin-bottomのチェックを外すと、高さが変わるのですがどこでいじれるのかわからず困っております。

element.style {
    margin-bottom: 72px;
}

補足情報（FW/ツールのバージョンなど）

テンプレートは、【twentyseventeen】

ここにより詳細な情報を記載してください。

Answer 1

WordPress環境がないので考え方とヒント回答のみとなってしまうのですが、
element.styleはインラインでCSSが書かれている場合にそう表示されます。
つまり<div style="margin-bottom: 72px;">のように直に書かれている場合ですね。
確か、JavaScriptから挿入された場合も同様の表示になったはずです。
つまり、CSSファイルではなく、直にstyleが書かれているか、もしくはJavaScriptから指定されているかのどちらかだと思われます。

Comments

[pakoyama]

ご回答ありがとうございます！！
そうなんですね。。<div style="margin-bottom: 72px;">という記述はなかったので、JavaScriptから指定されている可能性があるということですね（>_<）

その場合、私が現在試しているようなCSSをいじっても変更は不可能ということになりますか？
初歩的な質問で大変申し訳ありません。

[m.ts10806]

あ、divタグはあくまでイメージなのでstyle=のほうだけ見てください。
Chromeでどの要素を選択したときにそのelement.styleが出てきたのかをよく見てみてください。
phpソースよりもブラウザで「ソースを表示」にして確認された方が良いですね。
styleは上書き可能ではありますが、影響範囲を調べておかないと思わぬところでレイアウトが崩れてしまうので注意です。

[pakoyama]

あ！なるほど。
ありがとうございます。
styleの直書きを探してみましたが、コードには記載がありませんでした！

その場合、JavaScriptに書いてあるとしたらどういう形でかいてあることが多いでしょうか。
margin-bottomみたいな形で記述されているものでしょうか。

[m.ts10806]

jQery であれば　{対象のエレメント}.css("margin-bottom","指定値")のような形
Pure Javascript であれば　.style.marginBottom = 指定値　のような形だと思います。
ただ「72px」という数値はそうそう使うものではないのでmargin-bottomよりも72pxを検索ワードにした方がいいかもしれません。
※場合により計算結果で72になっている可能性もあるので、双方向から探す必要はありますが

[pakoyama]

すごく初歩的な質問を何度もすみません。
Pure Javascriptとファイル名などでしょうか？

テンプレートの中を見ると
JSというファイルがあり、中身がsample.jsとjquery-1.8.1.min.jsの2つのみでした。

sample.jsの中には、
<script type="text/javascript" src="js/sample.js"></script>
という一文のみ記載されていたのですが・・

mtsさんがおっしゃっているJSは、別の箇所にあるということになるのでしょうか・・（；；）

[m.ts10806]

Pure JavascriptはjQueryなどライブラリやフレームワークではなく通常のJavaScript(生jsと言った方がいいかな)のことです。
.jsファイルの中にわざわざscript記述があるとは思えないので実際のコードをそのまま提示いただいた方が良いですね(可能なら質問本文に)

最初から気にはなってましたが、そのmargin-bottomの指定はどの要素にあてられていましたか？
観点をかえたほうがいいかもしれません

[pakoyama]

何度もお答えくださり、感謝です；；
mtsさんのご説明本当にわかりやすいです。

margin-bottomの指定がかかっている要素？なのですが、多分これかな？というコードを画像にて足しました。html自体も変更いたしましたので、お答えくださった事に対してちゃんと返答できていますでしょうか。

クロームでコードを確認すると、site-brandingというCSSを削除すると、幅の指定から外れるようで幅がなくなります。

[m.ts10806]

72pxの件はどこへいったのでしょうか・・？

[pakoyama]

確認したところ、最初に質問した<div style="margin-bottom: 72px;">というのが見つからず、どこにかかっているのかを確認したところ、

html上に記載してあるclassのコードで
class="site-branding"があり、選択するとクロームの検証画面に

element.style {
margin-bottom: 121px;
}

が表示されています。
かかっている要素がどれかとのことだったのですが、要素というのはsite-brandingのことではないのでしょうか。

[m.ts10806]

ブラウザ幅や他の要素との関係で可変的になってるようですね。となると、単にそこだけいじれば良いと言うわけではなく、他の要素との連動もあるので根は深そうです。
Chromeでの検証はあくまで擬似的なものなので100%そのままでいけるかというと、そうでもないこともあります。
element.styleは特に、ずばりその要素だけかかっているわけではなく、あくまで同じstyleがかかっている要素のひとつである可能性が高いです。
もっと上層の親要素から別cssを設けて当てた方が確実と思います

Answer 2

おそらく下記のJSで追加されているかと。

/wp-content/themes/twentyseventeen/assets/js/global.js

		$branding = $customHeader.find( '.site-branding' ),

	// Set margins of branding in header.
	function adjustHeaderHeight() {
		if ( 'none' === $menuToggle.css( 'display' ) ) {

			// The margin should be applied to different elements on front-page or home vs interior pages.
			if ( isFrontPage ) {
				$branding.css( 'margin-bottom', navigationOuterHeight );
			} else {
				$customHeader.css( 'margin-bottom', navigationOuterHeight );
			}

		} else {
			$customHeader.css( 'margin-bottom', '0' );
			$branding.css( 'margin-bottom', '0' );
		}
	}

こちらを削除するか、もしくは嫌でなければ css で !important を指定するとstyle直書きされていても上書きできます。

すみません。。高さですが、下記CSSで
ブラウザ表示エリアの(約？)75%の高さで指定してあるようです。

/wp-content/themes/twentyseventeen/style.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%;
}

Comments

[pakoyama]

noRiwo様
ご回答くださり、ありがとうございます。
ファイルを開けて、
上記、そのまま全てを削除してみたのですが高さがかわりませんでした。

他のコードをいじっているから、かわらないという可能性がありますでしょうか。

[noRiwo]

よく読んでおりませんでした。。。すみません。。
追記しました。。