wordpressのテーマにBizVektor(ビズベクトル)を使っている方も多いと思います。

私もその一人なのですが、ある時、ヘッダーもフッターもサイドバーもない「真っ白なランディングページ」を作りたいと思いました。

最初は、テーマにBizVektorが入っているから無理なのか。。。 と思っていたのですが、ちょこっとcssに追記するだけで「真っ白なランディングページ」が出来る事が分かりました。

今回はその方法をお伝えしたいと思います。

尚、cssをいじりますので、何かあった場合は、自己責任でお願いいたします。

手順

STEP1 固定ページを追加する

ランディングページにしたいページを作成します。

固定ページの新規追加をクリックして、ページを追加します。

STEP2 Page IDを確認する

新規に追加した固定ページを下書き保存し、プレビューで確認します。

すると、page id を確認する事ができます。

このpage idを何かに書き留めておいてください。

STEP3 style.cssに追記する

外観

テーマの編集

編集するテーマを選択:BizVektor

スタイルシート(style.css)を選択し、スタイルシートの一番最後に以下を貼り付け、”ファイルを更新”します。

※〇〇〇の部分は、先ほど確認したpege id(数字3~4桁)に変更します。

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

STEP4 サイトマップに表示されないようにする

このままだとサイトマップ等に表示されてしまうので、表示されないようにします。

外観

高度な設定でサイトマップの設定を行います。

Pages to hide の部分に、page id の数字を入力して保存します。

STEP5 確認

本当に指定したページがまっさらになっているのか、他のページの表示が崩れていないのかを確認します。

大丈夫なようなら、完了です。

追記しても表示が変わらない場合

page idも確認して、style cssに追記したのに、画面を確認してみると変わっていない・・・

そんな時は、ブラウザのキャッシュを疑ってみます。

chromeの場合は、 F5ctrl+F5 でリロードできますので、試してみて下さい。

最後に

真っ白なページ。どう使うかはあなた次第です!

この方法は、ある特定のページを指定し、headerTop などを非表示にする方法です。

うまく行かない、ホームページが開かないといった場合は、追記したstyle cssの記述を一旦削除してファイル更新すれば、元に戻るはずです。

いじるといっても、style cssに追記するだけですので、あまり悲惨なトラブルに見舞われる事はないとおもいますが、あくまで自己責任で行ってくださいね。