(↑Pinterestでシェアお願いします!)

Diviテーマを使ってWordPressでホームページを作成する方法

執筆者 | 更新日 2020年08月01日 | Diviの使い方 | コメント0件

今回は世界一使われているDiviというテーマを使ってWordPressでホームページを作成する方法をご紹介いきたいと思います。

これからWordPressを使ってホームページを作っていきたいっていうふうに思っている方はこの動画を最後までご視聴いただいて、さらに実際に手を動かしながらやっていただければ確実にホームページが作成できますので是非最後までこの記事をご覧ください。おそらく1日から2日以内で完成できるはずです。

Diviでホームページを作成するのに必要なツール

今回このホームページを作成するにあたって使用していくツールっていうのが全部で3つあります。ツールと言うかサービスが3つありますのでご紹介していきます。

Diviでホームページを作成するための費用

まず1つ目についてはドメインの取得になります。

ドメインの種類によっても値段が変わってくるんですけど、だいたい年間で1000円くらいかかってきます。2点目についてはレンタルサーバーの契約っていうのをやっていきます。いろんな業者がありますが、僕が使っているレンタルサーバーだと月に1000円くらいかかります。

最後3つ目についてはタイトルにもあるようにDiviっていうテーマの契約が必要になってくるんですけど、プランが2つあります。年間プラン(毎年更新していくタイプ)の場合だと年間で89ドルかかります。一括払いのプラン(サブスクタイプではなくて一回支払ってしまえばずっと使えるっていうタイプ)だと、249ドル払えば一生使い続けることができます。

このようにDivi使ってWordPressでホームページを作成するにはプランによっても料金が変わってきますが、2万円弱かかってきますのでその点はご注意下さい。

それでは実際にステップバイステップでホームページの作り方をご紹介していきますので、実際に手を動かしながらホームページを完成させてみて下さい。

Diviでホームページを作成する手順

では、以下でステップバイステップでホームページを作成する手順をご紹介していきます。上の動画もご覧ください。

Step1. WordPressのインストール

まずステップの1では、WordPressのインストールをやっていきます。この作業にはドメインとレンタルサーバーが必要となってきます。ドメインというのは 、『YouTube.com』とか『Facebook.com 』、『Twitter.com 』みたいなアドレスのことです。家で例えるなら住所みたいなものですね。一方で、レンタルサーバーというのは土地みたいなもので、その土地にWordPressという家を建てていきます。

まずそのドメインの取得からやっていくんですけど、いろんなサイトで取得できますが今回はムームードメインというサイトでドメインの取得をやっていきます。そして、レンタルサーバーは、エックスサーバーというサービスを利用していきます。

チェック!WordPressの詳しいインストール方法は、『ムームードメインとXserverでWordPressをインストールする方法』記事でもご確認いただけます。

Step2. Diviの契約

次にステップの2ですね。Diviの契約をしていきます。DiviはElegant Themesさんという海外のサイトになるのでちょっと抵抗感がある方がいらっしゃると思いますが、上の動画の通りに契約していただければ、契約できますので、チェックしてみてください。

プランは、2種類です。「Yearly Access」は年間契約のプランで、毎年、89ドルかかります。途中で、Diviの契約をやめたいという場合があると思いますが、その場合でもずっとDiviは使えます。しかし、テーマあるいはプラグインの更新ができなくなるので、ご注意ください。

一方、「Lifetime Access」というのは、1回きり249ドル払ってしまえば、ずっとこれから更新できます。Diviとか他のプラグインもずっとこれから使えますし、更新できるようになります。その他の機能に関しては全く同じです。Diviというテーマ、それからExtraというテーマ、Bloom、それからMonarchという2つのプラグインが使えるようになります。

ちなみに、Bloomというのはオプトインフォーム(Emailアドレスを取得する専用のフォーム)が作成できるプラグインです。MonarchというのはSNSのシェアボタンを表示することができるプラグインになります。ということで3年以上使っていくというのであれば、「Lifetime Access」を最初から契約した方がいいのかなと思いますね。

