フルスクリーンの第三歩(完結編)
WEBWordPress
CSSPHP
第二歩までのやり方だと、文字が影の下になってしまって(で言い方合ってる?)白文字はグレーになっちゃうし、リンクも押せなくて、イマイチ用が足りなかったので。
仕切りなおして、こちらのソースを参考に何とか実装できました。
【参考】[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_」が紛らわしかったりするんですよね。