【WP】ヘッダー部を追加CSSで非表示にする方法

基本的に固定、投稿記事すべてのページに適用できます。

ヘッダー部の表示の違いを見てみる

ヘッダー部とは下図のピンクで囲まれた部分で、固定記事、投稿記事を問わずすべてのページに表示されます。

そしてここにはサイト名やナビゲーションメニューがあります。

なお、ヘッダー上部の青い帯は「お知らせバー」という機能（テーマ：SWELLの場合）で、設定は別途行います。

【ヘッダー部表示】

【ヘッダー部非表示】

サイト名とナビゲーションメニューが表示されていたヘッダー部は消えました。
ヘッダー部の表示、非表示は一括あるいはページ毎に自在に行うことができます。

ヘッダー部を非表示にするには

1. ダッシュボードの「外観」→ 「追加CSS」に記載

ここでid番号を指定することにより固定記事、投稿記事をまとめて、あるいは個別に設定することができます。

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

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

【例：ダッシュボード追加CSS構文例】

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

意味は「固定記事 id3045 のヘッダー部は表示しない」といったところでしょう。

固定記事の場合、記事 id を指定しないと全固定記事のヘッダー部が非表示となります。

2. 追加CSSをページ最下部のカスタムCSS欄に記載

もう一つの方法は、各ページの下部にある追加CSS欄（カスタムCSS欄）に構文を記述する方法です。

ダッシュボードと同様の構文を記述します。

【追加CSS記載例】

.postid-4545 header {
 display:none;
}

ご利用のテーマによってはページ下に追加CSS欄が無いこともありますが、その場合はプラグインを利用して設置することが出来ます。

ただし記事idを指定する場合は「page-id-xxxx」ではなく「postid-xxxx」なので注意が必要です。

「投稿記事id4545のヘッダー部を非表示にする」という意味ですね。

ダッシュボードに記載する場合も投稿記事編集画面で記載する場合も、必ず記事idを指定しましょう。

以前に投稿記事編集ページに追加CSSを記載する場合は記事idなしで適用されていたのですが、現在のSWELLに変えてからは必ずしもその通りにはなりませんでした。なので常に記事idは記載するようにしてください（ご利用のテーマによるのかもしれません）

【おまけ】編集ページ下部にカスタムCSS欄を追加したい場合

ここでは「Add css to post」（作：Kachibito氏）をご紹介します。

このプラグインはWordPressの管理画面からダウンロードはできません。作者のページからダウンロードして管理画面にアップロードする形になります。手順は次の通りです。

（おわり）