チェック!Diviの契約から基本的なモジュールの使い方は、『世界一使われているWordPressテーマ・Diviの使い方』記事をご覧ください。網羅的にDiviの使い方を解説しています。

Step3. Diviのインストールとアクティベート

次にDiviの契約が終わりましたら、Diviのインストールとアクティベートの作業をしていきます。Diviをインストールするだけでも全然使うことはできるんですけど、アクティベートコードを入力することによってDiviのテーマがアップデートされた際は更新できるようになります。そのコードを入力しないとアップデートの作業ができませんので、必ずアクティベーションコードも入力しておいて下さい。

DiviのMembers Areaにログインする

まずはElegant Themesの「Members Area」に来て下さい。前回契約を終了したら直接このページにリダイレクトされるか、もしくは登録したメールアドレス宛にメールが届くとおもいます。そこにリンクが書かれていると思うので、そのリンクをクリックして「Members Area」に移動し、登録したユーザーネームとパスワードを入力してログインします。

ちなみに、Diviのテーマ以外にもDivi Builderというプラグインも使用できます。プラグインとしてDiviを使いたいというのであれば、Divi Builderを使ってみてください。その他にもExtraというマガジンのテーマですね。それとオプトインフォームが作れるBloom、SNSの拡散ボタンフォローボタンが追加できるMonarchという5つが用意されています。

Diviテーマもしくはプラグインをダウンロードする

今回はDiviをインストールしていくので、「DOWNLOAD THE DIVI THEME」というボタンをクリックし、Diviのテーマをダウンロードします。

21 Diviテーマをインストールする

次にWordPressのサイトに移動し、「外観」の「テーマ」に移動して下さい。「新規追加」から「テーマのアップロード」、「ファイルを選択」します。そして、「今すぐインストール」して「有効化」まで終わらせましょう。

WordPressでDiviのAPIキーを入力する

有効化しただけだと、アクティベートされませんので、「Divi」というタブの中にある「テーマオプション」に移動します。そして「更新情報」っていうところがありますのでこちらに切り替え、登録した「ユーザー名」と「APIキー」というのを入力していきます。

Members Areaの「MY ACCOUNT」で「API KEYS」タブに切り替える

ユーザー名は、契約した際のものでOKですが、APIキーは「Members Area」に戻り「MY ACCOUNT」にタブを切り替えて下さい。そしたら「API KEYS」というタブがあるのでこちらに切り替えます。

20 DiviのAPIキーを取得する

あとは、「GENERATE NEW API KEY」ボタンをクリックして、APIキーを生成します。そして、WordPressに戻って、コピーしたキーを入力し、「変更を保存」しましょう。これで、Diviがアップデートされると、更新できるようになります。

Step4. トップページの作成

Divi トップページ scaled

ここから実際にページの作成に入ってきます。まずはトップページの作成です。サイトの一番最初のページ、一番最初に見ていただくページを作成していきます。今回はテンプレートの文章をちょっとアレンジして、上の画像のページを作成しました。タイトルとかボタンの文言だけを日本語に変更しているんですけど、外観としてはこんなページを作成していきます。

01 固定ページでトップページを作成する e1596202002382

まず「固定ページ」で「新規追加」します。

02 トップページの名前をつけ「Diviビルダーを使う」

そして、名前を付け、「Diviビルダーを使う」という紫のボタンをクリックします。

03 Diviでトップページのテンプレートを選択する

ポップアップが表示されたら、「レイアウトを選択」を選び、好きなテンプレートを選択しましょう。今回、僕は「Copywriter」というテンプレートを使用しました。そのテンプレートも、全部で9種類あります。用途に合わせて作られていますので、今後、トップページであれば、「Home」を選ぶと良いです。どのテンプレートを使うか選んだら、「Use This Layout」ボタンをクリックすれば、ページが生成されます。

