Divi Blogモジュールには、ブログ投稿に役立つグリッドの形式のレイアウトオプションがあります。 グリッドテンプレートは、ブログの投稿をボックスまたはマップに整理して、標準ビューと比較して画面上のアイテムの表示を簡素化します。

ブログモジュールの設定により、ネットワークの全体的なデザインをカスタマイズできます。 すべてのカードの背景色、フォント、余白などを簡単に同じにすることができます。ただし、スタイルオプションはグリッド全体のデザインに限定されているため、困難です。グリッド内のマップに複数または異なるデザインを適用します。

今日は、グリッドを構成するカードを対象にして複数のスタイルを適用する方法を説明します。 ブログ カスタムCSSを使用します。 他のカードに異なるスタイルを適用して、市松模様の効果を作成する方法を説明します。 また、各カードを行ごとに異なるスタイルにする方法と、個々のカードをターゲットにする方法も説明します。

これらはカスタマイズ方法に関する 4 つの例です ブログ、使用できるホバー効果も含まれます。 このチュートリアルを終えると、素晴らしいデザインを作成できるようになります。 ブログ.

Diviテーマに関するその他のチュートリアル

• レストランの利用ディビテーマの5のウェブサイト
• WooCommerce製品ディビにテキストを追加する方法
• Diviのページ間でメニューの色を変更する方法
• Diviについて知らない機能
• Diviでスライダーを作成する方法
• Diviでユーザーロールを編集する方法

のは、始めましょう。

ブログのレイアウトグリッドの設定

ブログモジュールカードのデザインを開始する前に、少なくとも12の記事がボックス内の画像とともに作成されていることを確認してください。

メッセージが作成されたら、新しいページを作成します。 新しいページで、標準部分の全幅の列にブログモジュールをデプロイします。

をクリックして、ブログモジュールの設定を編集します。 [一般設定]で、次の設定を変更します。

• レイアウト：グリッド（グリッド）
• 記事数：12
• 注目の画像を表示：はい
• ボタン続きを読む：ON

[カスタムCSS]で、[CSSID]テキストボックスに「gridcard」と入力します。 これは、このブログモジュールのみをパーソナライズする方法になります。

変更を保存します

ブログの「グリッド」レイアウトを理解する方法

今、あなたの場所にあなたのブログのグリッドを持っていること、あなたがカスタマイズしたいブログのモジュールのマップを見つけることができるように、グリッドのレイアウトの構造を理解することが重要です。

ブロググリッドは、3列のレイアウトで構成されます。 以下は、3つの列に分割された12ブログ記事を含むブロググリッドの図です。

ブログチケットカードは、各列の上から下に並べられています。 そのため、番号を付けたい場合は、上から下までの長さごとに1から4をカウントする必要があります。

各列の下の各ブログカードの番号順がわかっているので、次のように各カードを奇数または偶数として識別することもできます。

デザインゲートの例

例n°1：「チェッカー」グリッドの設計

この最初の例では、ブログモジュールの最初の列にあるすべての奇数カード（カード1と3）をターゲットにして、背景色を濃い灰色にします。 これを行うには、「Divi→テーマオプション」に移動し、カスタムCSSテキストボックスに次のCSSを追加します。

#gridcard .column：最初の子記事：n番目の子（奇数）{背景：#333。 }

ここでは、このコードが何をするかの内訳は次のとおりです。

＃gridcard =ブログモジュール全体のID

.column：first-child =ブログモジュールの最初の列を選択

post：nth-​​child（odd）=列内のすべての奇数のアイテム（またはカード）を選択します

すべてをまとめると、これにより、ブログモジュールの最初の列にあるID「gridcard」の奇数番号のカードが選択されます。

その後、次のCSSを追加することで、暗い背景の上に行くだろう、あなたの白いテキストを追加します。

#gridcard .column：第一子の記事：n番目の子（奇数）.ENTRYタイトル、#gridcard .column：第一子の記事：n番目の子（奇数）.POST-メタ、#gridcard .column：最初の子記事：n番目の子（奇数）.postメタA、#gridcard .column：最初の子記事：n番目の子（奇数）.POSTコンテンツのP {色：#FFFFFF。 }

