Diviでスクロール可能な最近の投稿ウィジェット領域を設計する方法

Diviのサイドバーモジュールは、カスタムウィジェット領域をデザインに統合するための非常に便利なツールです。 これにより、Diviレイアウト内に任意のWordPressウィジェットを表示できます。 このチュートリアルでは、Diviでスクロール可能な最近の投稿ウィジェット領域を作成する方法を紹介します。 ブログモジュールの右側に最近の投稿ウィジェット領域がある「ブログから」セクションを設計します。 これは、ホームページまたはランディングページで最新のブログ投稿のいくつかを紹介するのに最適です。

始めましょう！

スニークピーク

これは、このチュートリアルで構築するデザインのちょっとした覗き見です。

スクロール可能な最近の投稿のレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

チュートリアルに行きましょう。

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

最近の投稿ウィジェットエリアの作成

最近の投稿ウィジェットをDiviレイアウトに追加するので、最初に行う必要があるのは、Diviのサイドバーモジュールで使用する新しいウィジェット領域（最近の投稿ウィジェットを使用）を作成することです。

最近の投稿ウィジェット領域を作成するには、[外観]> [ウィジェット]に移動します。 次に、ウィジェット領域に名前を付け（必要に応じて「最近の投稿」と呼びます）、[作成]ボタンをクリックして、新しいウィジェット領域を作成します。 ページを更新して、使用可能な新しいウィジェット領域を確認します。

ページの左側にあるWordPressに付属の最近の投稿ウィジェットのトグルを開きます。 次に、リストから「最近の投稿」ウィジェット領域を選択し、「ウィジェットの追加」をクリックして、ウィジェットをウィジェット領域に追加します。

次に、最近の投稿ウィジェット領域を開き、最近の投稿ウィジェットをタイトルで更新します。 表示する投稿の数を多数に設定して、デザインが完了したときにスクロールするのに十分な投稿があるようにします。

ウィジェット領域が配置されたので、Diviデザインから始めることができます。

スクロール可能な最近の投稿ウィジェット領域を使用して「ブログから」セクションを作成する

見出しセクションの設計

1列の行を持つ新しい通常のセクションを作成します。

モジュールを追加する前に、セクションを次のように更新してください。

背景色：＃333333
カスタムパディング：0px下

次に、行の設定を更新して、行の下部のパディングも削除します。

カスタムパディング：0px下

次に、テキストモジュールを行に追加します。

次に、次のテキスト設定を更新します。

コンテンツには、次のh2見出しhtmlを追加します。

<h2>From our Blog</h2>

次に、次のテキスト設定を更新します。

見出し2フォント：Roboto
見出し2フォントスタイル：TT
見出し2のテキストの色：#ffffff
見出し2テキストサイズ：40px
見出し2文字の間隔：2px

これで、レイアウトの見出しが処理されます。 次に、特殊なセクションを使用して残りのレイアウトを作成します。

専門セクションの作成

レイアウトの残りの部分に別の特殊セクションを使用すると、スクロール可能なウィジェット領域の右側に専用のサイドバーを配置できます。 さらに、サイドバー領域とは別に、セクションの左側にある行のサイズとスタイルを設定できます。

先に進み、次のように右側の列レイアウトを持つ特殊セクションを追加します。

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

モジュールを追加する前に、セクションと行の設定を更新しましょう。

セクション設定のカスタマイズ

専門セクションの設定を開き、以下を更新します。

背景色：＃333333
側溝幅：2
カスタムパディング：0pxトップ
列2のカスタムパディング：0px上、0px下

行設定をカスタマイズする

次に、行設定を開き、以下を更新します。

高さ：640px
上枠幅：8px
上枠の色：＃444444
下の境界線の幅：8px
下の境界線の色：＃444444

カスタムの640pxの高さは、専門セクションのサイドバーに追加するスクロール可能な最近の投稿ウィジェット領域の高さに一致するように指定されています。 これにより、2つの高さが同じになり、見た目に美しいデザインになります。

ブログモジュールの追加

左側の1列の行に、ブログモジュールを追加します。

