年末の忙しないときに唐突に降ってわいた会社サイトのリニューアル話。
そりゃ、テンプレやっつけ仕事だった現サイトを、なるべく早くリニューアルしたかったのは山々ですが。
でも、だからといって「画面全体を画像にしてカッコよく！」とか言われても、それも5年くらい前の流行ですよね・・・って感じで閉口。

まあ、クライアントの意向が最優先ですから。
こちらがいくらデメリットを伝えても、聞く耳もたないなら、なおさら「ハイハイ」と言うとおりにしてあげるまでです、ハイ。

ところが、どっこい。
意外と難しいんですね、フルスクリーンレイアウト。
あんな、画像と気持ちばかりのテキストがあるだけだからと思ってナメてました。

まず、WordPressで作る場合、フロントページにのみ画像を敷くというのがむずかしい。
CSSでbodyの背景に画像を敷こうものなら、子々孫々にいたるまで、すべてのページがフルスクリーンになってしまいます。

header.phpの中で分岐させて、フロントの時だけ表示させるか。
front-page.phpの冒頭で表示させるか。

＜header＞の前に記述したり、z-indexで重なりを調整したり、いろいろ頭痛いです。

とりあえず、画像を配置するだけなら、こちらを参考にできました。
【参考】レスポンシブにも対応・CSSでフルスクリーンレイアウト

実装したSSSがこちら

.fullscreen  {
/*最背面*/
	position: relative;
	z-index: 0;
/* 画面いっぱいに画像を配置 */
	width: 100vw;
	height: 100vh;
	min-height: 100vh; /*スマホなどではみ出てしまう場合の対策*/
	background-size: cover;
	background-position: center;
	background-image: url('images/frontimg.jpg');
/* 中の文字を中央寄せにする */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
/* 左右中央寄せ */
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
/* 上下中央寄せ */
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
/* コンテンツが多くてもスマホでぎうぎうにならないようにしておく */
	padding: 30px;
	box-sizing: border-box;
}

クラスひとつでここまでできれば上出来でしょう。