04 「フロントエンドで構築する」ボタンをクリックする

この後は、ダッシュボードでそれぞれのセクションをダブルクリックして文章を変更していっても良いですが、ビジュアルビルダーで編集することをお勧めします。その場合は、「フロントエンドで構築する」ボタンをクリックしましょう。ビジュアルエディターであれば、直感的に編集することができるとおもいます。ただし、デフォルトの文章が英語になっているので、分からない場合はGoogle翻訳とかを使いながらどういうこと書けばいいのかをチェックしてみて下さい。

05 トップで企業名を記入する

まずは、トップの部分を編集していきます。適当な位置でクリックすれば、アイコンが表示されるので、グレーのギアのアイコンをクリックします。すると、テキストの編集画面が表示されますので、企業の名前などを記入します。また、デフォルトで「H2」タグが使われているのでこれを「H1」に変更します。

それから、文章の色を変えたいとか、文字の大きさを変更したい場合は「デザイン」に移動し、「小見出しのテキスト」を開きます。そこで「H1」タグを開いた状態で、「テキスト」で色を変更してみて下さい。その下にある「見出し文字サイズ」では、文字の大きさが調節できます。

Diviでボタンの文言の変更

次に下のボタンについてはここで「サービスの概要」とか「サービスの内容を確認する」というような言語を記入しておきます。もちろん、そのサイトの目的などによって異なってくると思いますが、今回はこのテンプレート通りに作っていきたいと思います。

06 トップの背景画像を変更する

1つ目のセクションの背景に画像が埋め込まれていますが、これはセクションの適当な位置で1回クリックし、青いギアのアイコンをクリックして、「背景」を開きます。そうすると、「背景」で画像が変更できます。

Diviで背景画像の設定をする

それから「背景画像サイズ」というところで「カバー」タイプなのか「Fit」なのかを選ぶことができますが、「カバー」に設定しておくと良いと思います。

スクリーンショット 2020 07 31 22.43.02

色やグラデーションでは、背景の色が設定できますが、オーバーレイの色も設定が可能です。例えば、わかりやすいように赤を選択して、もう一度画像に切り替えます。

オーバーレイの色を設定する

一番下の「背景画像のブレンド」で設定した色と組み合わせることができます。通常が一番いいのかなとは思いますが、このように色をブレンドすることもできるので覚えておいて下さい。

それから、背景だけではなく、セクションの下の部分がちょっと斜めになっていますが、それは「デザイン」の「ディバイダー」というところで設定できます。「トップ」と「ボトム」というのがあり、トップはセクションの上の部分の仕切りが設定できます。ボトムだとセクションの一番下のところの仕切りのスタイルが変更できますので、好きなタイプを選択しましょう。もちろん、何も設定しなくてもOKです。

サービス一覧の見出しを変更する

次に、2つ目のセクション、提供サービスの部分を変更していきます。ここも同じように「サービス一覧」という見出しを作ります。

広告モジュールの設定をする

その下では全部同じ広告モジュールが使われているので、設定は全て同じです。ギアのアイコンをクリックして、「タイトル」でサービスの名称、その下で、サービスの細かい説明を追加しています。

スクリーンショット 2020 07 31 22.39.15

アイコンは、コンテンツの「イメージとアイコン」というところで、アイコンを使用するかどうかまず決めます。使用したくない場合は「いいえ」に切り替えて下さい。表示する場合は「はい」を選択して、その下で好きなアイコンを選びましょう。

スクリーンショット 2020 07 31 22.39.48

あとは、ボタンの文言の変更と、リンクを追加すればセクションの2つ目は完成です。

Divi トップページ3セクション目

3つ目のセクションでは、オレンジの部分は見出しと文章が入っているだけなので、それぞれテキストを入力して完了です。

08 セクション3の背景色を設定する

