初心者のための
WORDPRESS
完全マニュアル


このサイトでは、初心者でも簡単にできる、開発知識のいらないWORDPRESSを使ったWEBサイトの作り方を、サーバーのセットアップから、テーマのカスタマイズ方法、プラグインの使い方、SEO対策やアフィリエイトなどの実際の運営方法まで、STEP BY STEPで紹介しています。

Diviテーマ:サブチュートリアル ランディングページ(LP)のためのナビゲーションメニューの作り方 – 初心者のためのWordpress完全マニュアル

Diviテーマ:サブチュートリアル ランディングページ(LP)のためのナビゲーションメニューの作り方

November 02, 2017 / 0 Comment / 338 views

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

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

 

ランディングページ(LP)とは?

 

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

 

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

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

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

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

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

 

 

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

 

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

 

チュートリアル一覧

 



 

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

 

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

 

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

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

 

Divi ランディングページ ナビゲーション デモ

 

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

 

Divi ランディングページ ナビゲーション デモ

 

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

 

Divi ランディングページ ナビゲーション デモ

 

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

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

 

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

 

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

 

Divi ランディングページ ナビゲーション デモ

 

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

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

 

Divi ランディングページ ナビゲーション デモ

 

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

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

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

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

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

 

Divi ランディングページ ナビゲーション デモ

 

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

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

 

 

まとめ

 

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

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

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

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

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

 

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

この記事をシェアする!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です