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

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

1.作成するサイト「 Photo Site 」のイメージ

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

2.トップページ( Landing )を作成する

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

1)固定ページの新規追加をする:Landing

ワードプレスのダッシュボードの「固定ページ」>「新規追加」をクリックします。
「タイトルを追加」にページのタイトルとする「 Landing 」と入力します。

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

2)Browse Layouts を使いレイアウトを選択する:Landing

(1) Browse Layouts をクリックする

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

(2) レイアウトを選択する

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

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

(3) Elegant Themes アカウント認証

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

ユーザー名とAPIキーを入力します。

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

「 here 」をクリックすると、下記のAPIキーのページが開かれます。

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

(4) レイアウトがダウンロードされる

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

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

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

(5) 必要のないセクションを削除する

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

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

セクションごと削除するには、青色の枠の「ゴミ箱」アイコンをクリックします。

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

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

(6) 必要のない行( Row )を削除する

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

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

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

行( Row )ごと削除するには、緑色の枠の「ゴミ箱」アイコンをクリックします。

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

(7) 必要のないモジュール(構成要素)を必要な位置に移動する

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

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

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

移動するには十字の矢印がクロスしたようなアイコンを利用します。アイコンをドラッグ&ドロップで移動します。
アイコンのドラッグ(左クリックで指を押しっぱなしで動かすこと)を開始すると、マウスポインタが灰色の丸「+」に変化します。

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

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

(8) 文字列を編集する:モジュールの設定

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

「 High Fashion 」と記載されている部分をクリックすると、カーソルが表示され編集可能となります。
あるいはモジュールの歯車「⚙」アイコンをクリックすることで表示できる、モジュールの編集パネルでも行えます。
赤枠部分の文字列を編集し、「✔(チェックマーク)」の承認ボタンをクリックし確定します。

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

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

(9) 写真を変更する:モジュールの設定

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

写真を変更するには、写真モジュールの灰色歯車「⚙」をクリックします。
画像設定のパネルが表示されます。「コンテンツ」タブの画像が表示されるので、画像を変更したい場合は画像をクリックします。

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

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

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

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

画像モジュールの「デザイン」>「 Filters 」をクリックします。

設定できる項目はかなり色々あります。

  • 色相:色の相、色調
  • 彩度:色の鮮やかさ、色調
  • Brightness:明るさ、諧調
  • Contrast:コントラスト、諧調
  • Invert:色相の反転
  • Sepia:セピア調
  • Opacity:透過度
  • Blur:ブラー、ブレ
  • Blend Mode:写真の背景とのブレンドモード

写真の微調整ならもう新たに読み込みなおす必要性はないでしょう。

(10) モジュール(構成要素)を追加する

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

「+(新たなモジュールを追加)」をクリックします。

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

「テキスト」のモジュールをクリックして追加してみましょう。

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

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

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

(11) 履歴を利用して操作を戻る

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

編集履歴パネルを呼び出すには、時計のアイコン「🕒(時計)」をクリックします。

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

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

(12) モジュールをコピーして追加する

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

コピーしたいモジュールの灰色の「モジュールを複製」をクリックします。

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

(13) トップページ( Landing )のイメージを確認する

これでサイトのトップページのだいたいの配置が決まりました。

最初の表示位置に、サイトのタイトルとキャッチコピーを配置します。

スクロール先のページに、自分についての簡単な説明文と、より詳細な説明を記載されているページへ移動するためのボタンを配置しています。

さらにスクロールした先に、ギャラリーページの紹介と、そのページへ移動するためのボタンを配置しています。

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

(14) 下書き保存する

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

ページ最下部の紫丸の「・・・」をクリックして、メニューを表示させます。

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

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

続きは「レイアウトを使ったWebページ作成2」で解説します。

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

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

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

Divi モジュールの使い方4 スライダーと投稿スライダー

今回は Divi の各種モジュールのうちから、スライダーモジュールと投稿スライダーモジュール(スライダーを投稿する)について図解したいと思います。Diviの使い方10 モジュールの使い方4...

ワードプレス Diviの使い方 7-2 イラストの形にグラデーション画像を表示する

前回は文字の形に画像を切り抜いて表示させましたが、今回はイラストの形にグラデーション画像を切り抜いてみましょう。Divi Builder...
divi-lesson2-logo

ワードプレス Diviの使い方2 固定ページの作成チュートリアルツアー

Divi 入門講座の第2回目として、 今回は Divi...

ワードプレス Divi リファレンス1 外観のカスタマイズ

今回は Divi テーマのカスタマイズのうち、「外観」>「カスタマイズ」の項目で設定できる内容について図解します。ワードプレス Divi リファレンス1...
divi-lesson6-logo

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

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

Pin It on Pinterest