WordPress個別サポート

作成中のWordPressサイトにランディングページを混ぜるには、どうすれば良いでしょうか。たとえば次のような1カラムの宣伝ページを作りたいことがあります。

ランディングページを作りたい

できれば、同じサイト内にランディングページを作りたい

「ランディングページとは何か」は別にして、次のような要件を満たしたいところです。

  • ヘッダー・フッター・サイドバーは不要
  • フォントサイズを全体的に大きめに
  • できれば現在のテーマと共存させたい

ネックになるのは現在のテーマを使いつつ、ヘッダーやフッターが存在しない1カラムのページを作成できるかという点です。

単独のランディングページ用のサイトであればThe Landing Pageのようなランディングページ用のテーマを使う方法があります。

ここでは、CSSを使った解決策を紹介します。

以下はテーマにBizVektorを使う例で説明しますが、他のテーマでも考え方は同じです。ちなみにBizVektorなど、新規追加する固定ページで「サイドバーなし」のような1カラムページ用のテンプレートを選べるテーマもありますが、この記事ではデフォルトテンプレートを使う前提で話を進めます。
スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

既存デザインを変更せずにランディングページを作る

まずは、テスト表示用にランディングページを作成しましょう。投稿でも構いませんが、ここでは固定ページとします。

ランディングページ用の固定ページを作成

ランディングページ用の固定ページを作成

公開されたページ(下書き中でも大丈夫です)のHTMLソースを見て、bodyタグに付いているclass名を調べます。

このページ固有のclass名を調べる

このページ固有のclass名を調べる

この「page-id-167」の部分がページ固有のclass名です。ページごとに異なる番号が付加されます。このclassに対してCSSを設定すれば、そのページだけにスタイルを適用することができます。

つまり、

  • ランディングページ(page-id-167)のみヘッダーやフッターを非表示に
  • その他のページのスタイルは変更しない

のように同じサイト内で別々のスタイルを適用することができます。

固定ページではなく投稿で作成した場合は「postid-167」のようなclass名が付加されます。

試しに「page-id-167」のclass名を使って子テーマのstyle.cssに次のようなCSSを入力してみましょう。「167」は作成したページに合わせて変更してください。

/* BizVektorのヘッダーを削除 */
.page-id-167 #headerTop,
.page-id-167 #header,
.page-id-167 #gMenu {
    display: none;
}
このCSSはBizVektorの例です。BizVektor以外をお使いの場合はCSSセレクタを調べて修正してください。

これにより、ランディングページのヘッダー(ヘッダーロゴやグローバルナビゲーションなど)が消えます。

ランディングページのヘッダーが消える

ランディングページのヘッダーが消える

喜ぶのはまだ早いです。他のページに影響が出ていないか確認しましょう。

その他のページのデザインに影響はない

その他のページのデザインに影響はない

うまくいっているようであれば、次のCSSで一気に不要な項目を消してしまいましょう。上記のCSSを置き換えてください。

/* BizVektorのヘッダー・フッター・サイドバーを非表示に */
.page-id-167 #headerTop,
.page-id-167 #header,
.page-id-167 #gMenu,
.page-id-167 #pageTitBnr,
.page-id-167 #panList,
.page-id-167 #back-top,
.page-id-167 #footerSection,
.page-id-167 #main #container #sideTower {
    display: none;
}

これでヘッダー・フッター・サイドバーなどがスッキリ消えます。

ランディングページのヘッダー・フッター・サイドバーが消える

ランディングページのヘッダー・フッター・サイドバーが消える

あとはランディングページ風に仕上げるCSSを自由に入力しましょう。ここでは、フォントサイズを大きくしてコンテンツ全体を中央寄せにしています。

/* ランディングページのフォントを設定 */
.page-id-167 {
    font-size:30px;
    font-weight:bold;
}

/* コンテンツエリアを中央寄せに */
.page-id-167 #main #container #content {
    margin: 0 auto;
    float: none;
    width: auto;
    text-align: center;
}

ふわっと仕上げです。不要なスタイルは取捨選択してください。

表示結果は次のようになります。

完成したランディングページ

完成したランディングページ

まとめ

このように、各ページに割り当てられたclass名(bodyタグ)を使うことで、1つのサイト内でまったく別のスタイルのページを含めることができます。

ランディングページのようにサイトの基本デザインと異なるスタイルのページを混在させたいときの参考にしてください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート