Diviモジュール設定の基本【初心者必見】

こんにちはナオミです!

「モジュール挿入したけど設定が沢山あって何ができるかよくわからない。」

のような意見を聞きました。

そんな初心者の方を助けるため、この記事ではモジュール設定画面から何が出来るのかを説明していきます。

本当に色々とできますよ!

Diviモジュールの『コンテンツ』タブの概要

Diviモジュール設定画面、コンテンツ

これがテキストモジュールのコンテンツタブです。

テキストモジュールなので、『テキスト』という項目があります。

この部分はモジュールによって変わります。

この記事ではそこまで掘り下げませんが、テキストモジュールや他のよく使われるモジュールについて深く知りたい方は、この私のチャンネルのモジュールシリーズで詳しく説明しています。

このリンクからどうぞ。

Diviモジュールシリーズ

Diviモジュールのコンテンツタブで共通するのは『リンク』と『背景』と『Adminラベル』

このタブで共通するのは、リンクと背景とAdminラベルです。

リンク

Module Link Urlというボックスにリンク先のurlを入れると、そのモジュールをクリックした時に、そのリンクに飛びます。

Diviモジュールの背景設定

ここではモジュールの背景を細かくセットできます。

Diviモジュールの設定画面。背景画像の設定1
Diviの使い方。モジュール設定画面の背景

Admin ラベル

ここに入れたテキストは、ワイヤーフレームモードで表示されます。

ワイヤーフレームモードについては、前回の記事をご覧になってください。

>>Diviの使い方1、ビジュアルビルダーの基本【初心者必見】

Diviの使い方、モジュール設定画面でのAdminラベル
Diviの使い方、モジュール設定画面でのAdminラベルをワイヤーフレームモードで見る

『こんにちはナオミです』というテキストがワイヤーフレームモードで表示されました。

Diviモジュールの設定画面、『デザイン』タブの概要

Diviの使い方、モジュール設定のデザインタブ

次にデザインタブにいきます。

テキストとHeading Textはテキストモジュール特有の項目です。(これらの項目は重複することも)

サイズ変更

Diviの使い方、デザインタブでサイズ変換

これは特に説明はいらないと思います。そのまま、CSSの設定と考えてください。

なぜか高さだけ日本語ですね・・。

余白

Diviの使い方、デザインタブで余白変換

これもそのまま、CSSのマージンとパディングです。

マージンもパディングも0

Diviの使い方、マージンもパディングも0

これが初期の状態です。黄色い部分がテキストモジュールです。

マージンを足す

Diviの使い方、マージンをたす

黄色い明るいグレーの余白ができましたね。これがマージンが足された状態です。

マージンはそのモジュールの外のスペースをコントロールします。

パディングを足す

Diviの使い方、パディングをたす

パディングも追加しました。

今度は黄色のボックスの中にスペースができました。

つまりパディングはこのモジュールの内部にスペースを作るんです。

境界

これはCSSのborderのプロパティです。

ボーダーの幅

Diviの使い方、ボーダーをつける

まず、ボーダーの幅というセクションで、バーを動かしてみましょう。直接数を入力することも可能です。

黒いボーダーができます。

Border Styles

Diviの使い方、ボーダーを一箇所だけ変える

Border Stylesの一番右のタブをクリックして、Left Border Widthにさっきとは違う値を入れてみました。

左側のボーダーだけ太くなりましたね。

このように、Border Stylesでは特定のラインを指定してスタイルを加えられます。

Rounded Corner

これはコンテンツが入ったボックスの角の形をコントロールします。

数が大きいほど丸くなります。

Diviの使い方、角を丸くする

ボーダースタイル

ここでボーダーの線のスタイルを変換できます。上に英語でBorder Stylesとあるので、紛らわしいので注意してください。

Diviの使い方、ボーダースタイルの種類

クリックするとこのメニューが出てきますので、変えてみてください。

この例では、ボーダーを点線に変えてみました。

Box Shadow

ここでモジュールに影をつけれます。

Diviの使い方、ボックスシャドウの使い方

これは説明するより、触った方が速く理解できると思いますので、色々と動かしてみてください。

因みにこれらの項目を訳すこうなります。

  • Horizontal Position → 水平の位置
  • Vertical Position → 縦の位置
  • Blur Strength → ボケの強さ
  • Spread Strength → 影の広がり具合の強さ

Box Shadow Position

Diviの使い方、ボックスシャドウのタイプ

Box Shadow PositionをInner Shadowにセットすると、影が内側に出ます。

色々と遊んでみてください。

Filters

