トップページのみでしか「透過ヘッダー」の機能は有効ではないのでしょうか?
他の固定ページでも「透過ヘッダー」を使用してスクロールすると追従ヘッダーに入り替わるようにしたい。
@fujiyoshi さま
ご質問いただきましてありがとうございます。
他の固定ページでも「透過ヘッダー」をご利用になりたいとのこと、
サイトをより魅力的にするための素敵なご要望をありがとうございます。
現状の標準機能では、トップページでのみ「透過ヘッダー」が有効となっており、
すべてのページに適用した場合、ページごとの背景やコンテンツの配置によっては
投稿記事や一覧ページなどで意図しない表示崩れ(ヘッダーと文字が重なって読めなくなる等)
が起きてしまう可能性がございます。
従いまして、標準ではあえてトップページのみに制限する仕様となっております。
いただいた内容は、今後の機能改善に向けた貴重なご要望としてお預かりいたします。
もし個別にカスタマイズで対応される場合は、以下のコードを
「カスタマイザー > 追加CSS」に貼り付けていただくことで、
投稿ページなどには影響を与えず「固定ページのみ」ヘッダーを透過にすることが可能です。
.page .header {
position: absolute;
left: 0;
right: 0;
background-color: transparent;
}
固定ページのヘッダー透過同じくやりたかったので助かりました。
別件ですが、ヘッダーの幅について、TOPページは画面幅いっぱいにヘッダーが表示されますが、
その他の固定ページはヘッダー両サイドに余白ができ、中寄りに表示されてしまいます。
これは仕様なのでしょうか?
@fujiyoshi さま @chra888750 さま
ご案内まで長らくお待たせしてしまい、申し訳ございません。
固定ページのヘッダー幅について、ご質問ありがとうございます。
ご指摘の通り現状の仕様では固定ページのヘッダーには
左右に余白ができる設計となっております。
トップページと同じように横幅いっぱいに広げるには、
すでに設定いただいている「透過用CSS」の下に、
以下のコードを追記してください。
【設定手順】
1.「カスタマイザー>追加CSS」を開きます。
2.前回追加したCSSコードのすぐ下(次の行)に、以下のコードをそのまま貼り付けてください。
.page .header .container, .page .header .container .headerInfo {
max-width: none;
}
3.「公開する」をクリックして保存します。
もし設定等でうまく適用されない場合や、
他にご不明な点がございましたら、いつでもお気軽にお声がけください。