ぶんたのそぞろある記から独立移転しました。

【WP】トップページのヘッダー部を非表示にする方法

ヘッダー部非表示のeyecatch画像
目次

なぜヘッダー部を表示したくないのか

まずどうしてトップページのヘッダー部を表示させたくないのか、その理由は?

これは特にトップ記事では、他の投稿記事共通のヘッダー部とは異なったサイズ、デザインの画像にサイトタイトルをあしらったものを表示したいと思ったからです。

その際にトップ記事のヘッダー部表示を非表示にしておかないと、2つのサイトタイトル入り画像が縦に並んで表示され非常に見苦しくなってしまいます。

なお、ヘッダー部には何が含まれているのかを把握しておく必要があります。通常サイト名やナビゲーションメニューなどでしょうか。アイキャッチ画像は無関係だったかも。

いずれにせよヘッダー部がそっくり消えるということを考慮しておかなければなりません。

他のページもヘッダー部を非表示に

この記事のタイトルを「トップページのヘッダー部を・・・」としましたが、実際には固定記事、投稿記事ごとまとめて、或いは各記事単位で非表示とすることも可能です(投稿記事の場合は若干問題がありましたが…)。

ヘッダー部の表示は追加CSSでおこなう

一番簡単な方法は追加CSSに記載することですね(というか他の方法を知りませんので)。

CSSに追加する構文も固定記事と投稿記事では若干異なる(page と post の違い)だけです。

実は似たようなことを別記事「記事のタイトルを表示しない方法」でご紹介しましたが、考え方としてはほぼ同じです。かなり重複するところがありますがご了承ください。

1 ダッシュボードの「外観」から「追加CSS」

編集画面のダッシュボード → 外観 → カスタマイズ → 追加CSS と進み、

ダッシュボードの追加CSS
他のページにも及ばないように id を指定

上図のように「追加CSS」にて下の構文を記載します。

.page-id-3045 header {
 display:none;
}

意味は「記事 id3045 のヘッダー部は表示しない」といったところでしょう。
記事 id を指定してやらないと全固定記事のヘッダー部が非表示となってしまいます。

ちなみに

  • 固定記事の場合は .page-id-xxxx
  • 投稿記事の場合は .postid-xxxx (.post-id ではない)

となります。(xxxxは id 番号)

2 記事毎に設定した追加CSS欄を利用する

各記事編集画面の下部に「追加CSS」或いは似たような欄があると思います。ご利用のテーマにもよると思いますが、無ければプラグインを利用して設置することが出来ます。

当サイトで利用したプラグイン「Add css to post」については、記事の最後に記載しましたので参考になさってください。

既述のように管理画面のダッシュボードから行うのとは異なり、そのページのみに適用されるので、記事 id を指定する必要はありません (不具合があれば id を指定してください)。 

固定記事の場合

.page header {
 display:none;
}

固定記事の場合は上記のように記載します。
ちなみに日本語に翻訳すると 「このページのヘッダー部は表示しない」となります。

投稿記事の場合・・・ちょっと不具合が

しかし、投稿記事の場合も同様に自信を持って

.post header {
 display:none;
}

とやってみたのですがヘッダー部が消えたり消えなかったり。

仕方がないのでダッシュボードでの設定と同様 id を指定して

.postid-xxxx header {
 display:none;
}

のように記載すればかなりの確率でOKでした。何度かテストをしたのですが、キャッシュが効いていて変化に現れないことがあったのかもしれません。

当記事で取り上げた「記事 id」と「プラグイン Add css to post」については、下記の記事でご紹介していますのでご覧ください。

(おわり)

Page Top
目次
閉じる