Twenty Seventeen : スマホのカスタムヘッダー画像を全画面で表示する方法

WordPressの公式テーマ Twenty Seventeen では、カスタムヘッダーを設定すると、トップページに画像が大きく表示されます。

画像をうまく活用すると、印象的なサイト作りが可能になりますが、スマートフォンで表示した場合、なぜか画像が全画面で表示されません。

今回は、この部分をカスタマイズして、スマートフォンでも画像を全画面表示に変更していきます。

デフォルトでは画像が全画面表示されない

Twenty Seventeen はスマートフォンの場合、デフォルトのままではこんな感じでトップページのカスタムヘッダーは表示されます。

ナビゲーションメニューのバーが下に表示されてしまい、せっかくの大きな画像が、効果的に使われていない印象ですよね。

ちなみに、サイトタイトルとサイト説明文が画像中央に表示されているのは、前にカスタマイズしたからで、Twenty Seventeen デフォルトでの表示位置ではありません。

これをカスタマイズによって下のように変化させます。メニューバーが消え、よりインパクトのある感じになります。

子テーマの style.css に追記

手順は簡単。子テーマの 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 {
	height: 100vh;
}

ここでのポイントは、高さ（height）を「vh」で指定している点です。単純に、高さを100%にすれば良いように思いますが、それでは上手くいきません。

「vh」は「viewport height」の略で、ブラウザの高さに対する割合を指定できる単位です。「height: 1vh」は「height: 1%」と同じなので、「%」で思ったような表示にならない時は、「vh」を使うと上手くいくことがあります。

今回はこの典型例で、「vh」でなければ全画面表示になりません。試しに「％」を使ってみれば表示が崩れるのでお分り頂けると思います。

以上、「 Twenty Seventeen : スマホのカスタムヘッダー画像を全画面で表示する方法 」でした。