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

Lightning G3 (無料版) の個別投稿ページのページヘッダーまわり

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

ightning G3 の投稿でページヘッダーを非表示にする

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

その① CSS を使う方法

以下の CSS を追加します。

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

CSS は手軽なやり方ですが、HTML が出力されてしまうのがお好みでない方は次に示すフィルターフックを使うのがよいです。

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

子テーマの 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 ページヘッダー設定
Lightning ページヘッダー設定

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

ページヘッダーに投稿タイトルを表示することができます。

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

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

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

有料版の G3 Pro Unit を使うと、投稿・固定ページの編集画面で個別に以下のものを非表示にする設定ができます。

  • ヘッダー
  • ページヘッダー
  • パンくずリスト
  • フッター
  • ハンバーガーボタン
  • モバイル固定ナビ

この非表示機能が実装されていることで、G3 Pro Unit はランディングページを作るのが楽になっていて、いくつでも作ってしまいそうです (^^♪

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

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

対馬 俊彦
対馬 俊彦魚沼情報サービス 代表
新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。

WordPress を使用したサイト制作・カスタマイズは全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

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

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・PHP・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

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

» ご相談・お問い合わせはこちらからどうぞ