よもやまチョモランマ

フルスクリーンの第三歩(完結編)

第二歩までのやり方だと、文字が影の下になってしまって(で言い方合ってる?)白文字はグレーになっちゃうし、リンクも押せなくて、イマイチ用が足りなかったので。

仕切りなおして、こちらのソースを参考に何とか実装できました。
【参考】[CSS]画像を暗くしてみる

でも、これも、これだけだと、高さがフルにならず、文字位置も画面の真ん中にならないので、前回のソースから一部もってきて、合体・・・!
前回までの苦労も無駄にはなりませんでした。

完成形のCSSはこちら。

.full_bg {
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), url(images/frontimg3.jpg);
	background-position: center;
	background-size: cover;
	width: 100vw;
	height: 100vh;
	min-height: 100vh; /*スマホはみ出る対策*/
	text-align: center;
	color: #fff;
}
.full_text {
	margin: 0 20px;
	max-width: 960px;
}

「background-image:」のところはグラデーションにできて、同じ数値にしておけばベタにもなります。スバラシイ汎用性!

これにリンクやクラスのCSSを足すとこんな感じになりました。

ちなみに、記述場所ですが、front-page.phpに置くとやはり「.contents」とかのCSSを被って余白がついてしまうので、header.php内で分岐させましたよ。
この記事を探すころには分岐コードも忘れてしまっているかもしれない自分のために、残しておくぜ。

<?php if (is_front_page()): ?>
	<div class="full_bg">
	<div class="full_text">
		<p class="catchcopy">Heart-full Communication Service</p>
		<p>企業様、働く皆様を想いやり、心のこもったサービスを提供してまいります。</p>
		<p class="kensaku"><a href="">おしごと検索</a></p>
	</div>
	</div>
<?php elseif (is_page()): ?>
	<p class="pagetitle"><?php echo get_the_title(); ?></p>
<?php elseif (in_category('3')): ?>
	<p class="topimg topimg_title">おしらせ</p>
<?php endif; ?>

意外と「is_」と「in_」が紛らわしかったりするんですよね。