WordPress(ワードプレス)のテーマは数多くあるのですが、世界で一番多くインストールされ利用されているテーマはこの「 Divi 」になるのではないかと思います。入門講座として、 今回から複数回に分けてこの Divi について、できるだけ図を用いて Divi の使い方を解説しようと思います。

ワードプレス Diviの使い方1
Diviとは? ~ インストールまで

1.Diviとは?

「 Divi 」とは、「 Elegant Themes 」社が開発している、全世界ですでに 57万人以上の人々にダウンロードされ利用されている、ワードプレスのテーマ及びビルダー(エディター)になります。 Divi はシンプルな操作で優雅で美しいデザインのサイトを作成するための非常に強力な機能を単体でも持っています。

さらに、 Elegant Themes は、その会社説明の中で「 We love Open Source (オープンソースが大好き)」との言葉もあるぐらい開かれた社風をもっており、世界中のワードプレスファンの間で一つのチームのような開かれたコミュニティを形成し、 Divi もその中で様々な機能拡張の恩恵を無料で受けることができます。 Divi を使うことで様々な無料のテーマを自分のサイトにダウンロードして自由に使うことができますし、 Divi で使うための様々な無料の機能拡張のためのプラグインが存在します。

Divi Builder は古くからビジュアライズされた操作性を持っており、現ワードプレスにはビジュアルエディターも搭載されているので昔ほどは必要性が無くなっていると感じる方もいらっしゃるかもしれませんが、使いやすさに関しては明らかに Divi に一日の長があると感じます。

Divi は有料のテーマになりますが、金額も個人で購入可能な範囲です。さらに一度の購入で複数のサイトへの設置が可能です。コストパフォーマンスの高い優良テーマだと思います。さらに今なら、30日間の返金保証もあるので試してみられるのも良いでしょう。

公式サイト: Elegant Themes https://www.elegantthemes.com/

2.Divi の購入とインストール方法

1)Diviの購入方法

(1) Elegant Themes のサイトにアクセスする

Elegant Themes のサイトにアクセスすると、画面右上方に「 JOIN TO DOWNLOAD 」のボタンがあるのでそちらをクリックします。

(2) 2つのプランから選択する

提示される2つのプランから選択します。左が1年間のテーマとプラグインサイトの利用権とサポート、右が一生の利用権とサポートになります。Divi の機能としてはどちらを選んでも違いはありません。Divi は購入すると無制限で複数のサイトに設置できます。

(3) 購入者(ユーザー)の情報を入力する

ユーザー情報を入力します。

  • USERNAME:ユーザー名
  • EMAIL:メールアドレス
  • PASSWORD:パスワード
  • CONFIRM PASSWORD:パスワード確認
  • FIRST NAME:名
  • LAST NAME:姓
  • COUNTRY OF RESIDENCE:居住国( Japan:日本 )

By signing up you agree to our Terms Of Service. :利用規約に同意しますのチェック Subscribe to receive updates and free resources via email. :電子メールの購読のチェック

支払いは VISA か マスターカード か アメックスが利用可能です。

(4) クレジットカード情報の入力

クレジットカード情報の入力画面が表示されるので、カード番号、利用期限、カード裏側の CVC 番号(3桁あるいは4桁)を入力します。

クレジットカードによっては、携帯番号の入力も求められます。

(5) メールが届く

以上で登録が終わり、Elegant Themes から登録完了のメールが届きます。「 Login To Your Account 」をクリックすると Elegant Themes のサイトにログインのパネルが表示されます。

2)Divi のインストール方法

(1) Elegant Themes のサイトにログインする

上述のメールの「 Login To Your Account 」をクリックし、Elegant Themes のメンバーエリアへのログインパネルを表示します。

登録したユーザー名と、パスワードを入力し、「 Member Login 」をクリックします。

(2) Installing Divi Using The Divi Builder をダウンロードする

メンバーエリアで「 Downloads 」の 「 Installing Divi Using The Divi Builder ・・・」の「 Download 」をクリックします。「 Divi.zip 」がダウンロードされるのでデスクトップ等、自分のわかりやすい場所に保存します。

(3) ワードプレスに Divi をインストールする
①自サイトのワードプレスのダッシュボードにログインします。
②「外観」>「テーマ」をクリックします。
③「新規追加」をクリックします。
④「テーマのアップロード」をクリックします。

⑤アップロード画面で「ファイルを選択」をクリックします。

⑥エクスプローラー(ファイルブラウザー)が表示されるので、先ほどダウンロードした「 Divi.zip 」を選択し、「今すぐインストール」をクリックします。

※ もし下記のように「アップロードしたファイルは php.ini で定義された upload_max_filesize を超過しています。」と出たら、サーバーのPHP設定の最大ファイルサイズの変更が必要です。お使いのサーバーによって変更方法が違いますので、詳細についてはサーバーのヘルプ等で確認ください。

⑦アップロードとインストールが完了したら「有効化」をクリックします。

⑧ Divi が有効化されました。使い始める前にチュートリアルを見るのも良いでしょう。

今回は Divi のインストールまで説明しました。続いて固定ページでの Divi Builder の基本的な利用方法を見ていくことにしましょう。

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

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

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

divi-lesson5-3-youtube-logo01

DiviでYouTubeを表示する Diviの使い方5の3

Divi は YouTube 動画も簡単にサイトに設置できるように作られています。今回はその設置方法を図解したいと思います。Diviの使い方5の3 Divi で YouTube...

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

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

ワードプレス Divi の使い方8 外観のカスタマイズ2 サイトの文字の大きさを変える

Divi にはサイトの文字の大きさを変える複数の方法が存在します。それぞれで使いどころを分けて利用すると便利です。Diviの使い方8...

Pin It on Pinterest