ホバーまたはDiviでクリックして複数の要素のスタイルを変更する方法

公開: 2020-09-04

最終的に、Webデザインの世界では、コーダーと非コーダーの両方が、DiviWebサイトにさらに高度なカスタマイズと機能を追加しようとしています。通常、これには、さまざまな理由でJavascript / JQueryを使用してページ上の要素のスタイルを変更することが含まれます。ボタンをクリックしたときにお問い合わせフォームを表示することをお勧めします。または、リンクにカーソルを合わせたときに画像を変更することもできます。

このチュートリアルでは、ホバーまたはDiviをクリックして複数の要素のスタイルを変更する方法を説明します。まず、Diviの組み込みの設計オプションを利用して、断面レイアウトを設計します。次に、カスタムCSSと組み合わせて使用できるjQueryの簡単なスニペットを紹介し、ボタンにカーソルを合わせたりクリックしたりしたときに、そのセクションの要素のスタイルを調整します。これは（特に初心者にとっては）複雑に聞こえるかもしれませんが、それがいかに簡単に実行できるかに驚くかもしれません。

始めましょう！

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

ボタンにカーソルを合わせると、断面レイアウトのデザインが変更されます。

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

そして、これはボタンをクリックすることで変更される同じセクションレイアウトデザインです。ボタンのテキストもクリックすると変化することに注意してください。

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。「再購読」したり、追加のメールを受信したりすることはありません。

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

無料でダウンロード

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

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

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

divi通知ボックス

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

コーナータブの拡張

開始するには、次のことを行う必要があります。

まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

パート1：断面レイアウトの設計

開始するには、新しい2列の行を作成します。

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

セクション設定

モジュールを追加する前に、セクションの設定を開き、以下を更新してください。

背景色：#ffffff

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

トップディバイダースタイル：スクリーンショットを参照
トップディバイダーカラー：#ffffff
トップディバイダーの高さ：5vw

ボトムディバイダースタイル：同じ
ボトムディバイダーカラー：#ffffff
ボトムディバイダーの高さ：5vw

パディング：6vw上部、6vw下部

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

画像の前

2列の行の左側の列に、新しい画像モジュールを追加します。

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

次に、紹介したい画像をアップロードします。このチュートリアルでは、Learning Management（LMS）LayoutPackの画像を使用しています。これは約800x550ピクセルです。

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

[デザイン]タブで、配置を更新し、[全幅を強制]オプションを有効にします。

画像の配置：中央
全幅を強制：はい

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

残像

次に、ボタンにカーソルを合わせてクリックしたときに表示される別の画像を作成します。

イメージを作成するには、前のイメージモジュールを複製します。

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

次に、新しい画像をアップロードします。ホバー/クリックすると他の画像が置き換えられるため、画像は他の画像と同じサイズにする必要があります。

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

この画像では、絶対位置を指定します。これにより、ページ上の実際のスペースを占有することなく、画像が他の画像の真上に配置されます。

位置：絶対

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

[デザイン]タブで、フィルターオプションの下の不透明度を変更して、画像が完全に非表示になるようにします。

不透明度：0％

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

テキスト見出しを追加

右側の列に、新しいテキストモジュールを追加します。

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

次に、次のHTMLを本文のコンテンツ領域に貼り付けます。

<h3><span>Design</span> Anything You Want <span>with Divi</span></h3>

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

テキスト内の一部の単語がスパンタグでラップされていることに注意してください。これは、後でカスタムCSSを使用して、これらの単語をターゲットにしてスタイルを設定できるようにするためです。

[デザイン]タブで、H3スタイルのオプションを次のように更新します。

見出し3フォント：Montserrat
見出し3フォントの太さ：超太字
見出し3フォントスタイル：TT
見出し3テキストサイズ：65px（デスクトップとタブレット）、40px（電話）
見出し3文字の間隔：0.8em
見出し3行の高さ：1.3em

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

これにより、ボタンにカーソルを合わせたりクリックしたりしたときに変更するデザイン要素を保持するセクションレイアウトが処理されます。この次のセクションでは、スタイルの変更を開始するために使用するボタンを追加します。

ボタンのセクションを作成

