今回は 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) フィールドの種類を変更する

フィールドオプションで、種類「入力フィールド」とあるところをクリックすると種類を変更できます。

  • 入力フィールド
  • Eメール
  • テキストエリア
  • チェックボックス
  • ラジオボタン
  • ドロップダウンリスト

から選ぶことができます。

(5) フィールドの入力を必須とする

フォームモジュールの各項目入力を必須とするには、

フィールドオプションの中にある「必須のフィールド」に「はい」を選びます。
(6) フィールドの種類:Checkboxes

種類に「Checkboxes(チェックボックス)」を選ぶと、そのチェックする内容の編集画面に切り替わります。

新しいフィールドと表示されるので、文字列をクリックすると、文字の変更が可能です。

チェック項目は複数設置可能です。「+」をクリックすると項目が追加されます。

「十字矢印」アイコンをクリックしながらドラッグ&ドロップでの並べ替えもできます。削除は「ゴミ箱」のアイコンです。

決まったら、承認「✔(チェックマーク)」をクリックし確定します。

チェックボックスがお問い合わせフォームモジュールに配置されます。

これらの機能を組み合わせることで、別のプラグインを用意することなく Divi の機能でお問い合わせフォームを設置できます。

続いて、作成したページの公開と、トップページからのリンクを設定します。

続きは「ワードプレステーマ Diviの使い方3 レイアウトを使ったWebページ作成3」で解説します。

ワードプレステーマ Diviの使い方3 レイアウトを使ったWebページ作成3

ワードプレス Divi レッスン Diviの使い方図解

写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。

divi-tips-before-after-images-logo

Diviチップス Before + After Images のインストール

ワードプレス(WordPress)で作成している Web サイトで、写真や画像の分割比較表示をしたくなった場合に、便利なプラグインとして「TwentyTwenty」があります。...
divi-lesson6-logo

ワードプレス Diviの使い方6 設定でデザインできる共通項目と固有項目

Divi Builder の設定のデザインタブで設定できる項目として、セクションの...

Diviモジュールの設定方法8 トグルとアコーディオン

今回は Diviの各種モジュールのうちから「トグル」と「アコーディオン」のモジュールの使い方について、Divi初心者向けに図解したいと思います。...
Divi-lesson9-logo

Divi レッスン9 テーマのオプションのおすすめ設定

Divi でサイトを作成したら、ぜひオプション設定も変更しましょう。Divi...

Pin It on Pinterest