フルスクリーンの第三歩(完結編)
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_」が紛らわしかったりするんですよね。