Diviサイトをより楽しくする6つのマイクロインタラクション（チュートリアル+無料ダウンロード）

マイクロインタラクションは、サイトとやり取りする際のユーザーエクスペリエンスを向上させる優れた方法です。 アイコン、ボタン、または画像のわずかなアニメーションにより、ユーザーは楽しく目的のある方法で行動を起こすことができます。 サイトに含めることができるマイクロインタラクションは無数にありますが、経験則として、それらを「マイクロ」に保つことをお勧めします。 あなたはそれをやり過ぎたくない。

今日は、Divi BuilderとカスタムCSS（jqueryなし）を使用してDiviWebサイトに追加できるいくつかの簡単なマイクロインタラクションを紹介します。 ボタン、アイコン、画像など、ユーザーが通常操作する要素に集中します。

始めましょう。

スニークピーク

これは、このチュートリアルで構築するマイクロインタラクションの概要です。

＃1ホバーでの画像のスケーリング

マイクロインタラクション＃1の構築を開始します

＃2バウンススクロールダウンアイコン

マイクロインタラクション＃2の構築を開始します

＃3ホバーで宣伝文とボタンのアイコンを回転させる

マイクロインタラクション＃3の構築を開始します

＃4ボタンテキストを表示および非表示にするスライドボタンアイコン

マイクロインタラクション＃4の構築を開始します

＃53D画像の遠近法による回転

マイクロインタラクション＃5の構築を開始します

＃6ボタンスライダーマイクロインタラクション

マイクロインタラクション＃6の構築を開始します

私たちのYoutubeチャンネルを購読する

始めるために必要なもの

始めるために本当に必要なのはDiviだけです。 フロントエンドでDiviBuilderを使用して、最初から例を示します。

簡単にアクセスできるようにファイルをダウンロードする

これらのマイクロインタラクションの実用的な例をWebサイトですばやく簡単に実行したい方のために、この記事の最後にダウンロードを含めました。 そうすれば、チュートリアルに沿って従うときに、実用的な例を得ることができます。

ダウンロード

＃1ホバーでの画像のスケーリング

スケーリングとは、要素のサイズを調整することです。 したがって、ホバー時に画像を大きくしたい場合（たとえば）、必要なのは、画像を特定の割合で拡大縮小するための小さなCSSスニペットを追加することだけです。 これにより、ユーザーが画像にカーソルを合わせたときに、小さいながらも効果的なマイクロインタラクションを作成できます。 これを、画像を使用する3つの一般的なDiviモジュール（画像モジュール、宣伝文モジュール、人物モジュール）に適用する方法を紹介します。

先に進み、3列の行を持つ新しいセクションを作成して、各例を各列に追加できるようにします。

画像モジュールを使用したホバーでの画像のスケーリング

画像モジュールを使用して画像にスケーリング画像のマイクロインタラクションを追加するには、最初に画像モジュールを最初の列に追加します。

次に、選択したモジュールに画像を追加します。

次に、画像設定の[詳細設定]タブに次のCSSクラスを追加します。

CSSクラス：scale-image

これにより、カスタムCSSをページ設定に追加するときに、この特定のモジュールをターゲットにすることができます。 画像の拡大縮小に必要なCSSを追加するには、ページ設定を開き、次のカスタムCSSを追加します。

/**This scales the image in the image module with the CSS class "scale-image" **/
.scale-image {
  overflow:hidden;
}
.scale-image img{
 transition: all 0.2s;
}
.scale-image:hover img {
  transform: scale(1.3)
}

結果を確認してください。

ホバーでの宣伝文句モジュール画像のスケーリング

宣伝文モジュールの画像に同じ効果を追加するには、最初に宣伝文モジュールを2番目の列に追加します。

次に、選択した画像を宣伝文モジュールに追加します。

次に、次のCSSクラスをblurbモジュールに追加します。

CSSクラス：scale-blurb-image

このCSSクラスを配置すると、宣伝文句の画像を対象とするカスタムCSSを追加できるようになります。 ページ設定を開き、次のカスタムCSSを追加します。

/**This scales the image in the bl module with the CSS class "scale-blurb-image" **/

