ヘッダー部の表示の違いを見てみる
ヘッダー部とは下図のピンクで囲まれた部分で、固定記事、投稿記事を問わずすべてのページに表示されます。
そしてここにはサイト名やナビゲーションメニューがあります。
なお、ヘッダー上部の青い帯は「お知らせバー」という機能(テーマ:SWELLの場合)で、設定は別途行います。
【ヘッダー部表示】

【ヘッダー部非表示】

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

ヘッダー部が見えないようにしたところで、何の意味があるのかね



ヘッダー部がもっと大きい場合やほかの画像があるときにページによっては邪魔なことがあるのかも



では追加CSSの設定をしてヘッダー部を非表示にしてみましょう
ヘッダー部を非表示にするには
- ダッシュボードで追加CSSを記述する方法
- 各ページ下の追加CSS欄に記述する方法
1. ダッシュボードの「外観」→ 「追加CSS」に記載
ここでid番号を指定することにより固定記事、投稿記事をまとめて、あるいは個別に設定することができます。
管理画面のダッシュボード → 外観 → カスタマイズ → 追加CSS と進み、


上図のように「追加CSS」にて下の構文を記載します。
【例:ダッシュボード追加CSS構文例】
.page-id-3045 header { display:none; }
意味は「固定記事 id3045 のヘッダー部は表示しない」といったところでしょう。



記事idの指定の仕方が固定記事と投稿記事では異なるから注意
- 固定記事の場合は .page-id-xxxx
- 投稿記事の場合は .postid-xxxx (.post-id ではない)
固定記事の場合、記事 id を指定しないと全固定記事のヘッダー部が非表示となります。



ヘッダー部にグローバルナビを設置していると、ともに非表示になるので留意してね
2. 追加CSSをページ最下部のカスタムCSS欄に記載
もう一つの方法は、各ページの下部にある追加CSS欄(カスタムCSS欄)に構文を記述する方法です。
ダッシュボードと同様の構文を記述します。


【追加CSS記載例】
.postid-4545 header { display:none; }
ご利用のテーマによってはページ下に追加CSS欄が無いこともありますが、その場合はプラグインを利用して設置することが出来ます。
ただし記事idを指定する場合は「page-id-xxxx」ではなく「postid-xxxx」なので注意が必要です。



postとidの間にハイフンがない postid だよ
「投稿記事id4545のヘッダー部を非表示にする」という意味ですね。
ダッシュボードに記載する場合も投稿記事編集画面で記載する場合も、必ず記事idを指定しましょう。
【おまけ】編集ページ下部にカスタムCSS欄を追加したい場合



この「CSSを追加」する欄が編集ページ下部に無い場合は追加設定できます
ここでは「Add css to post」(作:Kachibito氏)をご紹介します。
このプラグインはWordPressの管理画面からダウンロードはできません。作者のページからダウンロードして管理画面にアップロードする形になります。手順は次の通りです。
【プラグイン add css to post の導入手順】
下記リンクにアクセスする
ZIPの絵をクリックしてダウンロードする
記事半ばに次のようなZIPの絵があります。この絵をクリックしてデスクトップなどの適当な場所にダウンロードします。


管理画面でプラグインをアップロードする
ダウンロードしたZIPファイルは管理画面の「プラグインを追加」にて、解凍せずそのままアップロードします。


プラグイン一覧に表示されるので「有効化」する


上図のプラグイン一覧はテーマがCocoon の場合であり、SWELLではプラグイン一覧に表示されません。「有効化」の表示もテーマによって異なるようです。
いずれにしても記事編集画面の最下部には「追加CSS」の欄が設けられるので確認しましょう。
(おわり)