ヘッダーの背景を透過し、スライドショーの上にメニューを表示したい
画像参照
下記のように
Topic summary
ヘッダー背景を透過させ、その上にメニューを表示しながら、背景にスライドショーを配置する方法についての質問です。
提案された解決策:
- コンテンツエリアに対してCSSでヘッダー分のマイナスマージンを適用する方法が提示されました
- Dawnテーマでの具体例として
main { margin-top: -50px; }というCSSコードが共有されています - ヘッダーの背景色も削除する必要があることが指摘されています
進行中の問題:
- 別のユーザー(r_kyu)も同じDawnテーマで同様の実装を試みていますが、カスタムCSSに記述しても反映されない状況です
- 配色設定もすべて無しにしているものの、うまく動作していません
- HTML/CSSの知識が限られているため、より詳細な解決策や原因の特定を求めています
回答者は、現状を正確に把握するため、サイトのURLなどの具体的な情報提供を依頼しています。使用テーマが有料の場合は対応できない可能性も示唆されています。
ご質問いただいている、スライドショーをヘッダーの部分に表示させたい件ですが、ご使用のテーマが不明なため考え方を記載させていただきます。
簡単に設定するには、ヘッダーより下にコンテンツエリアがある場合は、コンテンツエリアに対しCSSでヘッダー分マイナスマージンを入れると良いのではと思います。
DawnテーマでのCSS例
main {
margin-top:-50px;
}
-50px部分は実際のヘッダーの高さに合わせてください。
実際にご使用のテーマをご共有いただけましたら、もう少し詳しく回答ができるかもしれません。
有料のテーマですと、対応できない場合もありますのでご了承ください。
ご参考まで。
(キュー小坂)
お世話になります。
dawnを使用しておりまして質問者と同じことを実現したいのですが、
上記の方法でうまくいかず…
カスタムCSSの部分の入れる形であってましたでしょうか？？
@r_kyu 様
カスタムCSSは、テーマ設定のカスタムCSSに入れていただければと思います。
また、コンテンツが上部にずれていたとしても、ヘッダーの背景色が設定されている場合は、ヘッダーに隠れ見えませんので、ヘッダーの背景色も合わせて削除いただければと思います。
ご参考まで。
キュー小坂
1 Like
早急なご返信いただきありがとうございます！
カスタムCSSの部分に入れ、配色もすべて無しにしているのですが反映できず…。
何か考えられる原因はありますでしょうか？？
当方html,cssともに知識は疎く(様々なQAを拝見させていただき、丸コピペでなんとかやっておりましたが…)、可能でしたらどの部分を見れば解決策がわかるなどありましたら教えていただけましたら幸いです。
@r_kyu 様
現状の状態が把握できませんので、
コンテンツ部分が上部にずれているが、ヘッダーの背景色が消えていない？など、想像でのお話になってしまいますので、
プライベートメッセージにて、現状のサイトURLなどの情報をいただけましたら、
もう少しお手伝いできるかもしれません。
キュー小坂
1 Like