.scale-blurb-image .et_pb_main_blurb_image {
  overflow:hidden;
}
.scale-blurb-image .et_pb_main_blurb_image img {
  transition: all 0.2s;
}
.scale-blurb-image .et_pb_main_blurb_image:hover img {
  transform: scale(1.3);
}

結果は次のとおりです。

ホバーでの人物モジュール画像のスケーリング

ホバー時に人物モジュールの画像を拡大縮小するには、3番目の列に人物モジュールを追加し、モジュールで選択した画像のアップロードを追加します。

次に、次のCSSクラスをpersonモジュールに追加します。

CSSクラス：scale-person-image

次に、ページ設定を開き、次のカスタムCSSを追加します。

/**This scales the image in the person module with the CSS class "scale-person-image" **/

.scale-person-image .et_pb_team_member_image {
  overflow:hidden;
}
.scale-person-image img {
  transition: all 0.2s;
}
.scale-person-image img:hover {
  transform: scale(1.3);
}

スケーリング画像のマイクロインタラクションを使用して、3つのモジュールすべての結果を確認してください。

＃2バウンススクロールダウンアイコン

この次のマイクロインタラクションは、全幅ヘッダーモジュールに組み込まれているスクロールダウンアイコンにバウンスアニメーションを追加します。 これは、ページのさらに下に詳細情報があることを訪問者にさらに通知するための微妙な方法です。 また、このバウンス効果をデフォルトで使用するか、ホバーするかを選択できます。

これがその方法です。

まず、全幅ヘッダーモジュールを使用して新しい全幅セクションを追加します。

次に、以下を更新します。

テキストとロゴの向き：センター
下スクロールボタンを表示：はい
アイコン：[選択したアイコンを選択]

次に、次のCSSクラスを追加します。

CSSクラス：bounce-scroll-icon

このクラスを使用すると、cssでスクロールアイコンをターゲットにして、ページの読み込み時にデフォルトでアイコンをアニメーション化できます。

次に、全幅ヘッダーモジュールを複製し、CSSクラスを次のように更新します。

CSSクラス：bounce-scroll-icon-hover

このクラスを使用すると、スクロールアイコンをcssでターゲットにして、ホバー時にアイコンをアニメーション化できます。

次に、ページ設定を開き、次のカスタムCSSを追加して、2つの例のバウンスアニメーションをアクティブにします。

.bounce-scroll-icon-hover .et-pb-icon {
  position: absolute;
  top:-10px;
  left:0;
  right:0;
}
.bounce-scroll-icon-hover .et-pb-icon:hover {
  animation-duration: 2s;
  animation-name: bounce;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transition: all .2s;
}

.bounce-scroll-icon .et-pb-icon {
  position: absolute;
  top:-10px;
  left:0;
  right:0;
  animation-duration: 2s;
  animation-name: bounce;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transition: all .2s;
}
.bounce-scroll-icon .et-pb-icon:hover {
  animation-name: none;
}

@keyframes bounce {
      0%   {top: -10px; opacity: 1;}
    50%  {top: 15px; opacity:0;}
    100% {top: -10px;opacity:1;}
}

2つの例の結果を確認してください。 上部のヘッダースクロールアイコンはデフォルトでアニメーション化され、下部のヘッダースクロールアイコンはホバー時にアニメーション化されます。

＃3ホバーでアイコンを回転させる

アイコンにわずかな回転を追加すると、ユーザーが要素をクリックするように促す効果的なマイクロインタラクションになります。 アイコンが組み込まれている最も人気のある2つのDiviモジュールは、ボタンモジュールと宣伝文モジュールです。ホバー時にこれらのアイコンに回転を追加する方法を紹介したいと思いました。

ホバーでボタンアイコンを回転させる

Diviには、デフォルトでボタンアイコン用の便利なマイクロインタラクションがすでに付属しています。 ボタンにカーソルを合わせると、ボタンアイコンが表示されて右に移動し、ボタンをクリックすると別のページにリダイレクトされることを示します。 ただし、もう少しクリエイティブにしたい場合は、アイコンを回転させてまったく新しいマイクロインタラクションを作成できます。

