WordPress 人気のテーマの一つであるDiviテーマでブログモジュールを使用してブログ記事をグリッド形式で表示する場合、サイドバーのないページで、基本的に3列で表示されます。 CSSコードを使用してDiviテーマのブログモジュール列の数の変更が可能です。
WordPress Diviテーマのブログモジュール列の数を変更する方法
Diviテーマのブログモジュール列の数を4個に変更する
次の画像で Diviテーマの Blog モジュールのXNUMX行に表示されるポストの数を変更するプロセスを確認できます。
まず、上記の映像を見れば大まかにどのような方法で列数を変更する必要があるか感が来る。 基本的には1）ブログモジュールにCSSクラスを追加し、2）列の数を変更するCSSコードをカスタムCSSセクションに追加します。
Diviビルダーを利用したページの編集画面で、 Blog モジュールを追加し、 Blog モジュールの設定 ページから Design（デザイン）> Layout（レイアウト） オプションを グリッド（Grid）に設定します。
Advanced（詳細） セクションの CSS ID＆Classes（CSS ID＆クラス） 部分に CSS Class（CSSクラス）として「cu-blog"と入力します。（CSSクラス名は必要に応じて名前を付けることができます。）
そして WordPress お知らせ > Divi > Theme Options（テーマオプション）> Custom CSS（カスタムCSS） セクションに次のCSSコードを追加します。
/* Divi 테마의 블로그 열 개수를 3열에서 4열로 변경하기 */
.cu-blog .et_pb_salvattore_content[data-columns]::before {
content: '4 .column.size-1of4' !important;
}
@media only screen and ( min-width: 981px ) {
.cu-blog .column.size-1of4 {
width: 24%!important;
margin-right: 1%;
}
}
// 출처: https://intercom.help/上記のコードを保存した後、クロムなどのブラウザで確認してみると、ブログ記事が4列で表示されていることを確認することができます。
例：
他の列の数に変更する
ブログモジュールで2行に表示する投稿の数を5つまたは4つに変更するには、次のCSSコードを変更する必要があります。 （下の数字「2」を「5」または「XNUMX」に適切に修正してください。）
content: '4 .column.size-1of4' !important;数字 "4" を XNUMX 行に表示するポスト数に変更するようにします。 そして、次の行でも同様に数字を変更します。
.cu-blog .column.size-1of4その後、次のCSSコードで幅（width）を状況に合わせて変更する必要があります。
width: 24%!important;
margin-right: 1%;幅と余白（margin）の値を変更しながら好みの適切なレイアウトを表示する値を決定することができます。 （例えば、2列に変更した場合、49％もしくは48％などに変更してテストすることができます。）
モバイル機器でのみブログ列の数を変更したい場合
もしモバイルのみ変更したい場合は、次のようにCSSメディアクエリを使用するようにします。
@media screen and (max-width: 767px) {
/* 코드를 여기에 입력 */
}CSSメディアクエリの詳細については、W3SChoolsの CSS Media Queries文書を参照してみてください。 メディアクエリを使用すると、機器の解像度に応じて異なってCSSコードを適用することができます。
最後に、
以上でDiviテーマでブログモジュールに表示されるブログの列の数を変更する方法について説明しました。 CSSを少し知ることCSSを使用して、レイアウトを（ある程度の範囲内で）必要に応じて調整することができます。
作業をより簡単にするために、ライブラリで事前定義されたレイアウトを利用することを検討してください。 Blogで検索すると、140を超えるブログ関連のレイアウトが検索されます。 その中から好きなものを選択してロードできます。 複数のレイアウトを呼び出して不要なものは削除して使用することも可能です。
コメントを残す