現在のセクションの下に新しい通常のセクションを作成します。

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

次に、セクションに1列の行を追加します。

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

追加ボタン

列に、新しいボタンモジュールを追加します。

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

ボタンのテキストを「SeeAfter」に変更します。

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

[デザイン]タブにジャンプして、次のようにボタンのデザインを更新します。

ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：16px
ボタンのテキストの色：#ffffff
ボタンの背景：＃4b4baf
ボタンの背景（ホバー）：＃67ddc1
ボタンの境界線の幅：0px
ボタンの文字間隔：4px
ボタンフォント：Montserrat
ボタンのフォントの太さ：半太字
ボタンのフォントスタイル：TT

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

パート2：要素へのCSSクラスの追加

デザインが整ったので、カスタムコード（CSSとJQuery）を使用して残りのデザイン変更を実行します。ただし、カスタムコードの追加を開始する前に、ボタンにカーソルを合わせたりクリックしたりするときに変更するすべての要素にCSSクラスを追加する必要があります。

セクションにCSSクラスを追加する

セクションにCSSクラスを追加するには、セクション設定を開き、[詳細設定]タブをクリックします。次に、次のCSSクラスを入力します。

CSSクラス：et-change-style_section

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

画像にCSSクラスを追加する

次に、左側の列の最初の画像の設定を開き、次のCSSクラスを追加します。

CSSクラス：et-before-image

これは、ボタンのホバー/クリックの「前」に表示される画像になります。

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

レイヤーモーダルを使用して、2番目の画像（不透明度フィルターで非表示になっている画像）の設定を開き、次のCSSクラスを追加します。

CSSクラス：et-after-image

これは、ボタンのホバー/クリックの「後に」表示される画像になります。

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

テキストにCSSクラスを追加する

次に、次のCSSクラスを右側の列のテキストモジュールに追加します。

CSSクラス：et-style-text

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

ボタンにCSSクラスを追加

最後に、次のように下部セクションのボタンにカスタムCSSクラスを追加します。

CSSクラス：et-toggle-button

後でコード内のホバー/クリック機能のボタンをターゲットにするために、このクラスが必要です。

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

パート3：ホバーまたはクリックでスタイルを変更するためのカスタムコードの追加

すべてのCSSクラスが配置されたので、ボタンにカーソルを合わせてクリックしたときに、これらすべての要素のスタイルを変更するために必要なコードを追加できます。

コードモジュールの追加

コードを追加するには、下部のセクションのボタンの下にコードモジュールを追加します。

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

jQueryコードを貼り付けます

次に、次のJQueryを貼り付けます。コードは（JSファイルではなく）HTMLドキュメントに追加するため、必ずスクリプトタグでコードをラップしてください。

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').hover(function(){
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
        });
    });
})( jQuery );

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

コードを見ると、ボタンとセクションに追加したCSSクラスがわかります。

ボタンクラス（「.et-toggle-button」）は、ホバー時に機能を開始する要素をターゲットにするために使用されています。

ホバーすると、関数はセクションクラス「.et-change-style_section」を持つ要素を検索し、カーソルがボタンの上にあるときに新しいクラス（「.et-change-style-active」）を切り替え/追加します。

ホバー状態で新しいクラス（「.et-toggle-button_active」）を切り替えるために、ボタンも（「$ this」を介して）ターゲットにされています。

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

ホバー時にこれらの要素のスタイルを変更するための鍵は、これらの追加の新しいCSSクラスをセクションとボタンに追加/切り替えることです。

たとえば、クラス「.et-change-style_section」のセクションに追加のクラス（「.et-change-style_active」）が与えられると、カスタムCSSを使用して、元々与えられたセクションのスタイルを変更できます。組み込みのDiviオプション。

カスタムCSSで要素のスタイルを変更する

コードモジュールを開き、次のカスタムCSSをJQueryスクリプトの上に貼り付け、必要なスタイルタグでラップしていることを確認します。

 .et_pb_section.et-change-style_section.et-change-style_active {
   background-color:#484db0 !important;
 }

最初のセクションクラスがセレクターとして新しいクラスと結合されていることに注意してください。次のCSSは、その新しいクラスがアタッチされたときのセクションにのみ適用されます。装着されていない場合は、オリジナルデザインが表示されます。この例では、ボタンにカーソルを合わせるとセクションの背景色が変わります。

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

次に、スタイルタグ内に次の追加のCSSを貼り付けます。

  .et-change-style_active .et-after-image {
    filter: opacity(100%);
  }
  .et-change-style_active .et-before-image {
    filter: opacity(0%);
  }

親セクションにはホバー時にクラスが与えられるため、同じCSSクラスを使用してセクションの子要素（画像など）をターゲットにすることができます。ただし、これは親コンテナ/セクション内のクラスであるため、CSSクラスは変更しようとしている要素のクラスの前に置く必要があります。この例では、親セクションに指定されたCSSクラス（「.et-change-style_active」）は、子イメージ（「.et-after-image」および「.et-before-image」）が指定されたクラスの前にあります。

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

後の画像のCSSは、ボタンをホバーすると画像を表示します。また、前の画像のCSSは、ボタンホバー時に画像を非表示にします。その結果、ボタンをホバーすると、最初の画像が新しい画像に変更されます。

次に、スタイルタグ内の残りのCSSに貼り付けます。

  .et-change-style_active .et-style-text h3, .et-change-style_active .et-style-text p {
    color: #ffffff;
  }
  .et-change-style_active .et-style-text h3 span {
    color: #67ddc1;
  }
  .et-toggle-button_active {
    transform: scale(1.1);
    background-color: #67ddc1 !important;
  }  
  .et-change-style_active, .et-before-image, .et-after-image, .et-style-text h3  {
    transition: all 0.3s;
  }

これらのCSSスニペットは、セクション（またはボタン）に新しいクラスがある場合に、同じ概念を使用して要素のスタイルを変更しています。

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

最終結果（ホバー）

コードを追加したら、変更を保存し、ページを開いて結果を表示します。ボタンにカーソルを合わせると、ターゲットとする要素がどのように変更されているかに注目してください。

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

ホバーの代わりにクリックでスタイルを変更する

（ホバーするのではなく）ボタンをクリックしたときに同じ要素のスタイルを変更したい場合は、JQueryにいくつかの変更を加えるだけです。ほとんどのコードは同じままです。主な違いは、「ホバー」方式が「クリック」に置き換えられていることです。また、クリック時にボタンのテキストを変更する便利なコードスニペットを追加しました。

クリック機能を追加するには、現在のJQueryを次のように置き換えます（ここでも、スクリプトタグでラップされていることを確認してください）。

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').click(function(e){
            e.preventDefault();
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
            if ($this.hasClass('et-toggle-button_active')){
                $this.text('See Before');
            } else {
                $this.text('See After');
            }
        });
    });
})( jQuery );

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

これが最終結果です。

diviでクリックまたはホバーすると、複数の要素のスタイルを変更できます

最終的な考え

何かにカーソルを合わせたりクリックしたりするときに、ページ上の複数の要素のスタイルをターゲットにして変更できることは、Webデザインに役立つスキルです。この手法は、さまざまなユースケース（前後、CTAなど）に使用できます。確かに、CSSとJS / JQueryについて少し知っておくと役立ちます。しかし、このチュートリアルで見たように、驚くべき結果を得るためにコードのトーンを知る必要はありません！

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

乾杯！

ホバーまたはDiviでクリックして複数の要素のスタイルを変更する方法

スニークピーク

レイアウトを無料でダウンロード

無料でダウンロード

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

始めるために必要なもの

パート1：断面レイアウトの設計

セクション設定

画像の前

残像

テキスト見出しを追加

ボタンのセクションを作成

追加ボタン

パート2：要素へのCSSクラスの追加

セクションにCSSクラスを追加する

画像にCSSクラスを追加する

テキストにCSSクラスを追加する

ボタンにCSSクラスを追加

パート3：ホバーまたはクリックでスタイルを変更するためのカスタムコードの追加

コードモジュールの追加

jQueryコードを貼り付けます

カスタムCSSで要素のスタイルを変更する

最終結果（ホバー）

ホバーの代わりにクリックでスタイルを変更する

最終的な考え

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