Diviテーマのブログモジュール列の数を変更する方法

FacebookさえずりredditPinterestのLinkedInのmail

ワードプレスの人気のテーマの一つであるDiviテーマでブログモジュールを使用してブログ記事をグリッド形式で表示する場合、サイドバーのないページで、基本的に3列で表示されます。 CSSコードを使用してDiviテーマのブログモジュール列の数の変更が可能です。

ワードプレスのDiviテーマのブログモジュール列の数を変更する方法

Diviテーマのブログモジュール列の数を4個に変更する

次の画像で DiviテーマのBlogモジュールの行に表示されるポストの数を変更する過程を見ることができます。

まず、上記の映像を見れば大まかにどのような方法で列数を変更する必要があるか感が来る。 基本的には1)ブログモジュールにCSSクラスを追加し、2)列の数を変更するCSSコードをカスタムCSSセクションに追加します。

Diviビルダーを利用したページの編集画面で、 Blogモジュールを追加し、 Blogモジュールの設定 ページで Design(デザイン)> Layout(レイアウト) オプションを グリッド(Grid)に設定します。

Diviテーマのブログモジュール列の数を変更

Advanced(詳細) セクションの CSS ID&Classes(CSS ID&クラス) 部分に CSS Class(CSSクラス)に「cu-blog」を入力します。 (CSSクラス名必要に応じて指定することができます。)

ワードプレスDiviテーマのCSSクラスを追加する - カラム数を変更

そして ワードプレス伝言板> 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列で表示されていることを確認することができます。

例:

ワードプレスのDiviテーマのブログ列の数を変更

他の列の数に変更する

ブログモジュールで2行に表示するポストの数を5個または4個に変更するには、次のCSSコードを変更する必要があります。 (下の数字「2」を「5」または「XNUMX」に適切に修正。)

content:「4 .column.size-1of4」!important;

数字「4」を行に表示するポストの数に変更するようです。 そして、次のラインでも同様の数値を変更します。

.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を使用して、レイアウトを(ある程度の範囲内で)必要に応じて調整することができます。

ワードプレスDiviテーマ無料レイアウトのロード

作業をよりすることができウォルヒするライブラリから事前定義されたレイアウトを活用することを検討しています。 Blogで検索してみる140を超えるブログ関連のレイアウトが検索されます。 その中で好みを選択してロードすることができます。 複数のレイアウトを呼び出して、不要なものは削除して使用することも可能です。

ワードプレスDiviテーマ

注:



コメントを残す