背景に関しては、今回はセクション全体ではなく、緑のカラムの部分を設定していきます。緑のギアのアイコンをクリックして、列が2つありますが、右側を設定する場合は下の部分を開き、色を設定します。左側の背景はちょっと特殊な画像が追加されています。同じような画像を作成したいのであれば、Canvaなどのツールを使って画像を作成し、追加してみて下さい。

09 Canvaで背景画像を作成する

作り方は非常に簡単で、「プレゼンテーション」の大きさで作成すると良いと思います。キャンバスで背景に写真を挿入したら、「素材」で四角形の図形を追加します。あとは、好みに合わせて角度や大きさを整えて完成です。終わったら、右上のダウンロードボタンから画像をダウンロードして、背景に挿入しましょう。

10 お問い合わせフォームのタイトルを変更する

じゃあ最後に、お問い合わせフォームの作り方、編集方法をご紹介していきます。ギアアイコンをクリックすると、デフォルトで4つのフィールドが設定されています。Name(名前)とEmail Address(Eメールアドレス)、Subject(件名)、Message(内容)を記入する欄が設けられています。それぞれのギアアイコンをクリックして、「タイトル」で4つのフィールドの名前を変更していきます。

件名のフィールドオプションを設定する

件名は、ドロップダウンになっていますが、お客さんに記入してもらうタイプではなく、トピックを選んでもらう形式にするのであれば、「フィールドオプション」で設定できます。コンサルティングに関するお問い合わせなのか、それともブログライティングに関するお問い合わせはなのか、コピーライティング関するお問い合わせなのかみたいに選択してもらうことができます。

「オプション」でお問い合わせのトピックを記入しましょう。必要がない場合はゴミ箱アイコンで、複製したい場合はゴミ箱アイコンの左にあるアイコンをクリックしてコピーすることができます。プラスボタンから追加してもどちらでもOKです。一番下にある「必須のフィールド」では、記入が必須ということを意味します。つまり、この件名というところを空欄にした状態でこの「提出」ボタンを押してもフォームが提出されません。

お問い合わせモジュールの「テキスト」を設定する

このボタンのところは「テキスト」というところで「送信」とか「提出」という文言を入力しておきます。「成功したメッセージ」に関しては、無事にこのフォームが提出された後に、どういうメッセージを表示するのかを設定します。何も表示しない場合はデフォルトのままでOKですが、例えば『お問い合わせありがとうございます。2営業日以内にご返信いたします。』みたいな文言を記入してみると良いかもしれません。

お問い合わせモジュールの「転送」設定をする

「転送」というのは、リダイレクトを意味します。お客さんにフォームを提出してもらったら、別のページに飛ばしたいのであれば、「はい」に切り替えて、「リダイレクトURL」に、その飛ばしたい先のページのURLを入力します。例えば、「example.com」というリンクを入力すると、お客さんがこのフォームを提出した後に、自動的にこの「example.com」のページにリダイレクトされます。

CSS IDを設定する

サービスの内容を確認するというボタンでは、通常のURLを入力してもOKですが、同じページの「サービス一覧」のセクションに飛ばしたいのであれば、「サービス一覧」のセクションを開いて、「詳細」の「CSS ID」で英語のテキストを入力します。

ボタンリンクにCSS IDのテキストを入力する

そして、そのテキストをコピーし、ボタンのリンクにそのテキストを貼り付けます。この時、

11 ページ内ジャンプの設定をする

そうすると、スクロールをせずに、ボタンをクリックするだけで、サービス一覧のセクションまで飛ぶことができます。

12 トップページを公開する

編集が終わったら、ページ下にある紫のボタンをクリックして、ページを「公開」してしまってください。

トップページをホームページとして設定する

そしたら、WordPressのダッシュボードに戻って、「設定」の「表示設定」に移動します。デフォルトで「最新の投稿」にチェックが入っていると思うので、「固定ページ」に切り替えて「ホームページ」で作成したトップページを選択します。そうすると、デフォルトでは記事の一覧が表示されていたと思いますが、作成したトップページが表示されるようになります。

