Divi は Web ページにアニメーションを編集過程をリアルタイムに確認しながら設定することができます。アニメーションの設定はセクション、行、モジュールのそれぞれで設定できます。

WordPressテーマ Diviの使い方5
サイトにアニメーションを設定する

1.アニメーション設定の場所

アニメーションを設定するには、

セクション(青色)、行(緑色)、モジュール(灰色)のそれぞれの「⚙(歯車)」アイコンをクリックします。
設定のパネルが表示されるので「デザイン」タブの「アニメーション」をクリックします。※行やモジュールでも同様です。

2.アニメーションを設定する

1)Animation Style(アニメーションスタイル)

Animation Style では、アニメーションの形状を設定できます。

  • フェード:フェードし現れる効果
  • スライド:スライド移動し現れる効果
  • Bounce:ポンポンと弾む効果
  • Zoom:ズーム拡大する効果
  • 反転:反転から開く効果
  • Fold:折り畳みから開く効果
  • Roll :ロール回転効果

2)Animation Repeat(アニメーションリピート)

Animation Repeat では、クリックすることで、1回のみか連続か選べます。

  • Once:1回のみ
  • Loop:連続実施

3)Animation Direction(アニメーション方向)

「✔(チェックマーク)」をクリックして承認します。

Animation Direction では、アニメーションの方向を設定できます。

4)Animation Duration(アニメーション期間)

Animation Duration では、アニメーションの実行期間(時間)を設定できます。

単位はミリセカンド(ms)

5)Animation Delay(アニメーションディレイ)

Animation Delay では、アニメーションの実行開始までの遅延時間を設定できます。

単位はミリセカンド(ms)

6)Animation Intensity(アニメーション強度)

Animation Intensity では、アニメーションの動きの大きさを設定できます。

単位は%です。

7)Animation Starting Opacity(アニメーション 開始 透過度)

Animation Opacity では、アニメーション開始時の透過度を設定できます。透過状態から現れてきます。

単位は%です。

8)Animation Speed Curve(アニメーション速度曲線)

Animation Speed Curve では、アニメーションの実行速度曲線を設定できます。

  • Ease-In-Out:最初と最後をゆっくりにします
  • Ease:ゆっくり
  • Ease-In:ゆっくり開始し速く
  • Ease-Out:最後をゆっくりにします
  • 線形:直線状にします

アニメーションを設定することでサイトに動きを出せます。Divi ではセクション、行、モジュールのそれぞれに動きを設定できます。適度に動かすことはサイトのイメージアップにつながることもあります。設定してみましょう。

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

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

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

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

ワードプレス Diviの使い方7 写真を文字の形に切り抜く方法

Webサイトで写真を文字の形に切り抜いて表示させたい場合、通常は Photoshop...
divi-lesson8-2-logo

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

Divi にはサイトの文字の大きさを変える複数の方法が存在します。それぞれで使いどころを分けて利用すると便利です。Diviの使い方8 外観のカスタマイズ2...
divi-lesson1-logo

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

WordPress(ワードプレス)のテーマは数多くあるのですが、世界で一番多くインストールされ利用されているテーマはこの「 Divi 」になるのではないかと思います。入門講座として、...
divi-lesson8-1-logo

Divi レッスン8 テーマのカスタマイズ1 子テーマを作成する方法

今回から複数回にわたって、テーマのカスタマイズ、オプション設定について解説します。まず、Divi のテーマをカスタマイズする前に、子テーマ(Divi Childe...
divi-lesson3-1-logo

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

今回は一連の流れで、実際のサイト( Webページ )の作成を行ってみましょう。作るサイトは写真家のサイトということにしましょう。 Divi...

Pin It on Pinterest