Lightning Pro でヘッダーを透過にするときの CSS の例

キャンペーンテキストを表示している場合・表示していない場合の例を紹介しています。

Lightning G3 Pro Unit でヘッダー透過を有効にするとページヘッダーの高さを自動的に大きくしてくれますが、第2世代の Lightning Pro でヘッダー透過を有効にした場合はページヘッダーの高さは変わりません。

サイトヘッダーとページヘッダーが被ってしまい、見た目がよくありませんので、CSS を書いてページヘッダーの高さを調整する必要があります。

デザインスキンとして Origin II を使っている場合の CSS の例は下記の通りです。

キャンペーンテキストを表示している場合

/* ヘッダー透過したときにページヘッダーの高さを大きくする */
body:has(header.siteHeader-trans-true) .page-header {
    padding-top: 12rem;
    padding-bottom: 4rem;
}
@media (min-width: 992px) {
  body:has(header.siteHeader-trans-true) .page-header {
    padding-top: 14rem;
  }
}

/* キャンペーンテキストの背景色が透過ヘッダーに合うように */
body:has(header.siteHeader-trans-true) .vk-campaign-text {
    background: rgba(0,0,0,0.25);
}

キャンペーンテキストを表示していない場合

/* ヘッダー透過したときにページヘッダーの高さを大きくする */
body:has(header.siteHeader-trans-true) .page-header {
    padding-top: 6rem;
    padding-bottom: 4rem;
}
@media (min-width: 992px) {
  body:has(header.siteHeader-trans-true) .page-header {
    padding-top: 10rem;
  }
}

サイト運営者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら