ワードプレス Diviの使い方図解まとめ 目次
写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。
こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。
ワードプレス Divi レッスン
Diviの使い方図解まとめ 目次
目次
１．Divi レッスン ： Diviの使い方図解
１）Divi とは？ ～ インストールまで
ワードプレス Diviの使い方１ Diviとは？ ～ インストールまで
「 Divi 」とは、「 Elegant Themes 」社が開発している、全世界ですでに 57万人以上の人々にダウンロードされ利用されている、ワードプレスのテーマ及びビルダー（エディター）になります…
２）Divi チュートリアルツアー
ワードプレス Diviの使い方２ 固定ページの作成チュートリアルツアー
Divi 入門講座の第２回目として、 今回は Divi を使った固定ページの作成方法について、できるだけ図を用いて解説しようと思います…
３）レイアウトを使ったWebページ作成
一連の流れで、実際のサイト（ Webページ ）の作成を行ってみましょう。作るサイトは写真家のサイトということにしましょう。 Divi はレイアウトライブラリのデザインテンプレートを使って簡単にサイトの作成を行えます。
ワードプレス Diviの使い方３ レイアウトを使ったWebページ作成１
１．作成するサイト「 Photo Site 」のイメージ
２．トップページ（ Landing ）を作成する
ワードプレス Divi の使い方３ レイアウトを使ったWebページ作成２
３．写真ギャラリーのページ Photo Gallery を作成する
４．自己紹介（ About ）のページを作成する
５．連絡先情報（ Contact ）のページを作成する
ワードプレス Diviの使い方３ レイアウトを使ったWebページ作成３
６．作成したページを公開する
７．ページリンクを設定する
８．トップページ（ホームページ）を設定する
４）背景設定と特別な機能 Dividers について
ワードプレス Divi の使い方４ 背景設定と新機能 Dividers
Divi は Web ページの背景を編集過程をリアルタイムに確認しながら編集することができます。背景の設定はセクション、行、モジュールのそれぞれで設定できます…
５）アニメーション・動画を設定する
WordPressテーマ Diviの使い方５ サイトにアニメーションを設定する
Divi は Web ページにアニメーションを編集過程をリアルタイムに確認しながら設定することができます。アニメーションの設定はセクション、行、モジュールのそれぞれで設定できます…
ワードプレス Divi の動画利用方法 DIVいレッスン5-2
今回は Divi で作成しているサイトに動画を設定する方法について図解します。Divi では動画を複数の方法で配置することができます…
Divi で YouTube を表示する Diviの使い方5-3
Divi は YouTube 動画も簡単にサイトに設置できるように作られています。今回はその設置方法を図解したいと思います…
６）設定のデザイン設定
ワードプレス Diviの使い方６ 設定でデザインできる共通項目と固有項目
Divi Builder の設定のデザインタブで設定できる項目として、セクションの Dividers と、デザイン設定のうちのアニメーションについては上記までですでに説明しました。今回はその他に設定できる項目についてみてみることにしましょう…
７）写真や画像を表示する
ワードプレス Diviの使い方７ 写真を文字の形に切り抜く方法
Webサイトで写真を文字の形に切り抜いて表示させたい場合、Divi Builder だとその場で文字列を変えるだけで、すぐにその文字型に写真を切り取った様に表示できるんです…
Divi レッスン 7の2 イラストの形にグラデーション画像を表示する
前回は文字の形に画像を切り抜いて表示させましたが、今回はイラストの形にグラデーション画像を切り抜いてみましょう。Divi Builder 上で画像の切り抜きを設置すると、いつでも色を変更できるので便利です…
Diviで文字の色をグラデーションアニメにする方法：Diviの使い方7-3
今回は Diviの使い方７の３として、文字の色をグラデーション変化させる方法について図解させていただきたいと思います。Diviではテキストの背景に動画を配置してサイト上で合成させることで動的に変化させることが可能です…
８）テーマのカスタマイズ
今回から複数回にわたって、テーマのカスタマイズについて解説します…
（子テーマの作成に関してはどのやり方でも構いません。簡単なのは 8-1-2、8-1-3 です。いずれかのやり方で実施ください）
レッスン8 テーマのカスタマイズ1 子テーマの作成
１．子テーマを作成し適用する
Diviで子テーマを作成するより簡単な方法 Diviの使い方8-1-2
Divi で子テーマを作成するのには、先に紹介した自分で作成する方法以外に、別に簡単な方法があるので、今回はその方法を図解したいと思います。初心者の方はこちらを利用される方が良いかもしれません…
Divi 用の子テーマ作成プラグインを利用する Diviの使い方8-1-3
今回はDivi で子テーマを作成する方法の３つ目としてプラグインを利用する方法を図解します。複数のプラグインがありますが、その中から今回は「Divi Children」をインストールして利用することにします…
外観のカスタマイズ２ サイトの文字の大きさを変える
２．外観のカスタマイズでサイト全体で文字の大きさを変える
３．モジュールの設定で文字サイズを変える
Divi の使い方8 外観のカスタマイズ3 色を変える方法
４．カラースキームでサイト全体の色を変える
５．サイトの文字や背景の色を変える
６．ヘッダーの色を変える
７．フッターの色を変える
８．セクション、行、モジュールの色を変更する
Diviの使い方８ テーマのカスタマイズ４ 追加CSS設定
Divi ではテーマのカスタマイズを便利に行えるように、追加のCSS設定を書き込む専用の場所が用意されています。今回はその機能を利用してテーマのカスタマイズを行う方法について図解します。
９）テーマのオプション（おすすめ設定）
Divi レッスン9 テーマのオプションのおすすめ設定
Divi でサイトを作成したら、ぜひオプション設定も変更しましょう。Divi はテーマのオプションを専用のメニューでいろいろと変更できるようになっています。今回はぜひ設定しておいた方が良いおすすめの設定を図解します…
10）各種モジュールを利用する
画像モジュールと広告モジュール Diviの使い方10-1
今回は Divi の各種モジュールのうちから、画像モジュールと広告モジュールについて図解したいと思います…
Diviの使い方10-2 ギャラリーモジュールの利用方法
今回は Divi の各種モジュールのうちから、ギャラリーモジュールについて図解したいと思います…
動画と動画スライダーモジュール Diviの使い方10-3
今回は Divi の各種モジュールのうちから、動画モジュールと動画スライダーモジュールについて図解したいと思います…
Diviの使い方10 モジュールの使い方4 スライダーと投稿スライダーモジュール
今回は Divi の各種モジュールのうちから、スライダーモジュールと投稿スライダーモジュール（スライダーを投稿する）について図解したいと思います…
Diviの使い方10-5 お問い合わせフォームモジュールの利用方法
今回は Divi の各種モジュールのうちから、お問い合わせフォームモジュール（Contact Form）について図解したいと思います…
Diviの使い方10 モジュールの使い方6 アクションの呼び出しとボタン
今回は Diviの各種モジュールのうちから「アクションの呼び出し」と「ボタンモジュール」の使い方について、Divi初心者向けに図解したいと思います…
Divi モジュールの使い方7 投稿タイトルと投稿ナビゲーション
今回は Diviの各種モジュールのうちから「投稿タイトル」と「投稿ナビゲーション」のモジュールの使い方について、Divi初心者向けに図解したいと思います…
Diviモジュールの設定方法８ トグルとアコーディオン
今回は Diviの各種モジュールのうちから「トグル」と「アコーディオン」のモジュールの使い方について、Divi初心者向けに図解したいと思います…
２．Divi リファレンス
１）外観のカスタマイズ
ワードプレス Divi リファレンス１ 外観のカスタマイズ
今回は Divi テーマのカスタマイズのうち、「外観」＞「カスタマイズ」の項目で設定できる内容について図解します…
２）テーマのオプション
Diviの使い方９ テーマのオプションの設定方法
Divi では専用のオプションメニューを利用して様々な設定を行えるようになっています。今回はその「テーマのオプション」の設定方法について図解します。
３．Divi Tips
Divi で作成したサイトに目次機能を追加 Easy Table of Contents の設定
Divi で作成している Web サイトに目次機能を追加するのに、便利なプラグインとして「 Easy Table of Contents 」があります。今回はそのインストールと設定方法について解説します…
WordPress DiviのSNSプラグイン MONARCH のインストールと設定
Divi を開発している Elegant Themes にはSNSとの連携をより容易にすることができるプラグイン MONARCH もあります。Divi を購入していると MONARCH も利用できます…
Divi チップス Before + After Images for Divi のインストール
ワードプレスで作成している Web サイトで、写真や画像の分割比較表示をしたくなった場合に、便利なプラグインとして「TwentyTwenty」があります。 Divi でもそのプラグインは利用できるのですが、さらに便利にした「Before + After Images for Divi」が使えます…
Divi サイトの高速化 フォントの変更とAutoptimizeプラグイン
実は Divi で作成した日本語サイトは、初期設定のままでは極端に重く遅いのです。今回はいくつかの設定を変更することにより高速化を行います…
ワードプレス Diviの高速化 2019 正式版Googleフォントへの変更と WP Super Cache
今回はワードプレスの Divi テーマで作成しているサイトの高速化をはかりたいと思います。以前にフォントを変更することによる高速化を紹介しましたが、また別の方法を提案したいと思います。さらにキャッシュも導入することによりさらなる高速化を目指します…