Diviの使い方完全ガイド

2024年Diviの使い方【完全ガイド】

このページはWordPressテーマ『Divi』の情報リソースページです。
初心者から上級者まで、様々な情報がここに記載されてます。
新しい情報をどんどん追加していきます。

Diviは有料テーマですが、Diviを5日間無料で試すサービスがあります。
メールアドレスだけなので、是非試してみてください。
https://demodivi.com

Diviの購入を考えてる方は、こちらの記事で詳しく説明しています。
Diviの入手からインストールまでを完全ガイドします。英語でも大丈夫!【5分でできます】

30日以内ならキャンセル可能で、その方法を書いた記事はこれです。
【簡単】Divi-Elegant Themesのアカウントのキャンセルと返金を申請する方法

WordPressのことをもっと知りたい場合はWordPressの使い方のページを見てください。

Diviは世界一使われるWordPressテーマ

DiviとはアメリカのElegant Themes社が提供している、世界で一番使われているWordPressテーマです。
有料テーマなのに世界一です。
現在のDivi使用者はなんと60万人を超えます。
Diviのコミュニティも大きく、公式Facebookグループだけで4万人を超えます。
Diviの人気の秘密コードを書かずにUIからドラッグ&ドロップでページを構築できるビジュアルビルダーと、一度購入すれば使えるサイトに制限のない自由なライセンスです。
そしてElegant Themes社だけでなく、Diviのプラグインやサービスを提供してる会社もそのコミュニティに大きく関わっており、そのエコシステムは巨大です。

そして日本でもDiviを作って作られたウェブサイトは意外とあるんです。
この記事でDivi作られた日本語のサイトを10選紹介しています。

Diviビルダー

DiviビルダーとはDiviテーマのメインの機能であるウェブページビルダーです。
基本的な使い方は、40以上あるモジュールドラッグ&ドロップでページに置いていき、ブロックを積み上げるようにサイトを構築していきます。
Diviビルダーには二つのモードがあり、ビジュアルビルダーワイヤーフレームモードがあります。

ビジュアルビルダー

ビジュアルビルダーとはDiviビルダーのメインのビルダーです
ビジュアル、つまりコードではなくサイトを見たまま編。
広範囲で自由に編集可能であり、ウェブページを作ったことがない人もで感覚的に使える優れたツールです。

ワイヤーフレームモードでサイトの枠組みを構成

Diviのバックエンドビルダー
ワイヤーフレームモード

ワイヤーフレームモードとはサイトがどのように構成されてるのか、その名の通りワイヤーフレームで見ることが出来ます。
ビジュアルビルダーに色々と追加していくと、何処に何があるのか見づらくなってきます。
そんな時はワイヤーフレームモードで見ればサイトの構成が一目瞭然です。

Diviビルダーの使い方を学べるチュートリアル

  1. ビジュアルビルダーの基本【初心者必見】
  2. モジュール設定の基本【初心者必見】
  3. ホバーの設定【初心者必見】
  4. 三つのセクションのタイプ

動画シリーズ

応用編

Diviモジュール

Diviの40を超えるモジュールの数々

Diviビルダーで活躍するのが40以上あるDiviのモジュールです。
それぞれのカスタマイズ性も高く、これらを駆使して自由にウェブページを構築できます。
プラグインによって新しいモジュールを追加することも可能です。
またモジュールの初期値も自由に変えることができ、サイト全体で同じ設定を使うことが出来ます。

テキストモジュール

Diviテキストモジュールの使い方

テキストモジュールはきっと皆さんが一番使うモジュールです。
その名の通りテキストを書けるモジュールです。
画像のような高機能のエディタからテキストの編集が可能です。

Diviのテキストモジュールの詳細

このようにさらに細かく編集できます。

文字を縦書きにすることも可能です。

まずはこのモジュールをマスターしましょう。

画像モジュール

Diviの画像モジュール

画像はウェブサイトには欠かせないものですね。
このモジュールで画像をページに挿れることが可能です。

