【TCDテーマ】CSSだけでLP用の白紙ペラページを作る方法

お気に入りのWordPressテーマが見つかった！
いざLP（ランディングページ）を作ろうと思っても、ロゴもサイドバーもない白紙のペラページが存在しない、、、

これは実際によくあることで、白紙のページがあるテーマの方が少ないです。
なので多くの人が別でランディングページ用のサイトを作ったり、外注したりしているわけです。

でも、そんな面倒なことはせずに、どうせなら同じテーマの固定ページで作りたくありませんか？

今回はそんな不満を解消すべく、僕も愛用しているTCDテーマでの白紙ペラページの作り方を紹介していきます。

 

 

LP（ランディングページ）＆ペラページとは！？

ランディングページとは

ランディングページとは、「様々なネット広告やリンクをクリックした際に表示されるする、サイトを含むＷＥＢページ全般」を指す言葉で、LP、ランペ、などとも呼ばれています。しかし、一般的に「ランディングページ」や「ＬＰ」が指すものは、一つの商品やサービスを売るための、一枚の長いＷＥＢページです。

 

ペラページとは

1枚だけプリントされた紙をペラ紙と呼ぶことがありますよね？ 内容うんぬんは置いといて、ペラペラの紙1枚に情報が集約されているからです。 ペラサイト・ペラページも基本的に同様で、1ページで構成されているWebサイトを指します。

 

どちらも意味はほとんど同じですね（笑）
つまりは１ページで構成されたWEBページのことをランディングページやペラページと言うわけです。

で！、大事な今回のテーマは

「白紙のランディングページです！」

なぜ白紙である必要があるかと言えば

• ・ロゴ
• ・サイドバー
• ・フッター

などの余計な情報を遮断し、見る人にそのページのコンテンツだけに集中してもらう為です。

今回はそんな「ロゴなし」「サイドバーなし」「フッターなし」の、白紙ランディングページをTCDテーマで作成する方法です。

 

TCDテーマでLP（ランディングページ）は作れないのか！？

TCDでペラページを作る方法を探しているの「TCDってなに？」って人はいないと思いますが、、、一応簡単に説明しましょう。TCDはWordPressのテーマの中でも、国内トップクラスの「費用対効果」「機能性」「デザイン」を兼ね備えた日本語用ブログテンプレートです。

僕自身もTCDテーマを使っていますが、ここのテーマを使ってしまうともう他を使えません。
それほど圧倒的なデザイン力と機能性を秘めていて、あまりに良すぎて使いもしないのにTCDのテーマをいくつも購入している状況です（笑）

「結論からいうとTCDテーマには白紙のランディングページは存在しません！」

もちろんランディングページに特化したテーマもありますし、どのテーマにもサイドバーのない１カラムデザインは固定ページに用意されています。

が！ロゴやメニュー、フッターのない、本当に真っ白なペラページは用意されていません。
メルマガLPや販売ページを作る時に、どうしても白紙のページが欲しくなる時ってあるんですよね！

全てに対してハイクオリティで満足度も高いTCDテーマですが、ここに関してはずっと不満でした。
ページビルダーというとんでもない機能も実装しているので、ペラページさえあれば本当に自分の思い通りのランディングページが作れる！何度もそう思い試行錯誤しました。

独学ではありますが、ようやくペラページの作成に成功したので、これから方法をお伝えしていきます。

 

TCDテーマでCSSだけで白紙ペラページを作る方法

※ここからはCSSをいじるので全て自己責任でお願いします。

僕はとくにCSSの専門家でも詳しい人でもありません。
ただ「欲しいものは欲しい！」という駄々っ子のような気持ちで色々と調べて、自分のサイトをいじってようやく作成したものです。

なので、なぜこうなるかとか、そういった理由は全く分かりません！
なるものはなるし、結果がよければ全てよしです（笑）理由も知りたい人は自分で調べるか、専門家にでも聞いて下さい。

 

TCDテーマで個別にCSSを追加する方法

TCDはとても使いやすく作られているので、各ページに専用のCSSを追加することが出来ます。
WordPressの管理画面から「固定ページ」>「新規追加」で投稿画面へといき、そのまま下にスクロールするとこのような場所があります。

ここにCSSを記入することで、そのページだけに反映させることが出来ます。
全てのページからロゴやサイドバーがなくなったら大変なことになりますからね！

 

TCDテーマ「AVANT」の白紙LP用CSS

 

TCDテーマ「Bloom」の白紙LP用CSS

 

 

白紙ペラページ用CCSの作り方

何度も言いますが、僕は独学でやっています。
もっと効率のいいやり方もあるかと思うので、ぜひ研究してみて下さい。

まず前提として

〇〇 { display:none; }

みたいな感じに、{ display:none; }というものがあればその部分が消えます。

この〇〇に入るところが、ロゴだったりフッターだったりするわけです。
ただ、この〇〇がテーマによって違うのと、これを探すのが少し面倒なので頑張ってみましょう！

 

では例として、僕の周りでも人気のTCDテーマ「OOPS!」で試してみます。

まずはOOPS!の固定ページにいってみると、「ロゴ」「グローバルメニュー」「タイトル」「フッター」と白紙ページを作るには邪魔なものが結構あります。

ここで調べたいところをダブルクリックをし、右クリックで「検証」を開くとCSSやらHTMLやら、頭がおかしくなるような宇宙語がいっぱい並んだ画面が出てきます。

赤い矢印にある【.p-page-header】という文字が〇〇の部分になりますね。
色々と試して根気強く見つけましょう！

こんな感じで１つずつ必要のない項目を消していきます。
で、不要なものを全て消したソースコードがこちら↓

TCDテーマ「OOPS!」の白紙LP用CSS

 

まとめ

TCDテーマの白紙ペラページ作り、どうでしたか？

TCDテーマに『ページビルダー』という、最強のツールまで標準装備されています。
これはHTMLやCSSを知らなくても直感的に、自分の思うようなページが作れるというとんでもない機能です。

ぜひ白紙ペラページとページビルダーを組み合わせて、自分の描く理想のランディングページを量産して下さい。