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

ヘッダー部とは

ヘッダー部とは下図の上方にあるピンクで囲まれた部分です。

設定にもよりますが、ここにはサイト名やナビゲーションメニューがあります。

通常の表示

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

ヘッダー部の表示・非表示を追加CSSで設定する

一番簡単な方法は追加CSSに記載することです。

なお当記事のタイトルを「トップページのヘッダー部を非表示にする方法」としましたが、どのページでもヘッダー部を非表示にすることができます。

その際 CSS に追加する構文は固定記事と投稿記事では若干異なりますので注意が必要です。

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

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

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

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

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

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

ちなみに

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

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

2 記事編集ページの追加CSS欄を利用する方法

各記事編集画面の下部に「追加CSS」や「カスタムCSS」といったような欄があると思います。

ご利用のテーマによってもともと無いこともありますが、プラグインを利用して設置することが出来ます。

コードを記述したそのページのみに適用されるので、記事 id を指定する必要はありません (不具合があれば id を指定してください)。　

記事編集画面下部に追加CSS欄を設置する方法

固定記事の場合

.page header {
 display:none;
}

固定記事の場合は上記のように記載します。
文字通り 「このページのヘッダー部は表示しない」ですね。

投稿記事の場合

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

.post header {
 display:none;
}

とやってみたのですが駄目でした。

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

.postid-xxxx header {
 display:none;
}

のように記載すればヘッダー部は表示されなくなりました。

つまり記事の「追加CSS」に記載する場合であっても、投稿記事ではIDを指定する必要がありました。

このことに関しても改めて検証してみたいと思います。

（おわり）