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 : スマホのカスタムヘッダー画像を全画面で表示する方法 」でした。