Diviのホバーでブログ投稿の抜粋を切り替える方法

公開: 2021-08-02

ホバーでブログ投稿の抜粋を切り替えると、それらの抜粋を完全に放棄することなく、ブログ投稿のコンパクトなグリッドレイアウトを維持するための効果的な方法になります。 アイデアは、最初に抜粋を非表示にしてから、グリッド内の投稿アイテムにカーソルを合わせると表示を切り替えることです。 これにより、ユーザーはブラウザのビューポート内でより多くの投稿を表示できると同時に、投稿にカーソルを合わせると、関心のある投稿の抜粋を表示するオプションが提供されます。

このチュートリアルでは、Diviでホバーしたときにブログ投稿の抜粋を切り替える方法を紹介します。 これを行うために、ホバー時にブログモジュールの投稿アイテムの抜粋を切り替えるカスタムCSSのスニペットをいくつか追加します（JQueryは必要ありません）。 コードを配置したら、Diviの組み込み設定を使用して、ブログモジュールのスタイルを設定できます。

始めましょう！

スニークピーク

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

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

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

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

無料でダウンロード

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

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

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

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

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

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

divi通知ボックス

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

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

始めるために必要なもの

コーナータブの拡張

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

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

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

Diviのホバーでブログ投稿の抜粋を切り替える方法

ブログモジュールレイアウトの作成

まず、ブログ投稿の基本的なレイアウトを作成する必要があります。 この例では、ブログモジュールを含む1列の行を追加します。

行を作成

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

行幅

行設定モーダルで、次のデザイン設定を更新して幅を調整します。

  • 幅：95％
  • 最大幅：1200px

ブログモジュールを追加する

行の列内に、新しいブログモジュールを追加します。

ブログモジュールの設定

次に、[続きを読む]ボタンを表示するように選択して、ブログモジュールのコンテンツ設定を更新します。

[デザイン]タブで、ブログのグリッドレイアウトを選択します。

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

  • CSSクラス：toggle-blog-excerpt

次のステップでは、このクラスをカスタムCSSコードのセレクターとして使用します。

コードモジュールを使用してカスタムCSSを追加する

この時点で、ブログモジュールにカスタムCSSクラスが追加されたブログ投稿の基本的なグリッドレイアウトができました。 このCSSクラスセレクターを使用して、この特定のブログモジュールをターゲットにし、ホバー時にトグル効果を投稿アイテムの投稿抜粋部分に追加します。

CSSを追加するには、コードモジュールを使用します。 ブログモジュールの下に新しいコードモジュールを追加します。

抜粋後のトグル効果に必要な次のカスタムCSSを貼り付けます。 CSSを必要なスタイルタグでラップしてください。 

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }
  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }
  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }
  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }
  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }
}

これまでの結果をライブページで確認してみましょう。

結果

記事の最後で、コードについてもう少し詳しく説明します。 しかし、とりあえず、これまでの結果を確認してみましょう。

DiviBuilderを使用してブログモジュールにスタイリングを追加する

ブログ投稿の抜粋にトグル効果を与えるCSSが配置されたので、DiviBuilderを使用してブログモジュールにスタイルを追加できます。

この例では、スタイルの調整を最小限に抑えますが、独自のスタイリングも自由に検討してください。

スタイル投稿タイトル

  • タイトルフォントの太さ：太字
  • タイトルテキストの色：＃6d6a7e
  • タイトルテキストサイズ：20px
  • タイトルラインの高さ：1.3em

スタイル続きを読むテキスト

  • 続きを読むフォントの太さ：太字
  • 続きを読むフォントスタイル：TT
  • 続きを読むテキストの色：＃6d6a7e
  • 続きを読む文字間隔：1px
  • 続きを読むラインの高さ：3.5em

スタイルのページ付け

  • ページ付けフォントの太さ：太字
  • ページ付けフォントスタイル：TT
  • ページ付けテキストの色：＃6d6a7e
  • ページ付け文字の間隔：1px

境界線を削除

  • グリッドレイアウトの境界線の幅：0px

ホバー上のスタイルボックスシャドウ

  • ボックスシャドウ：スクリーンショットを参照
  • ボックスシャドウの垂直位置：0px
  • ボックスシャドウブラー強度：38px
  • 影の色（デスクトップ）：透明
  • シャドウカラー（ホバー）：rgba（109,106,126,0.25）

最終結果

CSSコードについて

以前にコードモジュールに追加されたカスタムCSSの内訳に興味がある場合は、ここにあります。

まず、CSSをデスクトップブラウザにのみ適用するメディアクエリですべてのCSSをラップする必要があります。 

@media all and (min-width: 981px) {

}

次に、投稿コンテンツに500ミリ秒のトランジションを追加する必要があります。これは、投稿アイテムにカーソルを合わせたときに発生するスタイルの変更の抜粋です。

  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }

第三に、編集できるように、ビジュアルビルダーを使用するときに投稿のコンテンツ/抜粋が表示されたままであることを確認する必要があります。

  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }

第4に、ページが読み込まれるときに、デフォルトで投稿のコンテンツ/抜粋を非表示にする必要があります。 これを行うには、visibility：hiddenを使用してコンテンツを非表示にします。 次に、opacity：0を追加して、ホバー状態にopacity：1を追加したときに、フェードインおよびフェードアウトの遷移効果を取得できるようにします。 また、max-height：500pxをホバー状態に追加するときに、max-height：0pxを使用してスライドトグル効果を取得します。

  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }

5番目に、投稿アイテム（.et_pb_post）がホバー状態にあるときの投稿コンテンツ/抜粋を表示します。 これを行うには、可視性を可視に、不透明度を1に、最大高さを500pxに変更します。

  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }

最終的なスニペットでは、すべての投稿アイテムに同じ最小の高さを指定して、垂直方向に配置されたグリッドレイアウトをすっきりさせることができます。

  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }

最終的なコードをもう一度見てみましょう。 

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }
  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }
  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }
  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }
  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }
}

最終的な考え

このチュートリアルに示されているように、CSSのスニペットをいくつか追加すると、ブログ投稿の抜粋を切り替えてホバー効果を高めるために必要な機能を提供できます。 この方法の最も優れている点は、Diviの組み込みオプションを使用して、ブログモジュールに必要なスタイルを追加することで、この機能を構築できることです。 これにより、より高度なスタイリングを投稿アイテムに追加して、ホバー効果を増やすことができます。 うまくいけば、これはあなたのDiviウェブサイトのブログにデザインと機能性のさらなる後押しを与えるのに役立つでしょう。

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

乾杯！