ホバー時にボタンアイコンを回転するには、最初に1列の行を持つ新しいセクションを追加します。 次に、ボタンモジュールを行に追加します。

次に、ボタンの設定を次のように更新します。

ボタンにカスタムスタイルを使用する：はい
ボタンのホバー時にアイコンのみを表示：いいえ
ボタンアイコン：[選択アイコンを選択]

次に、次のCSSクラスを追加します。

CSSクラス：rotate-button-icon

アイコンとCSSクラスを配置したら、次のカスタムCSSをページ設定に追加するだけです。

/** This rotates the button icon on hover for the button module with the CSS class "rotate-button-icon" **/
.rotate-button-icon:after {
transform: rotate(-90deg);
}

.rotate-button-icon:hover:after {
transform: rotate(0deg);
}

これにより、アイコンが最初は反時計回りに90度回転し、ホバーすると0度に戻ります。

結果は次のとおりです。

宣伝文モジュールアイコンの回転

宣伝文のモジュールアイコンを回転させるために、最初に3列の行を持つ新しいセクションを作成しましょう。 次に、列1に宣伝文モジュールを追加し、次の宣伝文の設定を更新します。

アイコンを使用：はい
アイコン：[選択したアイコンを追加]
テキストの向き：中央
CSSクラス：rotate-blurb-icon

次に、次のカスタムCSSをページ設定に追加します。

/** This rotates a blurb icon with the css class "rotate-blurb-icon" **/

.rotate-blurb-icon .et-pb-icon {
  transition:  0.2s ease-out;
  transform: rotateZ(-90deg);
}

.rotate-blurb-icon .et_pb_blurb_content:hover .et-pb-icon {
  transform: rotateZ(0deg);
}

結果は次のとおりです。

これは、タイトルの左側に配置されたアイコンでも機能します。 あなたがする必要があるのは次のように宣伝文句の設定を更新することです：

画像/アイコンの配置：左
タイトル行の高さ：1.7em

結果を確認してください。

＃4ボタンテキストを表示および非表示にするスライドボタンアイコン

ホバーのアイコンへのボタンテキスト

このマイクロインタラクションは、デフォルトでアイコン付きのボタンテキストを表示し、ホバーするとテキストを覆うようにアイコンを移動します。

これがその方法です。

1列の行を持つ新しいセクションを追加します。 次に、ボタンモジュールを行に追加し、次のボタン設定を更新します。

ボタンにカスタムスタイルを使用する：はい
ボタンの背景色：＃0c71c3
ボタンの境界線の幅：0px
ボタンアイコンの色：#ffffff
CSSクラス：button-text-to-icon

次に、次のカスタムCSSをページ設定に追加します。

/** This styles button to cover button text with icon on hover when button has class "button-text-to-icon" **/

body #page-container .et_pb_button.button-text-to-icon:after {
  width: 1em;
  transition: all .3s !important;
  margin-left: 0;
  border-left: 1px solid #dddddd;
  left: calc(100% - 1em);
}

body #page-container .et_pb_button.button-text-to-icon:hover:after {
  border-left: 1px solid transparent;
  left: calc(50% - 0.5em);
  transform: scale(1.3);
}

body #page-container .et_pb_button:hover:after {
    color: #ffffff;
    margin-left: 0px;
    left: 0;
    width: 100%;
    text-align: center;
    transform: scale(1.5);
}

結果を確認してください。

ホバーでテキストを表示するボタンアイコン

ボタンアイコンを最初に表示してからアイコンをスライドさせてボタンテキストを表示するのとは逆の効果を作成することもできます。 これを行うには、ボタンモジュールを複製し、次のボタン設定を更新します。

ボタンのテキストの色（デフォルト）：＃0c71c3
ボタンのテキストの色（ホバー）：＃ffffff

次に、CSSクラスを次のように置き換えます。

CSSクラス：button-icon-to-text

次に、次のカスタムCSSをページ設定に追加します。

/** This styles button to reveal button text from icon on hover when button has class "button-text-to-icon" **/

body #page-container .et_pb_button.button-icon-to-text:after {
    width: 1em;
    transition: all .3s !important;
    margin-left: 0;
  border-left: 1px solid transparent;
      left: calc(50% - 0.5em);
    transform: scale(1.3);
}