Diviの画像モジュールで色を変える

画像の色など普通はPhotoshopのようなソフトウェアが必要なところを、このモジュールだけで変換可能な優れものです。

Diviのモジュールの使い方を学べるチュートリアル動画

応用編

Diviに最初から付いてくる140を超えるレイアウト

沢山のDiviのレイアウトから制作可能
実際にDiviに最初から入ってるレイアウト

でも1からウェブページを作るのは、Diviを使っていても中々時間がかかるものです。
そこで役に立つのが、Diviに最初から入ってる140を超えるレイアウトです。
綺麗でカッコいいサイトが沢山あります。
中にはオンラインストアのレイアウトなどもありますよ。
レイアウトを選び、そのレイアウトを元にページを作り出せるんです。

現存するDiviのレイアウトからサイトを構築
実際にレイアウトを選択する画面です

サイトのレイアウトを検索して選んで、ボタンを押すだけでロードされます。
詳しくは下のリンクから。

現存するレイアウトに関する動画と記事

テーマビルダー

テーマビルダーとはDiviビルダーでページだけでなく、それぞれのページタイプのテンプレートを作れる機能です。
テンプレートはヘッダーボディ、そしてフッターで構成されています。
例えば、ブログではサイドバーに特定のものを表示させ、固定ページでは別なものを表示させたい時、テーマビルダーで別々のテンプレートを作ればこれが実現できます。

Diviテーマビルダー

テーマビルダーで作れるページのテンプレートの種類

  • ブログページ
  • 404ページ
  • アーカイブページ
  • 検索結果のページ

しかも一度作ったテンプレート他のサイトに簡単に移行することができます。
この機能はDivi4.0から実装されています。

沢山ある綺麗な無料のテーマビルダーテンプレート

無料のテーマビルダーパック
Elegant Themesが無料で配布したテンプレートの一つ

Elegant Themesは頻繁に無料のテーマビルダーのテンプレートを配布しています。
洗練されたデザインが多く、使いやすいです。
そのロードの仕方も下のリンク集で説明しています。

テーマビルダーのテンプレートとレイアウトのテンプレートの違い

この二つの違いは、レイアウトはテーマビルダーのボディ内のコンテンツの部分であり、テーマビルダーはその外のヘッダーやフッターの部分をコントロールすると考えてください。

テーマビルダーの使い方を学べる記事と動画

Diviライブラリー

Diviライブラリーとはページ内で作ったサイトのパーツを、保存し使い回すことが出来る機能です。
具体的にはサイトのレイアウト全体とセクションとローとモジュールを保存することが出来ます。
しかもページ間だけでなく、サイト間で使い回すことも容易に可能です。

ページ間でシンクするグローバルなパーツ

同じパーツを違うページで使ってたら、片方をアップデートしたらもう片方も自動でアップデートして欲しいですよね。
そのパーツをグローバルと設定するだけでシンクが可能になります。

Diviライブラリーの使い方を学べる記事と動画

Global Presets(グローバルプリセット)

DiviのGlobal Presets機能を使うと、セクションや行やモジュールのプリセットを作ることが可能です。
プリセットとは、調整して作ったデザインを保存して使いまわしたり、複数の要素のデザインをシンクすることが可能です。
例えば、青いボタンを作ってそれを複数のセクションで使いたかったら、それをプリセットとして保存し、新しく作ったボタンにそのプリセットをボタン一つで反映させることが可能です。そして後でこのプリセットのスタイルを変換すると、このプリセットを使用してる全てのボタンが変換されます。

かなり制作の効率を高くする機能です。

使えるDiviのプラグイン

Diviは世界で一番使われるテーマですから、Divi専用のプラグインも結構あります。

使えるプラグインの関連情報

他のメジャーなプラグインと一緒にDiviを使う

Diviは基本ショートコードが使えるので他のメジャーなWordPressのプラグインと使うことも可能です。