このコードは、ブログ モジュール カード内のすべてのテキスト要素 (タイトル、投稿メタ、投稿メタ リンク、 コンテンツ 記事の）そして色を白にします。

結果は次のとおりです。

チェッカーボードレイアウトを作成する次のステップは、XNUMX番目の列の奇数番号のカードをターゲットにして、最初の列と同じように濃い灰色の背景と白いテキストを適用することです。 [カスタムCSS]テキストボックスに次のCSSを追加します。

#gridcard .column：最後の子の記事：n番目の子（奇数）{背景：＃333; } #gridcard .column：last-child article：nth-​​child（odd）.entry-title、＃gridcard .column：last-child article：nth-​​child（odd）.post-meta、＃gridcard .column：last-子記事：n番目の子（奇数）.post-meta a、＃gridcard .column：最後の子の記事：n番目の子（奇数）.post-content p {色：#ffffff; }

このコードは「最後の」列を対象としています（この場合、3番目の列は最後の列です）ニックネーム要素「last-child」を使用します。

2番目の列（または中間）、チェッカーボード効果を完了するために偶数カードをターゲットにします。 これを行うには、次のCSSを追加する必要があります。

#gridcard .column：nth-​​child（2）article：nth-​​child（even）{background：＃333; } #gridcard .column：nth-​​child（2）article：nth-​​child（even）.entry-title、＃gridcard .column：nth-​​child（2）article：nth-​​child（even）.post-meta、＃ gridcard .column：nth-​​child（2）article：nth-​​child（even）.post-meta a、＃gridcard .column：nth-​​child（2）article：nth-​​child（even）.post-content p {color ：#fff; }

今すぐブログモジュールカードのチェッカーボードのレイアウトを確認するためにブログページをチェックアウト行きます。

例2：チェッカーレイアウトでホバー効果を追加する

ブログモジュールカードをターゲットにする方法がわかれば、カード内の任意の要素をクリエイティブに変更できます。

この例では、チェッカーボードレイアウトを使用します。今回は、マップにカーソルを合わせると、注目の画像を濃い灰色のマップから白黒に変更します。 そして、白いカードにカーソルを合わせると、白いカードのフロントページの画像が明るくなります。 これを行うには、カスタムCSS領域に次のCSSを追加します（新しいコードと互換性がないように、他のコードを無効にするか切り取ってください）。

#gridcard .column：最初の子の記事：n番目の子（奇数）、＃gridcard .column：最後の子の記事：n番目の子（奇数）、＃gridcard .column：n番目の子（2）の記事：n番目の子（偶数）{背景：＃333; } #gridcard .column：first-child article：nth-​​child（odd）.entry-title、＃gridcard .column：first-child article：nth-​​child（odd）.post-meta、＃gridcard .column：first-子記事：n番目の子（奇数）.post-meta a、＃gridcard .column：最初の子の記事：n番目の子（奇数）.post-content p、＃gridcard .column：最後の子の記事：n番目の子（奇数）.entry-title、＃gridcard .column：最後の子の記事：n番目の子（奇数）.post-meta、＃gridcard .column：最後の子の記事：n番目の子（奇数）.post-meta a 、＃gridcard .column：最後の子の記事：n番目の子（奇数）.post-content p、＃gridcard .column：n番目の子（2）の記事：n番目の子（偶数）.entry-title、＃gridcard。列：n番目の子（2）記事：n番目の子（偶数）.post-meta、＃gridcard .column：n番目の子（2）の記事：n番目の子（偶数）.post-meta a、＃gridcard .column ：n番目の子（2）の記事：n番目の子（偶数）.post-content p {color：#fff; } #gridcard .column：nth-​​child（2）article：nth-​​child（even）：hover img、＃gridcard .column：first-child article：nth-​​child（odd）：hover img、＃gridcard .column：last -子記事：n番目-子（奇数）：ホバーimg {-webkit-フィルター：グレースケール（1）; フィルタ：グレースケール（1）; } #gridcard .column：nth-​​child（2）article：nth-​​child（odd）：hover img、＃gridcard .column：first-child article：nth-​​child（even）：hover img、＃gridcard .column：last -子記事：n番目-子（偶数）：ホバーimg {-webkit-フィルター：明るさ（1.5）; フィルター：明るさ（1.5）; }

カードに反転効果を追加して、白いカードにカーソルを合わせると濃い灰色になり、暗い灰色のカードにカーソルを合わせると白になるようにすることもできます。

以下のCSSを追加して、上記よりCSS：

#gridcard .column article、＃gridcard .column article img {-webkit-transition：すべて0.8秒; -moz-transition：すべて0.8秒。 遷移：すべて0.8秒。 } #gridcard .column：最初の子の記事：n番目の子（奇数）：ホバー、＃gridcard .column：最後の子の記事：n番目の子（奇数）：ホバー、＃gridcard .column：n番目の子（2）記事：n番目の子（偶数）：ホバー{背景：#fff; } #gridcard .column：first-child article：nth-​​child（odd）：hover .entry-title、＃gridcard .column：first-child article：nth-​​child（odd）：hover .post-meta、＃gridcard。列：最初の子の記事：n番目の子（奇数）：ホバー.post-meta a、＃gridcard .column：最初の子の記事：n番目の子（奇数）：ホバー.post-content p、＃gridcard .column：最後の子の記事：n番目の子（奇数）：ホバー.entry-title、＃gridcard .column：最後の子の記事：n番目の子（奇数）：ホバー.post-meta、＃gridcard .column：最後の子の記事：n番目の子（奇数）：ホバー.post-meta a、＃gridcard .column：最後の子の記事：n番目の子（奇数）：ホバー.post-content p、＃gridcard .column：n番目の子（2）記事：n番目の子（偶数）：ホバー.entry-title、＃gridcard .column：n番目の子（2）記事：n番目の子（偶数）：ホバー.post-meta、＃gridcard .column：n番目の子（ 2）記事：n番目の子（偶数）：ホバー.post-meta a、＃gridcard .column：n番目の子（2）記事：n番目の子（偶数）：ホバー.post-content p {色：＃333; } #gridcard .column：最初の子の記事：n番目の子（偶数）：ホバー、＃gridcard .column：最後の子の記事：n番目の子（偶数）：ホバー、＃gridcard .column：n番目の子（2）記事：n番目の子（奇数）：ホバー{背景：＃333; } #gridcard .column：first-child article：nth-​​child（even）：hover .entry-title、＃gridcard .column：first-child article：nth-​​child（even）：hover .post-meta、＃gridcard。列：最初の子の記事：n番目の子（偶数）：ホバー.post-meta a、＃gridcard .column：最初の子の記事：n番目の子（偶数）：ホバー.post-content p、＃gridcard .column：最後の子の記事：n番目の子（偶数）：ホバー.entry-title、＃gridcard .column：最後の子の記事：n番目の子（偶数）：ホバー.post-meta、＃gridcard .column：最後の子の記事：n番目の子（偶数）：ホバー.post-meta a、＃gridcard .column：最後の子の記事：n番目の子（偶数）：ホバー.post-content p、＃gridcard .column：n番目の子（2）記事：n番目の子（奇数）：ホバー.entry-title、＃gridcard .column：n番目の子（2）記事：n番目の子（奇数）：ホバー.post-meta、＃gridcard .column：n番目の子（ 2）記事：n番目の子（奇数）：ホバー.post-meta a、＃gridcard .column：n番目の子（2）記事：n番目の子（奇数）：ホバー.post-content p {色：#fff; }

さあ、ブログへの影響を見てみましょう。

例＃3：線でマップをカスタマイズします

XNUMX番目の例では、同じ暗い背景と白いテキストをXNUMX行おきのカード（列ではない）に適用します。 これを行うには、各列のすべての偶数カードをターゲットにする必要があります。 テーマの「Divi→オプション」に移動し、このチュートリアルの開始以降に追加した以前のCSSコードを無効にするか削除してください。 次に、次のCSSを追加します。

#gridcard記事：n番目の子（偶数）{背景色：＃333; } #gridcard article：nth-​​child（even）.entry-title、＃gridcard article：nth-​​child（even）.post-meta、＃gridcard article：nth-​​child（even）.post-meta a、＃gridcard article ：n番目の子（偶数）.post-content p {色：#fff; }

結果は次のとおりです。

例＃4：特定のグリッドマップの設計

特定のカードを選択したい人もいるかもしれません。 これを行うには、各カードに自動的に割り当てられる一意のアイテムIDを見つける必要があります。 この例では、Chromeブラウザを使用しています。

ブログモジュールを表示しているページに移動し、カードの3466つを右クリックします。 表示されるオプションボックスで、[検査]を選択します（一部のブラウザには[アイテムの検査]などがある場合があります。これにより、開発者ツールウィンドウが展開され、htmlとcssの両方が表示されます。ウェブページ。記事をラップする記事タグを見つけて、それに割り当てられた記事IDを書き留めます。これは、個々のカードをターゲットにするために使用する必要があるセレクターです。私の例では、右クリックして検査し、ID「post-XNUMX」を見つけました。

以下の通り：

彼に白い文字でグレーの背景を与えるために、このCSSカードをターゲットにするには、次のCSSを使用する必要があります。

＃post-3466 {背景：＃333333; }＃post-3466 .entry-title、＃post-3466 .post-meta、＃post-3466 .post-meta a、＃post-3466 .post-content p {color：#fff; }

これで、マップに特定のスタイルが適用されました。

それで全部です！

最終的な考え

これらは、ブログモジュールカードのこのタイプのCSSターゲティングを使用して実現できるさまざまなスタイルのほんの一例です。 カードごとに同じスタイルを維持する必要はなくなりました。 好きなようにデザインできます。

ご質問やご提案があれば私にそれらを提供して自由に感じます。

[vc_row center_row=”yes”][vc_column width=”1/2”][vcex_button target=”空白” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700” style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI テーマをダウンロード [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”空白” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700” style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD THE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

他のDiviチュートリアル

• レストランの利用ディビテーマの5のウェブサイト
• Divi WooCommerce製品にテキストを追加する方法
• Diviページ間のメニューカラーを変更する方法
• Diviでブログのグリッドをパーソナライズする方法
• ワードプレスの役割ディビエディタを使用する方法
• 全画面のDiviスライダーを作成する方法
• Diviページ間のメニューの色を変更する方法
• Diviについておそらく知らない機能
• WordPressでDivi Builderを使用する方法
• Diviビデオスクロールモジュールの使用方法
• Divi Builder Flipモジュールの使い方
• Divi Builderに推薦モジュールを追加する方法
• Diviテキストモジュールの使い方
• Diviでスライダーを作成する方法
• Diviユーザーロールを編集する方法
• Divi Social Mediaモジュールの使用方法
• テーマWordPress Diviでショップモジュールを使用する方法
• Diviサイドバーモジュールの使用方法
• Divi Price Table Moduleの使い方
• Diviの出版物のタイトルモジュールの使用方法
• Diviのビデオモジュールを追加する方法
• 記事ナビゲーションモジュールの使用方法
• Divi検索モジュールの使い方
• Diviウォレットモジュールの使用方法
• Divi Builderでpersonモジュールを使用する方法
• Diviフィルターでウォレットモジュールを使用する方法
• 全幅スライダモジュールの使用方法
• Divi Builderイメージモジュールの使用方法
• Divi Builderの全幅ナビゲーションモジュールの使用方法
• 画像ギャラリーモジュールの使用方法
• Divi Builderフル幅カードモジュールの使用方法
• Divi Full Width Portfolioモジュールの使用方法
• Divi全角ヘッダーモジュールの使用方法
• Divi Counter Moduleの使い方
• Divi Builderの記事スライダーの使用方法
• Divi Email Optinモジュールの使用方法