body #page-container .et_pb_button.button-icon-to-text:hover:after {
  border-left: 1px solid #dddddd;
    left: calc(100% - 1em);
  transform: scale(1);
}

結果を確認してください。

＃53D画像の遠近法による回転

このマイクロインタラクションは、デフォルトで3D画像の遠近法と回転でスタイル設定された画像モジュール画像から始まります。 次にホバーすると、画像は通常の画像表示になります。

これがその方法です。

まず、3列の行を持つ新しいセクションを作成します。 次に、画像モジュールを列1に追加し、選択した画像モジュールに画像を追加します。

この効果のために、カスタムCSSをモジュールに直接追加できます。 [詳細設定]タブに移動し、メイン要素の下に次のカスタムCSSを追加します。

メイン要素CSS（デフォルト）：

transform: perspective(700px) rotateY(45deg);
transition: all .2s;

このcssは、TransformCSSプロパティを使用して画像に対して2つのことを行っています。 まず、画像とページを表示したときのユーザーの視点との間の距離である700pxの視点を追加します。 CSSは、画像に回転も追加します。 rotateY（45deg）は、Y軸を中心に画像を45度（時計回り）回転させます。 また、遠近法を適用すると、画像は3次元の外観になります。

メイン要素CSS（ホバー）：

transform: perspective(700px) rotateY(0deg);

これにより、ホバー時に画像の回転がなくなり、通常のように見えるため、ユーザーは画像をよりよく見ることができます。

それでは、結果を確認してみましょう。

このマイクロインタラクションの例をさらにいくつか見てみましょう。 先に進み、イメージモジュールをコピーして、列2と列3に貼り付けます。列2の複製イメージモジュールで、カスタムCSSを次のように更新します。

メイン要素CSS（デフォルト）：

transform: perspective(700px) rotateX(45deg);
transition: all .2s;

メイン要素CSS（ホバー）：

transform: perspective(700px) rotateX(0deg);

ここでの唯一の違いは、「rotate」の後の文字「X」であることに注意してください。 これにより、画像がx軸を中心に45度回転するようになります。 次に、ホバー時に度の値を0に設定して、通常の値に戻します。

結果は次のとおりです。

列3の複製イメージモジュールで、カスタムCSSを次のように更新します。

メイン要素CSS（デフォルト）：

transform: perspective(700px) rotateY(-45deg);
transition: all .2s;

メイン要素CSS（ホバー）：

transform: perspective(700px) rotateY(0deg);

このCSSと列1の画像で使用されているCSSの唯一の違いは、「-45deg」の値であることに注意してください。 これにより、画像がY軸を中心に反時計回りに回転します。

これは、遠近法と回転を使用した3つの画像マイクロインタラクションすべての最終結果です。

画像モジュールの組み込み設定を使用して、さらに組み込みのホバー効果とデザインを追加することを忘れないでください。 たとえば、これはボックスシャドウ効果を追加するのにも最適な場所です。

＃6ボタンスライダーマイクロインタラクション

この最後のマイクロインタラクションでは、ホバー時に追加情報（実際には完全に新しいボタン）を表示するボタンスライダーを作成します。 基本的な考え方は、列にカスタムの高さを指定してから、列内に2つのボタンモジュールを積み重ねることです。 一番上のボタンはデフォルトでユーザーに表示されるものですが、2番目のボタンはユーザーがボタンにカーソルを合わせたときに表示される「追加情報」のあるボタンになります。

作成方法は次のとおりです。

このボタンは行の列の幅全体に広がるため、幅が広すぎない列のある行にボタンを追加すると最適に機能します。 この例では、1列の行を使用してから、最大幅を行に設定して、大きなブラウザーでボタンが広くなりすぎないようにします。

1列の行で新しいセクションを作成します。 次に、ボタンモジュールを行に追加し、次のボタン設定を更新します。

ボタンテキスト：「ダウンロード」

ボタンの配置：中央
ボタンにカスタムスタイルを使用する：はい
ボタンのテキストの色：#ffffff
ボタンの背景色：＃0c71c3
ボタンの境界線の幅：0px
ボタンの境界線半径：0px
ボタンアイコン：スクリーンショットを参照
ボタンアイコンの色：#ffffff
ボタンアイコンの配置：左
ボタンのホバー時にアイコンのみを表示：いいえ

