今回は Divi を使ったサイト( Webページ )作成練習の続きとして、サイトに写真ギャラリーと、自己紹介と、連絡先情報のページを追加で作成します。
ワードプレス Divi の使い方3
レイアウトを使ったWebページ作成2
3.写真ギャラリーのページ Photo Gallery を作成する
1)固定ページの新規追加をする:Gallery
![]() | ワードプレスのダッシュボードの「固定ページ」>「新規追加」をクリックします。 |
![]() | 「タイトルを追加」にページのタイトルとする「 Photo Gallery 」と入力します。 |
Divi をインストールしていると、ページの編集時に Divi Builder を使うかときかれるので「 Use Divi Builder 」をクリックします。
2)Browse Layouts を使いレイアウトを選択する:Gallery
(1) Browse Layouts をクリックする
Use Divi Builder をクリックすると下記のようにパネルが表示されます。レイアウトを使ってサイトを構築するので、真ん中の「 Browse Layouts 」をクリックします。
(2) レイアウトを選択する
レイアウトライブラリからレイアウトを選択します。続きでの作成ですから、レイアウトライブラリから「 Fashion 」を選択します。
下図のように詳細が表示されます。今回は写真ギャラリーを作成するので、並んでいるアイコンから「 Gallery 」を選択します。これでよければ「 Use This Layout 」をクリックします。すでに前のページで Elegant Themes の認証が完了しているのでダウンロードがはじまります。
ダウンロードが完了すると、サンプルの写真がレイアウトされた状態で写真ギャラリーのページができあがります。
(3) 写真の変更を行う
すでに前のページで写真の変更手順は伝えました。それと同様の操作にて変更を行いましょう。
![]() | 「✔(チェックマーク)」をクリックして承認します。 |
画像設定のパネルが表示されるので、画像をクリックします。
メディアライブラリが開かれるので、ファイルをアップロードで写真を追加し、追加した写真を選択した状態で「画像をアップロードする」をクリックします。
写真が変更され、ギャラリーの写真の配置が自動で調整されます。「✔(チェックマーク)」をクリックし承認します。
同様の操作にて、写真を順次変更しましょう。上部にあるテキストも「 Photo Gallery 」に変更しましょう。
![]() | 一旦「下書きを保存」をクリックし保存します。 |
4.自己紹介( About )のページを作成する
1)固定ページの新規追加をする:About
上記で説明した方法で固定ページに自己紹介のためのページを追加し、タイトルを「 About 」とします。 Divi Builder を使うので「 Use Divi Builder 」をクリックします。
2)Browse Layouts を使いレイアウトを選択する:About
上記で説明した方法で、今度は「 About 」のレイアウトを選択します。
(1) Browse Layouts をクリックする
(2) レイアウトを選択する
今回は自己紹介のページを作成するので、並んでいるアイコンから「 About 」を選択します。これでよければ「 Use This Layout 」をクリックします。すでに前のページで Elegant Themes の認証が完了しているのでダウンロードがはじまります。
ダウンロードが終わると、下記のページが表示されます。ページの内容を自分の自己紹介に置き換えていきましょう。
(3) 文字列を編集する:テキストモジュールの設定
![]() | 文字列の編集をするには、そのモジュールの灰色の「⚙(歯車)」をクリックし設定パネルを開きます。 |
テキスト設定でコンテンツの文字列を変更し「✔(チェックマーク)」をクリックし承認します。あるいは、文字列をクリックしカーソルを表示させ直接変更することも可能です。
(4) 写真を編集する:写真モジュールの設定
上記ですでに説明した方法で写真モジュールの設定を変更しましょう。
(5) 必要のないセクションを削除する
必要のないセクションは削除します。
![]() | セクションの削除は青枠のゴミ箱のアイコンをクリックします。 |
レイアウトを利用すると、以上の簡単な操作のみで簡単に「 About (自己紹介)」ページを作成することができます。
5.連絡先情報( Contact )のページを作成する
1)固定ページの新規追加をする:Contact
上記で説明した方法で固定ページに連絡先情報ためのページを追加し、タイトルを「 Contact 」とします。 Divi Builder を使うので「 Use Divi Builder 」をクリックします。
2)Browse Layouts を使いレイアウトを選択する:Contact
(1) Browse Layouts をクリックする
(2) レイアウトを選択する
今回は連絡先情報のページを作成するので、並んでいるアイコンから「 Contact 」を選択します。これでよければ「 Use This Layout 」をクリックします。すでに前のページで Elegant Themes の認証が完了しているのでダウンロードがはじまります。
ダウンロードが終わると、連絡先情報のページが作成されます。この「 Contact 」のページで大きく違うのは、下記の赤枠の地図のモジュールがあることと、その下のメールフォームのモジュールがあることです。この項では、その2点について解説しましょう。
3)地図の場所を編集する:地図モジュールの設定
(1) Google Maps Platform APIキーの設定
Divi 上で地図の場所を検索して設定するには、Divi テーマに Google Maps Platform の APIキーを設定することが必要です。
![]() | 地図モジュールの「モジュールの設定(⚙)」をクリックします。 |
表示される地図モジュールの「地図」をクリックすると、Google のAPIキーを入力する画面になります。Google Maps を利用しているので、 APIキーを入力した上での使用が想定されています。
![]() | 正しく設定して入力しないと下記のような、成功しませんでしたとのエラーメッセージが出ます。 |
上記の地図モジュールの設定画面で「APIキーを変更」をクリックすると、別ウィンドウで下記のように「Divi テーマオプション」の画面が表示されます。(※ Google の APIキーをまだ取得していない場合は先に「 ジオコードは、以下の理由により成功しませんでした: REQUEST_DENIED の対処方法 」を参考に取得ください)
![]() | ずっと下に降りていくとGoogle APIキーの入力枠があるので、そこに Google Maps Platform の APIキーを入力します。 |
![]() | Divi テーマオプションの「変更を保存」をクリックします。 |
Divi テーマを変更したら、一旦投稿の編集画面を閉じて開きなおすと、変更が反映されます。
![]() | 投稿の編集画面を開きなおして再度地図モジュールの設定パネルを表示すると、APIキーが反映されているのが確認できます。 |
APIキーが反映されていると、「地図の中心の住所」に検索したい住所を入力して検索することで、地図の場所を移動できるようになります。
(2) 地図で表示させたい場所を検索し設定する
Divi の初期設定では、地図はアメリカのある地点を指しています。変更しましょう。
![]() | 「地図の中心の住所」に場所を入力し「検索」をクリックします。すると地図モジュールの小さな枠の地図が移動します。 |
地図モジュールの地図の場所が移動するのに合わせて、サイトに表示させている地図の場所も移動するのがわかります。モジュールの地図を拡大縮小すると、それに合わせてサイトの地図の拡大率も変わります。設定したい場所、拡大率に変更しましょう。
(3) 場所に PIN を設定する
PIN とは地図に表示させられる下記のような目印のことです。地図を表示させるだけでなく、目印も置いておく方が、訪問者が場所の判断を行いやすくなります。
地図モジュール(フルワイド地図)の設定画面を表示すると、「新しい PIN 」が表示されています。
![]() | ゴミ箱のアイコンをクリックすると削除です。編集するには PIN の「⚙(歯車)」のアイコンをクリックします。 |
関係ない場所を表示していると思うので場所を変更しましょう。 「⚙(歯車)」のアイコンをクリックします。
「ピン設定」のパネルが表示されるので、 PIN に目印となるタイトルやメディアをつけることもできます。
![]() | ですが個人で利用する場合はそんなに多くの PIN を設定することもないでしょうから、今回はそのままで変更しません。 |
コンテンツの内容を下にスクロールすると、「地図」の項があります。
![]() | 「地図ピンの住所」を入力するパネルが表示されるので、枠に住所を入力し「検索」をクリックします。 |
PIN の位置が移動されました。確定するには「✔(チェックマーク)」をクリックし承認します。ちなみに、赤の×ボタンは「キャンセル」、紫の左回転の矢印は「戻る」、青の右回転の矢印は「進む」を意味します。行った編集内容を戻したり進めたりできます。Divi は操作に統一感があり直感的に操作が可能ですね。
日本語でも、英語でも検索が可能です。
4)コンタクトフォームを設定する:お問い合わせフォームモジュール
続いて、コンタクトフォーム(お問い合わせフォームモジュール)の設定を行います。
(1) お問い合わせフォームモジュールの設定を変更する
![]() | モジュールの設定を変更するには灰色の「⚙(歯車)」のアイコンをクリックします。 |
![]() | お問い合わせフォームモジュールのコンテンツ(構成要素)がリストとなり表示されます。複数のコンテンツがあるのがわかります。 編集するには「⚙(歯車)」のアイコンをクリックします。 |
フィールドIDは、コンテンツの目印となるIDです。一意(同じものはひとつしかない状態)となるように設定します。特に変更の必要がないのでそのままにします。
![]() | タイトルが表示されているのですが、 First Name だと英語なので、日本語の「姓」に変更しましょう。 設定したら承認「✔(チェックマーク)」をクリックします。 |
(2) フォームモジュールを追加する
![]() | お問い合わせフォームに項目を追加するには「+」をクリックします。 |
![]() | フィールドの設定で、IDとタイトルを入力します。IDは一意となるようにします。 最初、フィールドはテキスト入力用の入力フィールドとして設定されています。 |
(3) フィールドオプションを変更する
![]() | フィールドオプションを変更するには「フィールドオプション」をクリックして表示します。 |
(4) フィールドの種類を変更する
フィールドオプションで、種類「入力フィールド」とあるところをクリックすると種類を変更できます。
![]() |
から選ぶことができます。 |
(5) フィールドの入力を必須とする
フォームモジュールの各項目入力を必須とするには、
![]() | フィールドオプションの中にある「必須のフィールド」に「はい」を選びます。 |
(6) フィールドの種類:Checkboxes
![]() | 種類に「Checkboxes(チェックボックス)」を選ぶと、そのチェックする内容の編集画面に切り替わります。 新しいフィールドと表示されるので、文字列をクリックすると、文字の変更が可能です。 |
チェック項目は複数設置可能です。「+」をクリックすると項目が追加されます。
![]() | 「十字矢印」アイコンをクリックしながらドラッグ&ドロップでの並べ替えもできます。削除は「ゴミ箱」のアイコンです。 決まったら、承認「✔(チェックマーク)」をクリックし確定します。 |
チェックボックスがお問い合わせフォームモジュールに配置されます。
これらの機能を組み合わせることで、別のプラグインを用意することなく Divi の機能でお問い合わせフォームを設置できます。
続いて、作成したページの公開と、トップページからのリンクを設定します。
続きは「ワードプレステーマ Diviの使い方3 レイアウトを使ったWebページ作成3」で解説します。

ワードプレス Divi レッスン Diviの使い方図解
写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。
You caan ԁefinitely ѕee yⲟur expertise in the work yyou write.
The wоrld hopes fⲟr even morе passionate writers ѕuch aѕ үou who aren’t afraid to mention һow thеy belieѵe.
All tһe time follow your heart.
Thank you for visiting.