次に、ブログモジュールの設定を次のように更新します。

投稿番号：2

レイアウト：グリッド
タイトルフォント：Roboto
メタフォント：Roboto
メタフォントの太さ：軽い
メタフォントスタイル：TT
ページ付けフォント：Roboto
ページ付けフォントスタイル：TT
ページ付けテキストの色：#ffffff
ページ付けテキストサイズ：18px
ページ付け文字の間隔：2px

スクロール可能な最近の投稿ウィジェット領域の追加

最後に、スクロール可能な最近の投稿をレイアウトに追加します。 これを行うには、右側の専門セクションのサイドバー領域にサイドバーモジュールを追加します。

次に、[コンテンツ]タブの[ウィジェット領域]ドロップダウンから選択して、前に作成した「最近の投稿」ウィジェット領域を選択します。

次に、タイトルと本文のテキストデザインを次のように更新します。

タイトルフォント：Roboto
タイトルフォントスタイル：TT
タイトルテキストの色：#ffffff
タイトル文字の間隔：2px
ボディフォント：Roboto
ボディフォントスタイル：下線

次に、次のように境界区切り記号を非表示にします。

ボーダーセパレーターを表示：いいえ

次に、サイドバーモジュールに最大の高さとカスタムパディングを次のように指定します。

最大高さ：640px
カスタムパディング：上30px、下30px、右5％

640pxの最大高さは、隣接する行に指定された640pxのカスタム高さと一致します。

サイドバーモジュールに最大高さ640pxを指定したので、スクロール可能な機能を取得するには、垂直オーバーフローをスクロールに設定する必要があります。 これを行うには、[詳細設定]タブに移動し、以下を更新します。

垂直オーバーフロー：スクロール

最終結果

それでおしまい！ それでは、最終結果を確認しましょう。

ボーナスオプション：デザインスクロールバーへのカスタムCSSの追加（すべてのブラウザーでサポートされているわけではありません）

クロスブラウザのサポートが必要な場合、WordPressでスクロールバーをスタイリングするのはちょっと面倒です。 したがって、ほとんどの場合、ブラウザのデフォルトのスタイルのままにして、1日と呼びます。 ただし、ページのデザインに合わせてスクロールバーをカスタマイズする場合は、カスタムCSSを追加できます。 残念ながら、ブラウザのサポートは、:: webkitプレフィックス付きCSSプロパティをサポートするブラウザ（基本的にはSafariとChromeのみ）に限定されています。 これがその方法です。

専門セクションの設定を開き、次のCSSクラスを追加します。

CSSクラス：cust-scroll

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

/* width */
.cust-scroll ::-webkit-scrollbar {
  width: 8px;
}

/* Track */
.cust-scroll ::-webkit-scrollbar-track {
  background: #444444; 
}
 
/* Handle */
.cust-scroll ::-webkit-scrollbar-thumb {
  background: #888888; 
}

/* Handle on hover */
.cust-scroll ::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}

これにより、スクロールバーの幅が8ピクセルに変更され、トラックとハンドルの色が調整されます。 自分でもっと多くのデザインや色を試してみてください。

また、不思議に思うかもしれませんが、他のブラウザのフォールバックは、スクロールバーのブラウザのデフォルトスタイルになります。

最終的な考え

コンテンツに垂直スクロールを追加すると、限られたスペースでより多くのコンテンツを表示するオプションをユーザーに提供したい場合に便利です。 スクロール可能な最近の投稿ウィジェット領域は、垂直スクロールが実際にうまく機能する方法の良い例です。 もちろん、このチュートリアルで使用されているサイドバーモジュールをテキストモジュールに置き換えて、必要なコンテンツに垂直スクロールを追加することもできます。 同じカスタマイズがすべてのモジュールに適用されます。

スクロールバーのスタイル設定に関しては、よりクロスブラウザソリューションを提供する他のプラグインまたはJavascriptソリューションがあると確信しています。 良いものをご存知でしたら、遠慮なく共有してください。

以下のコメントであなたからの連絡を楽しみにしています。

乾杯！