「LP」つくってくれん？

まいど

最近はLP（ランディングページ）製作の依頼が舞い込むことが多い。

WordPressでつくる際は固定ページを使うことになる。

経験者はお分かりと思うが、コーディングを進める上でジャマになるのが

  • グローバルメニュー
  • フッター

あたりではないだろうか。

削除するだけなら{display: none;}でサクッと消せるが、それでは全てのページに影響を及ぼすわけで。

特定のページのみをいじる場合は、そのページIDを指定した上で、記述しなければならない。

固定ページだけグローバルメニューを消してみる

固定ページに画像を挿入した上で、作業を進めていこう。

そのほうが、視覚的にもわかりやすいので。

トップ画像だけが張り付いてる状態だ。

今回は、この固定ページのグローバルメニュー（赤帯の部分）を消していく。

…ちなみに、真っ赤などの原色はなるべく使わない方がいい。

（コテコテでダサい…）

では、赤帯にカーソルを合わせ、要素を検証してみよう。

緑線箇所に注目してほしい。

page-id-3510 は固定ページに割り振られたIDのことだ。

IDを確認するには、投稿画面のURLを見ればわかる。

wp-admin/post.php?post=3510&action=edit

赤帯を指定するのが header-nav-area だ。

このページだけ赤帯を消すには、まずはpage-id-3510 で対象ページを指定する。

その上でさらに header-nav-area を指定し、削除するコード display: none; を記述していく。

body.page-id-3510 #header-nav-area{
　　display: none;
}

これをWordPress管理画面のカスタムCSSに書き込むと…

赤帯消えました

簡単に説明すると、

<body class=“page-template-default page page-id-3510 ……”>

とあるように、ページIDが含まれるコードは、class で指定されている。

なので冒頭に「.」あるいは「body.」を記述しよう。

body.page-id-3510

次に書くのは、グローバルメニューを消す記述だ。

header-nav-area はidで指定されているので「＃」を使う。

#header-nav-area{
　　display: none;
}

その後に display: none; を入れれば完成だ。

ヘッダーやフッターを消すのも同じやり方で消すことができる。

WordPress初心者はCSSをいじるのは大変だと思うが、やればなんとかなるもんである。

行き詰まってどうしようもない時は、僕に聞いてくれ。