一度覚えたはずなのに思い出せない。それならとメモのつもりで作ったブログです。

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

目次

ヘッダー部を表示させたくない場合がある

ヘッダー部の表示・非表示については、トップページだけではなく他の固定ページや投稿記事についても同様に設定可能です。

まずどんな時にトップページのヘッダー部を表示させたくないのか。

これは特にトップページでは、少し大きめの画像にサイト名をあしらったデザインにして、他の投稿記事共通のヘッダー部と差別化したいことがあるからです。

しかしそうするとサイト名が入った画像と元々のサイト名が縦に並んでしまい、かえって見苦しくなることもあります。

そのためサイト名は非表示として、必要なものは画像の中に織り込んでしまえばいいのです。

なおヘッダー部に含まれるのはサイト名やヘッダー画像、ナビゲーションメニューなどです。

その他投稿記事においては各ページのタイトル以下、アイキャッチ画像などはヘッダー部に含まれているものではありませんので、影響はありません。

使用するテーマによっては、ブラウザでスクロールすると非表示のヘッダー部が現れる設定もできます。

ヘッダー部の表示・非表示を追加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」或いは似たような欄があると思います。ご利用のテーマにもよると思いますが、無ければプラグインを利用して設置することが出来ます。

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

固定記事の場合

.page header {
 display:none;
}

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

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

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

.post header {
 display:none;
}

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

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

.postid-xxxx header {
 display:none;
}

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

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

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

ページのデザインが容易なテーマを使用する方法

現在WordPressテーマとして、有料ですが「SWELL」というものを利用しています。

まだまだ詳しくはないのですが、トップページのデザインなど実に簡単にしかも楽しく作ることができます。

有料、無料とも多くのテーマがあります。頭を悩ますのもいいですが、簡単にできるものがあればそれを使い、余った時間は記事作成のほうに費やすのも一つの考え方かなと思います。

記事中にも書きましたが、有料テーマの中でも価格が若干高めであるものの実に楽しいテーマです。何が楽しいかって夢があります。私はまだまだ初心者なのですが、「SWELL」の知らなかった機能を見つけるたびに楽しくなります。

WordPressテーマ「SWELL」

(おわり)

- 広 告 -

目次