WordPress使用の際にLightningテーマを選ばれている方も多いかと思いますが、今回はLightningテーマでヘッダーやフッターを非表示にする方法です。
Lightningテーマのページテンプレート
Lightningテーマのページテンプレートでは、ページのデザイン設定で「1カラム」「サイトコンテントの上下余白を無しにする」といった設定ができます。
![](https://eguweb.jp/wp-content/uploads/スクリーンショット-2022-12-19-8.47.03-1024x645.jpg)
![](https://eguweb.jp/wp-content/uploads/スクリーンショット-2022-12-19-8.47.16.jpg)
しかし、この設定でページを公開しても、上下にヘッダーとフッターが表示されたままになります。
![](https://eguweb.jp/wp-content/uploads/202212200047-00-1024x762.jpg)
こちらを非表示にします。
サイトヘッダーを非表示にする
![](https://eguweb.jp/wp-content/uploads/202212200048-00-1024x335.jpg)
サイトヘッダーを非表示にします。CSSを読み込むいずれかの場所に設定します。今回はシンプルに本文内のカスタムHTMLブロックに追加してみます。
<style>
header.siteHeader {
display: none;
}
</style>
![](https://eguweb.jp/wp-content/uploads/202212200057-00-1024x849.jpg)
![](https://eguweb.jp/wp-content/uploads/202212200055-00-1024x530.jpg)
サイト上部にまだ余白が残っているので、調整します。パンくずリストも非表示にします。
<style>
.section.siteContent {
padding: 0;
}
.section.breadSection {
display:none;
}
.admin-bar .vk-mobile-nav-menu-btn {
display: none;
}
</style>
これで、上部は色々と消えました。
![](https://eguweb.jp/wp-content/uploads/202212200056-00-1024x785.jpg)
サイトフッターを非表示にする
フッター部分は、このような感じで消せます。
<style>
footer.section.siteFooter {
display: none;
}
</style>
![](https://eguweb.jp/wp-content/uploads/202212200100-01-1024x476.jpg)
消えました!
まとめ
これで、上下のヘッダーとフッターを非表示にすることができます。ランディングページなどを作成したい場合に使える方法です。
ご参考ください。