カスタムマージン：0px下

次に、作成したボタンを複製して、作成したボタンのすぐ下に複製がスタックするようにします。 次に、重複するボタンの設定を次のように更新します。

ボタンテキスト：MP3（3.5 mb）

ボタンのテキストの色：＃0c71c3
ボタンの背景色：#ffffff
ボタンアイコン：スクリーンショットを参照
ボタンアイコンの色：＃0c71c3

行のスタイルを設定する前に、一番上のボタンにCSSクラスを追加する必要があります。 上部のボタン設定を開き、次のCSSクラスを追加します。

CSSクラス：トップボタン

両方のボタンが配置されたので、ボタンの最大幅として機能するカスタム幅と、ページ設定に追加するカスタムCSSの列CSSクラスで行設定を更新しましょう。 行設定を開き、以下を更新します。

カスタム幅：200px
列CSSクラス：スライダーボタン

行ではなく列にCSSクラスを追加してください。

これで、カスタムCSSを追加する準備が整いました。 ページ設定を開き、次のCSSを追加します。

/** This styles the slider button **/

.slider-button {
  height: 50px;
  overflow:hidden;
  border:2px solid #0c71c3;
}

.slider-button .et_pb_button {
  display:block;
  margin: 0 !important;
}

.slider-button:hover .top-button {
  margin-top: -48px !important;
}

このCSSは、デフォルトサイズのボタンでのみ機能します。 これは、ホバーするまで2番目のボタンを非表示にするために、列に固定の高さを指定する必要があるためです。 現在、列の高さ（クラス「スライダーボタン」を使用）には50pxの高さが与えられています。 これは、列に与えられた2pxの境界線も考慮します。 ホバーすると、上部のボタン（クラス「top-button」を含む）が上に移動し、上部の余白が-48px（ボタンの高さから2pxの境界線の1つを引いたもの）になります。ただし、フォントを変更すると-ボタンのサイズまたはパディングについては、それに応じて上部のボタンの余白とともにスライダーボタンクラスの高さを調整する必要があります。

これが最終結果です。

自分で使用するために、さまざまなテキスト/情報やアイコンでボタンのスタイルを設定できることを忘れないでください。 これは、独自の行動を促すフレーズでユーザーに追加情報を提供するための優れた方法です。

無料ダウンロード：このチュートリアルの既成のレイアウトとCSSファイルを入手する

これらのマイクロインタラクションがWebサイトでどのように表示されるかをすぐに確認したい場合は、以下のzipファイルをダウンロードできます。 zipファイルをダウンロードしたら、ハードドライブでファイルを見つけます。 これは「microinteraction-examples.zip」と呼ばれます。 ファイルを解凍すると、2つのファイルが表示されます。 「microinteraction-examples.json」という名前のファイルはDiviレイアウトです。 Diviライブラリにアップロードする必要があります。 これを行うには、WordPressダッシュボードからDivi> Divi Libraryに移動し、ページ上部のインポートボタンをクリックします。 「microinteractions.css」という名前のファイルには、チュートリアルで使用されているカスタムCSSが含まれています。 このCSSは、ページ設定のカスタムCSSまたはテーマカスタマイザーの[追加のCSS]ボックスにコピーする必要があります。 レイアウトがロードされたら、Diviのドラッグアンドドロップ機能を使用して、microinteractions.cssファイルをDiviBuilderに直接ドラッグすることもできます。 これにより、CSSがページ設定に自動的に追加されます。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

最終的な考え

これらのマイクロインタラクションがお役に立てば幸いです。 これらは、サイト全体でDivi（CSSのみを使用）で簡単に使用できます。 時間と単純さのために、私はモジュールの基本的なデフォルトスタイルを使用しましたが、より創造的なスタイルのために必要に応じてデザインオプションを自由に調整してください。 また、これらの例のCSSをニーズに合わせて調整したり、まったく新しいものを考え出したりすることを躊躇しないでください。

コメントでお返事をお待ちしております。

乾杯！