あの有名なACF(Advanced Custom Fields)を使えばショートコードを使わずにDiviのDynamic Contents機能からフィールド値を呼び出すことが可能です。

Diviビルダーを他のテーマで使う

Divi自体はテーマですが、Diviビルダーはプラグインバージョンもあり、他のテーマと一緒に使うことも可能です。
現にこのtofutechはAstraというテーマとDiviビルダープラグインを使っています。
詳しくはこの記事で説明しています。

Diviをブロックエディターの中で使う

Diviは実はWordPressのブロックエディター(Gutenberg)の中でも使えます。
Diviをインストールするだけでブロックエディターの中にDiviのレイアウトブロックが現れ、そこからDiviのモジュールを挿入することができます。
この機能を使えば、ブロックエディターでブログを書いてる時でもDiviを使えるわけです。
詳しい説明はこの記事から。

WordPressの標準ブロックエディター『Gutenberg』内でDiviモジュールを使う方法

DiviとSEO

DiviはSEOに強いのか?
この質問が良くでますが、結論は『SEOに強いテーマ』という概念自体がもう古いものであり、『DiviだからSEOに強いわけでも弱いわけでもない』です。

SEOに強いサイトを作るにはコンテンツが鍵

Googleの発表に寄ると、Googleがチェックしてるのはコンテンツであり、もう小手先の技術ではサイトを上位にランクさせることは出来ません。
どうすればSEOに強いコンテンツを作れるのか詳しく説明した記事はこれです。
SEOの基本: その答えはコンテンツにあり(DiviでもElementorでも同じ)

Diviとアフィリエイト広告

Diviのサイトでも問題なくアフィリエイトの広告を使うことが出来ます。
広告の位置もDiviのビルダーで自由に移動できます。

Diviとアフィリエイト関連情報

Diviで問題が起こったら

Diviのサーバーの設定

Diviは他のWordPressテーマよりも少し高めのスペックのサーバーの設定を必要とし、しっかり設定していないと操作が遅くなったりバグが発生したりします。

Support Centerでスペックチェックが可能

Diviのsupport centerで必要なスペックチェック
緑はパス、赤は問題あり

Diviに備わってる機能の一つにSupport Centerを使うと、サーバーがDiviに必要なスペックを満たしてるかどうかを調べることが出来ます。
詳しくは下のリンク集で説明しています。

Diviのサーバー問題関連の記事と動画

Diviのアップデートで不具合が発生した場合

もしアップデート後に不具合が発生した場合は、バージョンを戻すことも可能です。

Diviを前のバージョンに戻す方法

Diviサイトのロードを高速化する

Diviのサイトのロードが遅いという意見もたまに見ますが、Diviは設定でいくらでも速くなります
基本はWordPressなので、WordPress高速化の方法だけでも十分通用します。

Divi超高速でロード
サイトが0.8秒でロード

これは実際にDiviのサイトを高速化した結果です。
どうやって速くしたのかは下のリンク集で説明しています。

Diviを試してみる

demodivi.comでDiviを試す

Diviは有料ですが、5日間無料で試せるサイトがあります。
必要なのはメールアドレスだけなので試して見てください。
https://demodivi.com

Diviの購入方法

Diviの値段は年間89ドルか生涯プランで249ドル

Diviの価格はどちらを選んでも機能的には違いはなく、ライセンスの数も制限がありません。違いは年間$89払うか、生涯プランで$249払うかです。
一回249ドル払って仕舞えば一生無制限で使えるのでオススメです。

Diviの購入ページは英語ですが、この記事で購入からインストール方法まで詳しく紹介しています。
とても簡単ですよ。
30日以内ならキャンセルも可能です。

Diviの日本語サポート

Diviのサポートは基本英語ですが、私が個人的にサポートを提供してるコミュニティがあります。
詳しくはこの記事を見てください。

DiviとElementorを日本語でサポートするコミュニティ【メンバー募集中】

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通