Step5. 企業概要ページ

Divi 企業概要ページ scaled

次に、企業概要ページ、あるいはプロフィールページを作成していきます。トップページと同様に、テンプレートを使って作成していくので、それほど難しくはありません。外観は、上の画像の通りです。通常の文章とか、ボタンの変更とかは飛ばしていきます。トップページでご紹介していない部分を中心にご紹介していきます。

まずは、「固定ページ」の「新規追加」から企業概要ページ・プロフィールページを新規作成しましょう。今回も「レイアウト選択」を選んでテンプレートを持ってきます。企業概要、プロフィールページなので、「About」と記載されたテンプレートを選ぶことをおすすめします。テンプレートを選んだら、「フロントエンドで構築」していきます。

数カウンターモジュールの変更

トップページとかぶる部分は飛ばしてしまうので、「数カウンター」というモジュールが使われている部分からご紹介します。カウントアップ形式で数がアクションが追加されているんですけどカウントアップして数を表示してくれるモジュールです。「タイトル」で下に表示される文言を変更し、あとは「数字」を設定しましょう。例えば、「クライアント数」とか「作成した記事の数」、「携わったプロジェクトの数」などを設定してみてください。

数カウンターモジュールのボーダーを設定する

それから、左のバーについてですが、これは「デザイン」の「境界」で設定できます。基本的には、「ボーダー幅」でボーダーの太さを調節、「ボーダーカラー」で色を変更すればOKだと思います。

ユーザーの感想モジュールを設定する

下にお客さんのレビューがありますが、これは、「ユーザーの感想」というモジュールを追加して、僕の方でアレンジしました。デフォルトだと追加されていませんでしたが、レビューを載せた方がより、購入率、コンバージョンが上がるので、おすすめです。「著者」のところで名前を入力して、レビュー本文を「ボディ」で入力してみて下さい。

ユーザーの感想の画像

お客さんの顔写真の変更は、「画像」で行えます。

13 レビューの背景の設定

また、デフォルトだと背景がちょっとグレーになっているので、ページの背景とバランスが悪いという場合は「背景」を白にしてみてください。あとは、枠をつけたいのであれば、「デザイン」の「境界」で「ボーダー幅」を設定してみてください。「1」か「2」で十分じゃないかなと思います。

「要素」で引用アイコンを非表示にする

吹き出しのアイコンが必要ない場合は「コンテンツ」の「要素」で「引用アイコン」があるので、「いいえ」に切り替えます。そうすると非表示になります。今回はレビューを2つ追加していますが、お客さんのレビューの数だけ、複製して設定してみてください。

セクション3

3つ目のセクションは、背景にトップページでCanvaを使って画像を作成しましたが、それと同じように半分が白くなっている画像が追加されています。必要があれば、同じ手順で画像を作成してみてください。あとは、テキストの変更くらいしかありませんので、次に移ります。

14 バーカウンターの設定

4つ目のセクションでは、右半分のバーカウンターモジュールの設定をご紹介していきます。ギアのアイコンクリックすると「タイトル」と「パーセント」が設定できるようになっています。そして[パーセント]を入力します。

15 バーカウンターの「割合を表示」設定

文言とかパーセンテージの設定が終わったら、「要素」に移動します。デフォルトで「割合を表示」が「オフ」になっていますが、「オン」にすると、先ほど設定したパーセンテージが表示されます。

Step6. お問い合わせページを作成する

Divi お問い合わせページ scaled

次はこのようなお問い合わせページを作成していきます。今回も同じように、これまでにご紹介している部分や簡単な箇所は説明を省き、一番下に表示している地図の使い方を中心にご紹介していきます。では、いつものように、「固定ページ」でページを新規作成します。そしたら「Diviビルダーを使う」で、テンプレートを選択しましょう。今回は、「Copywriter」の「Contact」というテンプレートを使っていきます。