いつも初心者のためのWordpress完全マニュアルをご覧いただきありがとうございます。

今回は、このブログにて何度も取り上げているWordpressの人気テーマ、【Diviテーマ】を使ったランディングページ(LP)の作り方についてご紹介したいと思います。

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

最近よく耳にするランディングページという言葉ですが、一体全体ランディングページとは何？と疑問に思われている方もいるかと思います。
ランディングページとは、訪問者が検索エンジンや広告を通して最初に着地するページのことを指します。
最近のオンラインビジネスではよく目にする手法で、ランディングページは１枚の長いウェブサイトのことを指し、閲覧者にスクロールダウンさせてコンテンツを読ませることにより、ウェブサイトからの離脱を防ぐとともに、閲覧者の購買意欲を促進するため、高いコンバーションの獲得に効果があります。
この記事では、具体的なコンテンツ・デザイン戦略のやり方については省かせていただきますが、興味のある方は、【ランディングページ】または【LPページ】などで検索すると、色々なサンプル例やマーケット戦略などが見つかるかと思いますので、ぜひチェックしてみてください^^

このサイトでメインに紹介しているDiviテーマですが、Diviテーマではウェブ制作知識や経験がなくても、ほぼCSSなしのコードなしで自分の思い通りのウェブサイトをスクラッチから作ることができます。

もちろんランディングページを作成することも可能です。今回のチュートリアルでは、ランディングページのためのナビゲーションメニューの作り方についてご紹介していきたいと思います。

具体的にどのようなことかというと、上記に述べたようにランディングページとは一枚の長いウェブサイトのことを指します。しかしナビゲーションメニューを設置することによって、読者が興味のある特定のコンテンツ部分にジャンプすることができます。

例えば、このウェブサイトは複数のページで構成されていますが、ナビゲーションメニューの【Wordpressが選ばれる理由】というメニューをクリックすると、トップページの【Why WordPress?】という部分にジャンプするかと思います。

今回のチュートリアルでは、このナビゲーションメニューを作成する方法についてご紹介したいと思います。

Divi基本操作チュートリアルシリーズ

Diviテーマ Step By Stepチュートリアル サンプルデザイン: http://dividemotemp.wpbeginnertutorial.com/
Diviテーマの購入はこちら: https://www.elegantthemes.com

チュートリアル一覧

• Step1: テーマのセットアップ
• Step2: ランディングページ・ナビゲーションメニューの作成
• Step3: コラム・広告モジュールの使い方
• Step4: メンバープロフィールの作り方
• Step5: カウンターの設置方法
• Step6: 価格表モジュールの使い方
• Step7: コンタクトフォームの作り方
• Step8: Google Mapの挿入とFooterの作り方

ナビゲーションメニュー（LP用）の作り方

セクションにIDを挿入する

今回はサンプルとして、Diviの基本操作チュートリアルで使用したこちらのサンプルサイトのトップページにあるコンタンクフォームにジャンプするためのナビゲーションメニューを作成したいと思います。

まずはいつものようにDiviビジュアルビルダーを立ち上げます。

次にリンク先のセクションの設定画面を開きます。

セクションの設定画面を開いたら、詳細タブをクリックして、CSS IDの欄に好きな名前をアルファベットで入力します。今回は例として、【contact-us】と記入しています。

記入したら、設定を保存して、セクション設定画面を閉じ、ビジュアルビルダーを閉じます。

ビジュアルビルダーでの作業はこれだけです^^

ナビゲーションにリンクメニューを追加する

次にWordpressのダッシュボードにいき、外観>>メニューの順にクリックします。

次にメインメニューを選択して、左サイドバーにあるカスタムリンクをクリックします。

メインメニューを新規作成する場合は、新規メニューを作成をクリックし、メニュー設定>>メニュー位置のメインメニューにチェックを入れてください。

カスタムリンクすると、URLを記入する欄があるので、デフォルトで入っているhttp://を削除し、先ほどIDに入れた名前を#の後に記入します。

例) Idが「contact-us」の場合 → #contact-us

※当ウェブサイトのように、複数のページで構成されているウェブサイトの場合は、#の前にウェブサイトのURLを入れてください。

例）サイトのURLが「https://yukifel-divitutorial.com/」の場合　→　https://yukifel-divitutorial.com/#contact-us

リンク文字列には、好きなメニュー名を入力します。

メニューを保存をクリックしたら、作業は終了です。

ウェブサイトに戻って、新しくナビゲーションに追加されたContact Usというメニューをクリックすると、トップページのコンタクトフォームのセクションにジャンプできるようになりました。

まとめ

今回のチュートリアルいかがだったでしょうか？

このリンクメニューは、ランディングページだけではなく、普通のウェブサイトにもインデックスがわりとして使えるので、なかなか便利です^^

このサイトのナビゲーションメニューのいくつかにも使用されています。

今回のチュートリアルの中でわからなかったことや質問等ございましたら、お気軽にお問い合わせください。

またWordpressに関するテーマやプラグインのチュートリアルリクエストも大感激しています。

それではまた次回のチュートリアルでお会いしましょう！ See you later<3