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

今回は一連の流れで、実際のサイト（ Webページ ）の作成を行ってみましょう。作るサイトは写真家のサイトということにしましょう。 Divi はレイアウトライブラリのデザインテンプレートを使って簡単にサイトの作成を行えます。レイアウトライブラリには数多くのテンプレートが登録されています。

作成するサイトはトップページ（ Landing ）の下に、説明ページ（ About ）、連絡先情報（ Contact ）、写真ギャラリーページ（ Gallery ）の３つが存在するサイトにしようと思います。下記のイメージです。

早速、トップページ（ Landing ）を作成しましょう。

Divi をインストールしていると、ページの編集時に Divi Builder を使うかときかれるので「 Use Divi Builder 」をクリックします。

Use Divi Builder をクリックすると下記のようにパネルが表示されます。レイアウトを使ってサイトを構築するので、真ん中の「 Browse Layouts 」をクリックします。

レイアウトライブラリからレイアウトを選択します。写真家のサイトの作成を目標としているので、左の Categories の「 Art ＆ Design 」にチェックを入れます。表示されるレイアウトのうち「 Fashion 」がギャラリーページもあって作成するサイトのイメージに合いそうです。クリックするとページの詳細が表示されます。

下図のようにレイアウトの詳細が表示されるので内容を確認します。「 View Live Demo 」をクリックすると、作成するサイトのイメージがつかみやすいと思います。 これでよければ「 Use This Layout 」をクリックします。 Elegant Themes の認証が完了しているとレイアウトのダウンロードがはじまります。認証がまだであれば先に認証に進みます。

Divi Builder を使ってはじめてレイアウトをダウンロードする場合は、ダウンロードの前に下記の、 Authentication Required （アカウント認証）の画面が表示されます。

ユーザー名は、 Elegant Themes のサイトに登録したユーザー名になります。APIキーは「？」マークをクリックすると、You can find your API Key here. と表示され、

Elegant Themes のサイトで「 Account 」＞「 Your API Key 」になります。 Manage API Keys のキーをコピーして貼り付けます。

アカウント認証が完了していると、レイアウトのダウンロードが開始されます。

ダウンロードが完了すると、レイアウトされた状態でWebページができあがります。

テンプレートのレイアウトなので、文字、写真、色といったことを変更していきましょう。

必要のないセクションをさくっと削除しましょう。例えば一番下のニュースレター登録のページ（ Join Our Newsletter ）は今回作成したいサイトには必要ありません。セクションごと削除しましょう。

Divi でのセクションの操作は、その配置位置をマウスでポイントすることにより表示される青色枠についているアイコンにて行います。

ゴミ箱アイコンをクリックすると、下図のようにセクションごと消えます。

同様の操作で「 Latest News 」「 Shop the Sale 」「 Create Your Own Style 」「 Popular Outfits 」もいらないので、セクションごと削除しましょう。

必要のないセクションの削除が終わったら、今度は必要のない「行（ Row ）」を削除しましょう。

Collections のセクションは、 Gallery に名称を変えて利用しようと思っているのですが、このセクションには複数の行があります。今回はそこまで行は必要ないので消そうと思います。

行を削除するには、緑色の枠のメニューを利用します。

上図のゴミ箱をクリックすると「 New Mens Trends 」が消えます。同様の操作で「 Bags 」も消します。

必要のないセクションの削除が終わったら、今度は必要のないモジュールを必要な位置に移動してみることにしましょう。

トップにある「 High Fashion 」のセクションに、「 VIEW MORE 」というボタンモジュールがありますが、そこには必要ないので「 About 」のセクションに移動することにしましょう。

モジュールを操作するには、灰色のメニューを利用します。

そのまま 「＋」ポインタを「 About Us 」のセクションの行にドラッグします。文字列の下まで「＋」ポインタを移動してくると、ドロップしたときに配置される位置にうすい灰色の帯が表示されます。

そこにドロップすると、下記のように「 VIEW MORE 」ボタンが移動されます。

ページに配置している文字は、その文字をクリックすることで編集できます。

今回作成するサイトのタイトル「 Photo Site 」に編集しましょう。文字列を編集するとページ上の文字列も変化します。「✔（チェックマーク）」をクリックして変更内容を確定しましょう。

この要領で各所の文字列を編集しましょう。今回は練習なので、文字列を何に変えるのかは自由です。練習してみてください。

レイアウトライブラリからダウンロードしたレイアウトには写真も入っていますが、テンプレートのものなので、必要に応じて別に自分で用意した写真に変更しましょう。

メディアライブラリが表示されますので、表示させたい画像を選択してください。ここでファイルをアップロードすることも可能です。

変更する写真を選んで、「画像をアップロードする」をクリックします。すでにアップロードされている画像なのでアップロードするっていう言葉はちょっとおかしいんですけどね。(笑)

画像が変更されます。写真によってサイトのイメージが一気に変わりますね！最後に画像設定パネルの「✔（チェックマーク）」をクリックして変更を承認します。

Divi の画像モジュールの設定では、Photoshop等で再度調整してアップロードしなくても、 基本的な画像調整も可能です。

モジュール（構成要素）を追加するには、灰色の「＋」をクリックします。

モジュールを挿入のパネルが表示されるので、追加するモジュールを選択します。

下図のようにテキストモジュールが追加配置されます。

テキストのモジュール設定では、文字列の色やスタイルの変更が自由に行えます。変更を承認するときはやはり「✔（チェックマーク）」をクリックします。 Divi では操作感の統一が図られており、割と直感的に操作を行うことができます。

ところで、新たに追加したモジュールは、設定が今まで利用していたものとは当然違ってしまいます。なのでやっぱり、今あるモジュールをコピーして追加することにしましょう。

Divi は編集履歴を利用して行った操作を戻したり進めたりすることができます。

履歴編集パネルで「追加テキスト」が今回追加した履歴です。その上まで履歴をもですと、

下図のようにテキストモジュールが消えました。そこで「✔（チェックマーク）」をクリックすることで履歴の復元が承認されます。

では今度は今あるモジュールをコピーして、新しいモジュールを追加しましょう。

テキストモジュールが複製され追加されました。後はコンテンツ（文字列）を編集するだけで同じフォーマットの文字が追加になります。別のセクションにコピーしたければこれを移動するだけです。

トップページは一旦完成したので 、リンクの設定などを行う前に、先に自己紹介ページ「 About 」と、連絡先情報のページ「 Contact 」と、写真ギャラリーのページ「 Photo Gallery 」を作成することにしましょう。

一旦ここまでの状態を仮保存しましょう。 仮保存するには、

メニューの左の方に「下書きを保存」があるので、それをクリックします。ちなみに「発行」は、ページが完成して公開するときに使います。ワードプレスの「公開」と同じ意味です。

ネットワーク経由でサイトの作成を行っていると、急に接続が切れてしまうなんてことも起こることもあり得ます。要所要所で「下書きを保存」を行っておきましょう。