Divi コメント モジュールのスクロール コンテナーを作成する方法

ブログ投稿のコメント セクションを使用すると、読者は他のユーザーと交流できます。 また、ユーザーは、コメントを取り込んでいる人と会話を作成できるようになります。 多くの騒ぎを巻き起こすような特別な投稿の場合、コメント セクションはかなり忙しくなることがあります。 長いコメント セクションをナビゲートしやすくする方法を見つけたいと思うかもしれません。 ディビでスクロール可能なコメントを作成することを検討してください!

Divi コメント モジュールのスクロール コンテナーを作成することで、ブログのスクロール リーダーの量を最小限に抑えることができます。 したがって、彼らはあなたのサイトでより良い経験をしています. サイトを構築するときは、ユーザー エクスペリエンスの要因を考慮することが重要です。Divi にスクロール可能なコメントを追加することで、読者がサイトをより簡単に楽しめるようになります。これは常に良いことです.

コメントが良い理由

チュートリアルに入る前に、一般的なコメントを簡単に見てみましょう。 Divi には、コメント モジュールがあります。 このモジュールを使用すると、サイトのユーザーはページまたは投稿にコメントを残すことができます。 このモジュールを使用すると、サイトの他の読者が投稿に残した過去のコメントを読むこともできます。 投稿が魅力的である場合、投稿者 (別名、あなた) に自分の考え、意見、質問を投稿の下に残したいと思うようになる可能性があります。 これは、Elegant Themes ブログの例です。

これは、私たちのブログの WordPress に最適な 3 つの音声検索プラグインのコメント セクションです。 その中で、何人かの読者がフィードバック、感謝などを残したことがわかります。 投稿の作成者も、時間をかけて読者に返信しています。 この種のエンゲージメントは、読者に価値を提供していることを示すため、ブログやウェブサイトに適しています. さらに、サイトを使用して訪問する人々とのより強い絆を築くのに役立ちます. 野生のコメントを見たので、Divi のコメント モジュールを使用して、自分のブログ投稿のコメント セクションを管理する方法を見てみましょう。

Divi のスクロール可能なコメント: 概要

このチュートリアルでは、Divi の Software Layout Pack のブログ投稿テンプレートを使用します。 テンプレートの概要は次のとおりです。

この投稿にいくつかのコメントがあることに注目してください。 垂直スクロールバーを追加することで、ブログページのこの部分をナビゲートしやすくすることができます。 このチュートリアルでは、コメント モジュールを保持している行に垂直スクロールバーを追加します。 次に、CSS を少し使用してスクロールバーのスタイルを設定し、ページのメイン スクロールバーとは異なる外観にします。 準備？ 始めましょう！

Divi のスクロール可能なコメント: チュートリアル

コメント モジュールを使用して Divi でスクロール可能なコメントの作成を開始する前に、ソフトウェア ブログ投稿テンプレートをインストールする必要があります。 そのブログ投稿内の指示に従って、ブログ投稿テンプレートをインストールします。

コメント行の設定を入力します

テンプレートがインストールされ、満足のいくように編集されたら、コメント モジュールを保持している行に入ります。 コメント モジュールを含むセクションまでスクロールします。 行 (緑色のアウトライン) にカーソルを合わせ、歯車アイコン をクリックします。 これにより、行の設定モジュールが開きます。

行の最大高さを設定

スクロールのスタイル設定または有効化を開始する前に、行の最大高さを調整する必要があります。 これを行うには、 [デザイン] タブをクリックします。 次に、 [サイジング] タブをクリックします。 次に、最大高さオプションに 550px の最大高さを入力します。

行の詳細設定を入力してください

行の最大高さを設定したら、モーダル ボックス内の [詳細] タブをクリックします。 スクロールの魔法が起こるのはここです！ Advanced タブのさらに下にある Vertical Overflow オプションに注意してください。 すぐに戻ってきます。

垂直オーバーフローで垂直スクロールバーを有効にする

下にスクロールすると、Vertical Overflow に到達します。 ドロップダウンをクリックし、 [スクロール] を選択します。

垂直スクロールバーはありますが、万能な CSS とパディングを使用して、少しだけ見栄えを良くすることができます。

オーバーラップを防ぐためのパディングの追加

新しく追加したスクロールバーがコメント セクション内のボタンと重ならないように、行の右側と左側にパディングを追加します。 これを行うには、[行の設定] モーダルの[デザイン] タブに移動します。 次に、 [間隔] まで下にスクロールします。 Left Padding テキスト ボックスと Right Padding テキスト ボックスの間のリンク アイコンをクリックします。 行の両側に 55px のパディングを追加します。

スクロールバーに息を吹き込むスペースを追加したので、カスタム CSS を使用して見栄えを良くしましょう。

行に CSS ID を追加する

行の [ Advanced] タブに戻り、一番上までスクロールします。 CSS ID を追加します。このチュートリアルでは、 scrollieを使用します。これは、本文テンプレート設定のカスタム CSS セクション内で呼び出します。

カスタム CSS をスタイル スクロールバーに追加する

ここで、ブログ投稿テンプレートのカスタム CSS に入ります。 これにより、このテンプレートが Divi テーマ ビルダー内のすべてのブログ投稿に適用されるため、Web サイト内の各ブログ投稿で CSS が確実にアクティブになります。 本文テンプレートのカスタム CSS 設定を入力するには、ビルダーの下部中央にある紫色のボタン内の 3 つのドットをクリックします。 次に、歯車アイコン を選択します。

カスタム CSS を追加して、Divi でスクロール可能なコメントのスタイルを設定する

スクロール コンテナーのスクロールバーのスタイルを設定して、ブラウザー ウィンドウのメイン スクロールバーとの使用を区別したいと考えています。 これを行うには、いくつかの CSS を使用します。 本文テンプレートの設定に入ったら、 [詳細設定] タブを選択します。 次に、 [カスタム CSS] タブまで下にスクロールします。

本文ページ テンプレートのカスタム CSS セクションに移動したら、次の CSS コードをコピーして貼り付けます。

/* Custom Scrollbar CSS */
/* Firefox */
#scrollie {
scrollbar-width: auto;
scrollbar-color: #000000 #ffffff;
}

/* Chrome, Edge, and Safari */
#scrollie::-webkit-scrollbar {
width: 16px;
}

#scrollie::-webkit-scrollbar-track {
background: #ffffff;
}

#scrollie::-webkit-scrollbar-thumb {
background-color: #000000;
border-radius: 0px;
border: 3px solid #ffffff;
}

別の CSS ID を使用した場合は、これを反映するように Web サイト内のコード スニペットを更新したことを確認してください。 CSS を編集するか、CSS に追加して、ブランドや Web サイトに一致する方法で境界線のスタイルを設定できます。 私たちの場合、Divi Software Layout Pack のスタイルに合わせてフラットなデザインを採用しました。

ブログ投稿テンプレートを保存する

CSS の編集に満足したら、忘れずにブログ ページ テンプレートを保存してください。 ディビ テーマ ビルダー内の下部メニューの右下にある緑色の [保存] ボタンをクリックします。

設定が保存されたら、新しく更新されたブログのコメント セクションにアクセスしてください。

ディビのスクロール可能なコメント: 結論

Divi コメント モジュールのスクロール コンテナーを作成すると、ユーザーはコメント セクションのエクスペリエンスを向上させることができます。 ユーザー エンゲージメントは、ブログ内で育成するための重要な要素です。 コメント モジュールをスクロール可能にすることで、読者がさまざまなブログ投稿を楽しむときに使いやすくなります。