投稿のページヘッダーを非表示にするやり方

Lightning G3 (無料版) の個別投稿ページのページヘッダーまわりは以下のようなレイアウトになっていて、「ブログ」とだけ表示されているページヘッダーの部分がなんとなく無駄なスペースのように思えてきます。

この記事ではページヘッダーを非表示にして、このように ↓ 見せるやり方を紹介します。

非表示にするためのやり方は、CSS を使う方法とフィルターフックを使う方法があります。

その① CSS を使う方法

以下の CSS を追加します。

body.single .page-header {
    display: none;
}

CSS は手軽なやり方ですが、以下の2点が気になるかもしれません。

• スクロールしてグローバルナビがページ上部に固定表示されるタイミングで画面全体がカックンと動く（ずれる）。
• 画面に表示されないけど、HTML は出力される。

これがお好みでない場合は次に示すフィルターフックでカスタマイズするか、有料プラグイン Lightning G3 Pro Unit を使うのがよいです。

その② フィルターフックを使う方法

子テーマの functions.php に以下のコードを追加します。

// 投稿にページヘッダーを表示しない
add_filter( 'lightning_is_page_header', function(){
  if ( 'post' === get_post_type() ){
      return false;
  } else {
      return true;
  }
} );

参考 個別投稿以外のページヘッダーを非表示にするには

ブログページ（投稿トップ）のページヘッダーを非表示にする CSS はこれ ↓

body.blog .page-header {
    display: none;
}

アーカイブページ（カテゴリーページ）のページヘッダーを非表示にする CSS はこれ ↓
これは使いたくなることがときどきありますよね。このサイトでも使ってます (^^♪

body.category .page-header {
    display: none;
}

おすすめ Lightning G3 Pro Unit を使う

有料版プラグインの Lightning G3 Pro Unit の Lightning ページヘッダー設定 で「投稿タイトルとメタ情報」を選ぶと(上図参照)、このように ↓ ページヘッダーに投稿タイトルを表示することがかんたんにできます。いまご覧いただいている投稿のタイトル「非表示にするやり方」にはマッチしませんが、ページヘッダーを非表示にせずに活かすことができます。

G3 Pro Unit はページヘッダーに背景画像を設定するのがかんたんで、パソコン・モバイルで別々の画像を指定することもできるようになっています。

楽をしていろいろとカスタマイズしたい方に、Lightning G3 Pro Unit はおすすめのプラグインです。

参考 G3 Pro Unit は投稿・固定ページに個別に非表示設定ができます

Lightning G3 Pro Unit の入手方法

Lightning G3 Pro Unit は有料の WordPress プラグインですが、単体では販売されていなくて、Vektor Passport というライセンス製品に含まれて販売されています。

Vektor Passport は、コピペで使える豊富なプロ品質プレミアムパターン、Lightning G3 Pro Unit、VK Blocks Pro を好きなだけ使える大変お得なライセンス製品です。ライセンス1つで自分が制作・管理する複数のサイトに使うことができます。ライセンス期間は 1年 / 3年 / 5年 から選べます。

投稿者プロフィール

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

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

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

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

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

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

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

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

最新の投稿

この著者の記事一覧

• Lightning G32025年4月26日カスタム分類で選択された複数のタームを親→子の順に表示した例
• VK Blocks Pro2025年1月17日ローディング画面の作り方 - VK Blocks Pro の固定表示ブロックを使用
• Lightning G32024年10月24日サブメニューを開く親項目のリンクを無効にしたスマホ対応のカスタマイズ
• VK Filter Search Pro2024年8月28日日付ではなく年と月で範囲を指定して検索するカスタマイズ例