質問: 前提・実現したいこと WordpressのSydneyというテーマを使用してページ制作を行なっています。 デフォルトはPC表示のヘッダーメニューバーは背景が透過しており、ヘッダースライダーの画像が見えている状態です。 このメニューバーに背景色をつけたいのですが、ヘッダースライダーの画像がその分隠れてしまうので、 メニューバーの高さ分、ヘッダースライダーの画像を下にずらしたいです。 ページのリンクはこちらです。 ### 発生している問題 ``` ヘッダースライダー自体は表示する画像が背景画像に指定されており、要素自体を下にずらすことは出来ましたが、 背景画像の表示位置は変わらず、位置を下げた分画像の上部が切れてしまい、 、思うようにヘッダースライダー(の背景画像)の位置が変わってくれません。 (background-positionもいじってみましたが、ダメでした。) メニュバーの高さの分、ヘッダースライダーの画像の位置を下げる方法をご教授頂ければ幸いです。 ``` どこまでの情報が必要なのか分からなかったため、必要であれば追記致しますので、申し付けください。 よろしくお願いいたします。 <追記> ![![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/687e7b4328fdbd413a271861f0abbc41.jpeg)
回答: CSSで2つご案内いたします。 ### 1つ目 まず「メニュバーの高さの分、ヘッダースライダーの画像の位置を下げる方法」ということであればこれで済みます。 ``` /* メニュバーをヘッダースライダーに被せずに上部に固定する */ #masthead.site-header { position: sticky; } ``` しかしヘッダースライダーの高さがメニュバーの分だけ画面より高くなりますし、タイトルもメニュバーの高さの分少し下にずれてしまうという問題が生じます。 これはメニュバーの高さがわからないためにおこる問題です。 ### 2つ目 次にメニュバーの高さをあらかじめ指定する方法です。 ``` /* メニュバーの高さを指定する */ #masthead { height: 100px; } /* メニュバーの高さと同じ分だけ、ヘッダースライダーの位置を下に下げる */ .sydney-hero-area { margin-top: 100px; } /* メニュバーの高さと同じ分だけ、ヘッダースライダーの高さを低くして画面ぴったりにする */ .sydney-hero-area { height: calc(100vh - 100px) !important; } /* メニュバーの高さと同じ分だけ、タイトルを上に移動させる */ .slide-inner { top: calc(50% - 100px); } ``` こうすれば先述の問題は起こりませんが、ただしメニュバーの高さを指定しまっているので、スマホに合わせるときに別の高さを指定してやる必要があったり、またフォントサイズを変更するときにも高さを変更しなければならないなど、少しケアが面倒です。 ### 3つ目 JavaScripotを使えば、「メニュバーの高さを "指定" することなく "計測" して、その分だけ各要素を調整する」ということもできます。