DiverのLP機能を使わずにカラフル同様にランディングページを作る裏技【簡単】

どうもたふいです（@akituki_zidouka）

WordPressでどんなテーマにすべきか？迷っていたり、ランディングページを簡単に作れるWordpressテーマは無いかな？って悩んでいませんか？

私はストーク・アフィンガー・Diverと使ってきましたが、LP（ランディングページ）を作るのであれば圧倒的にDiverをオススメします！

理由はいくつかあるのですが、一番はランディングページ作成ツールのcolorful（カラフル）と同じようにDiverでも作れるから。

この方法を使うと、マジでカラフル要らなくなります・・・

ショボって思った方はさておき、これくらいであればこの記事の通りに出来ますよ。

今回はDiverを検討しているけど、LPってちゃんと作れるのかな・・・って不安になっている方向けに、実際に私が作成したLPを紹介しながら解説していきますね。

前提：DiverのLP機能を使わない！理由は2つある

まずこの記事で紹介するDiverのLP作成に、Diverの標準機能のLP作成ツールは一切使用しません！

は？って思うかも知れませんが、本当に使いにくいんですよ。理由は2つ。

基本的にDiverで作成するLP（ランディングページ）は記事を書く要領でOKです。

よってサブヘッドと言われるような物は、h2で作ればOKですし、見出しの文字を大きくしたいのであれば文字フォント数を大きくすれば良いだけです。

ただ、Diverの素晴らしい点？でもあるヘッダー画像をPCとスマホ版で用意するのって大変じゃ無いですか？

確かにスマホ版とPC版で作れるのは魅力的です。

ただ多くの人はヘッダー画像を外注化して居る人も多く、余計に費用が掛かってしまう為、反ってLPを作る敷居を上げてしまう事になります。

一方のカラフルなんて一瞬で作れますよね（笑）

ただ機能としては嬉しいので、最悪は作れば良いだけの話なのですが・・・・

個人的に次の設定がマジで許せなかった

DiverのLP機能は使えなくなった！ある設定

既にDiverを使用前のドメインでカラフル使用時のWordpress構築にて「https://ドメイン名/lp」と作ってしまった人へ・・・・

残念ですが、DiverのLP設定機能が使えません。

理由はDiverで作成したLPツールのURLが「https://ドメイン名/lp/パーマリンク（記事名）」になってしまい、lpというサブディレクトリ名がかぶってしまうのです。

故にDiverで作成したLPである「https://ドメイン名/lp/パーマリンク」は、カラフル構築時の「https://ドメイン名/lp」にランディングページが保管されていません。

必ず404エラーで反ってきます。

マジで盲点でした。

折角作成したLPもこのままだと台無しです。

既にカラフル用のサブディレクトリをlpで構築しているは注意してください。

でもそんなんじゃカラフルを持っている方は困りますよね・・・

そこで次にDiverでカラフル同様にLPを作る裏技を解説していきます。

DiverでLP（ランディングページ）は何処でつくるべき？

結論からいうと、Diverの固定ページにてLP（ランディングページ）を作る事です。

Diverの機能がそのまま使える以外にもメリットは3つ

ランディングページは、商品購入する事で得られる未来や、悩み解決・商品比較を書く場所。

つまり他のページや要らないサイドバーの情報見せる必要はないので、ワンカラムにする事が大事。

レイアウト設定にサイドバー非表示にチェック入れるだけで、簡単にワンカラムになります！

簡単にできますよね♪

noflow設定によるメリットとは、全てのページにて作成したLP（ランディングページ）に誘引する場合、内部リンクを使う必要がありますが・・・

内部リンクを使う＝記事が持つSEOの評価を分け与える事に直結するためSEO対策的にはよろしくないわけですね。

そこでリンク先に評価を渡さないnoflowタグを使う事で、仮に全ての記事にLP誘因の内部リンクを張ったとしても、評価を分け与えなくて済むわけです。

最後に回遊率の件ですが、カラフルを使う＝外部リンクに飛ばす事になるので離脱という扱いになります。

これでは記事単体の直帰率も増えてしまいますので、直帰率を下げたい人に取ってはよろしくはありません。

ただ、固定ページを使う＝別の記事に飛んでくれたという扱いになります。

故に直帰率が増えるって事はありません。

それではカラフル同様にDiverでも簡単に作る方法を紹介します。

DiverのLPをカラフル（colorful）同様に作る裏技とは

結論から言うと、CSSにてワイドを900PXにする事です。

DiverのLPツールが使いにくい！と上げたのは、コンテンツ幅にバラツキが出るからなんですよね・・・

その証拠にスマホとPCではアイキャッチの画像の大きさが変わりますし、故に文章のレイアウトも変えないといけないのは大変。

やり方は凄く簡単で、カスタムCSSに以下のコードを入力するだけです。（コピペOK）

#main-wrap #single-main.full, #main-wrap #page-main.full {
    max-width: 900px;
}

なぜ900PXかというと、カラフルのMAX幅が900PXまでだから。

故にカラフル同様にランディングページを作るのであれば、MAX幅を900PXに併せることで、カラフルに使用していた画像をそのまま使い回すことが可能になるのです。

これが裏技。

DiverのLP作成ツールで作るよりも超簡単になるのでオススメですよ！

LPにブレット追加・一部2カラムにする方法は？

カラフルと言えばブレットの作りやすさが良いですよね。

ただDiverの入力補助⇒囲い枠⇒リストを使う事で、簡単にブレットって作れるですよ。

こんな感じで

あとは一部2カラムしたい場合は入力補助⇒グリッドレイアウトを選択

ここで設定すると、2カラムに分かれた点線が出てきますので、以下の画像のようにつくればOKです。

実際に作ったので、スマホ版とPC版で比べていただくのが一番分かりやすいと思います。

おそらくPCで見ると2カラムになっていますが、スマホで見ると画像が上・文章が下の1カラムになっているはずです。

カラフルの方が簡単にできるのは否めませんが、Diverでも同じ事が出来ますのでご安心くださいね。

まとめ：カラフルが不要になるくらいDiverの固定ページLPは使いやすいです。

私はDiverに出会う前にLPツールを「メビウス（クソ）・シリウス・アフィンガー・カラフル」と使ってきて圧倒的にカラフルが使いやすかった！

ただ、同時に以下の3つで悩んでいたんですよね・・・・

しかし、Diverの固定ページで作ったLPはこれらの悩みを全て解決することが出来ます。

よって