これはCSSのfilterの項目ですが、奥が深すぎて、この記事では詳しいことは割愛します。

Diviの使い方、filterの使い方

Photoshopなどでできる写真の加工がある程度なら簡単にできてしまいます。

そしてちょっと工夫すると、こんな感じのマスキングエフェクトもできますよ。

Transform

Diviの使い方、Transform

これもCSSのtransformプロパティをUIから操作することができます。

劇的にHTMLエレメントを変えることができます。

Transformのプロパティは次の5つです。

  1. Scale → 拡大縮小
  2. Translate → 移動
  3. Rotate → 回転
  4. Skew → 弯曲
  5. Origin → トランスフォームの中心

5以外は触ってみればわかると思います。

Originはどこからその変化が始まるのかという点を設定します。

例えば、Originをこのようにずらします。

Diviの使い方、Transformのoriginをずらす

そして回転させてみてください。

Diviの使い方、originをずらして回転

こんな感じで回転が真ん中ではなく右下になりましたね。

さらに詳しくは、この動画で説明しています。是非みてみてください。

アニメーション

Diviの使い方、アニメーションをコントロール

ここではこのモジュールが画面に表示された時の、アニメーションを設定できます。

Animation Style

ここでどういうアニメーションにするのか決定します。プレビューのようにアニメーションが見れますので、試してみてください。

Animation Repeat

アニメーションがループするかを設定します。

ここを変えても、ビジュアルビルダー内ではループしないので、実際にループするか見たければ、一旦保存してビルダーを閉じてみてください。

Animation Duration

アニメーションの長さをミリセカンドで設定します。

Animation Delay

アニメーションが始まる前に、どのくらい待つのかをミリセカンドで設定します。

Animation Direction

アニメショーンが進む方向を設定します。

Animation Intensity

アニメーションの力強さを設定します。ちょっと分かりにくい説明かと思いますが、実際にここを調節すれば変化が分かります。値が大きいほど、荒いアニメーションになります。

Animation Starting Opacity

アニメーション開始時の透明度を設定します。

Animation Speed Curve

アニメーションの加速と減速の仕方を設定します。

色々と試してみてください。

Diviモジュールの設定画面、『詳細』タブの概要

Diviの使い方、詳細タブ

このタブでどのモジュールにも共通してるのはこの四つです。

  1. CSSIDとクラス
  2. カスタムCSS
  3. 表示/非表示
  4. Transitions

CSSIDとクラス

Diviの使い方、CSSIDとクラス

ここではこのモジュールのHTMLエレメントに追加できる、IDとクラスを設定できます。

カスタムCSS

Diviの使い方、カスタムCSSの詳細2

ここでは、このモジュール限定のCSSを追加することができます。

この画像の中にある、前、メイン要素、後、というのは、テキストモジュールで追加できるCSSの項目で、他のモジュールでは異なります。

メイン要素

メイン要素は、その名の通り、このモジュールのメインのHTMLのスタイルです。

前と後

これは、CSSの:beforeと:afterです。

詳しい情報はこの記事で紹介されてます。

https://saruwakakun.com/html-css/basic/before-after

表示/非表示

Diviの使い方、表示と非表示

この項目は、ちょっと複数の別なものが混ざってるので、順に説明します。

無効をオンにする

ここでチェックを入れたデバイスは、このモジュールが表示されなくなります。

例えば、電話にチェックしたら、このモジュールはスマホからは見れなくなります。

Horizontal/Vertical Overflow

これはCSSのOverflowのプロパティの設定です。

詳しくはここからどうぞ。

https://saruwakakun.com/html-css/basic/overflow

いつ必要なのかと言いますと、例えばこのモジュールの高さを小さくして、テキストが全部表示されない状態にした場合、ここでVertical Overflowをscrollにセットすれば、このモジュールの中でスクロールできるようになります。

Diviの使い方、Overflowの設定

z-index

CSSのz-indexの設定です。

z-indexは二つのHTMLエレメントが重なった時、どちらが上にくるかをセットします。

数が大きい方が上にきます。

Transitions

Diviの使い方、Transitions

これはアニメーションの設定なんですが、開始時の表示アニメーションではなく、hoverの状態になった時のアニメーションです。

この記事ではhoverについて書いてないので、割愛します。

ですが詳しく知りたい方は、この記事をみてください。


これで今現在存在する全てのDiviモジュールの設定画面の項目はカバーしました。

是非色々試してみてください。

Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。

そして質問がありましたら、どうぞこの記事にコメントするか、Diviサロンでお願いします。完全無料です。

Diviサロンに参加する

それではまた!

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Scroll to Top