Lightningのヘッダーの固定・ヘッダーの高さ自動調整機能をオフにする

Lightning及び弊社提供プラグイン使用時の動作・表示検証はあくまで標準機能での利用時までとなります。カスタマイズによって別の箇所でのレイアウト不良などが発生した場合についてはサポート対象外となりますので、自己責任の上行ってください。
また、バージョンアップなどによりカスタマイズは無効となる場合もございます。バージョンアップの際は必ずバックアップをとった上で実行してください。

Lightning ではヘッダー部分を固定しており、スクロールするとヘッダーの高さがやや小さくなるようになっていますが、2.4.0 ではこの機能を個別でオフにしやすくしています。

子テーマのfunctions.phpに下記のコードを書くとヘッダーの固定を解除する事ができます。

Origin(Lightning標準スキン)、jpnstyleの場合

※2018年3月時点の対応スキンです。今後対応スキンは追加されていきます。

ヘッダーの固定を解除する

add_filter( 'lightning_headfix_enable', 'lightning_headfix_disabel');
function lightning_headfix_disabel(){
return false;
}

ヘッダーの高さ調整をオフにする

add_filter( 'lightning_header_height_changer_enable', 'lightning_header_height_changer_disabel');
function lightning_header_height_changer_disabel(){
return false;
}

Charmの場合

拡張デザインスキン Charmをご利用の場合は、上記だけではスクロールした時に画面がカクンとズレるので、外観→カスタマイズ→追加CSS や ExUnitのCSSカスタマイズなどに下記を追記してください。

@media (min-width: 769px){
.scroll_head .description_wrap,
.scroll_head .siteHeader_logo {
display:block;
}
.slide-inner {
margin-top:0 !important;
}
.page-header {
top:0 !important;
margin-bottom:0 !important;
}
}

Variety、Fort、Paleスキンの場合

※2018年3月時点の対応スキンです。今後対応スキンは追加されていきます。
外観→カスタマイズ→追加CSS や ExUnitのCSSカスタマイズなどに下記CSSを追記してください。PC画面、スマホ、タブレット画面すべてで解除したい場合は、どちらも記述してください。

ヘッダーの固定をPC画面サイズで解除する

@media (min-width: 992px){
body.header_scrolled .gMenu_outer {
position: relative !important;
top: 0 !important;
transition: none;
}
}

ヘッダーの固定をスマホ、タブレット画面サイズで解除する

@media (max-width: 991px){
.header_scrolled .siteHeader {
position: relative;
}
}

Lightningの情報をお届けします

Lightning JPNSTYLE

「JPNSTYLE」適用時にヘッダー画像をページごとに設定していただくことができます。標準でページ背景やタイトルアイコンに和テイストのパーツが設定できるようになっているので、和風サイトに適しています。

無料の多機能プラグイン「VK All in One Expansion Unit(通称:ExUnit)」を同時に利用することで、柔軟なサイト制作が可能です。